# WebGIS — Spatial Data Management System
## Setup & Installation Guide

---

## Folder Structure

```
webgis/
├── index.html              ← Main frontend (single-page app)
├── database.sql            ← Database schema + seed data
├── config/
│   ├── db.php              ← PDO database connection
│   └── helpers.php         ← Shared utility functions
├── api/
│   ├── points.php          ← CRUD for point features
│   ├── roads.php           ← CRUD for road polylines
│   └── parcels.php         ← CRUD for land parcel polygons
├── assets/
│   ├── css/
│   │   └── style.css       ← Application stylesheet
│   └── js/
│       └── app.js          ← Main application JavaScript
└── docs/
    └── SRS.md              ← Software Requirements Specification
```

---

## Requirements

- **PHP** 8.0 or higher (with PDO + PDO_MySQL extension)
- **MySQL** 8.0 or higher (or MariaDB 10.6+)
- **Web Server**: Apache (XAMPP/WAMP) or Nginx
- **Modern Browser**: Chrome 90+, Firefox 88+, Edge 90+

---

## Installation Steps

### 1. Copy Files
Place the entire `webgis/` folder inside your web server's document root:
- XAMPP: `C:/xampp/htdocs/webgis/`
- WAMP: `C:/wamp64/www/webgis/`
- Linux: `/var/www/html/webgis/`

### 2. Create the Database
Open phpMyAdmin or MySQL CLI and run:
```sql
source /path/to/webgis/database.sql;
```
This creates the `webgis_db` database and all tables with sample data.

### 3. Configure Database Connection
Edit `config/db.php`:
```php
define('DB_HOST', 'localhost');
define('DB_NAME', 'webgis_db');
define('DB_USER', 'root');       // your MySQL username
define('DB_PASS', '');           // your MySQL password
```

### 4. Start the Server
Start Apache and MySQL in XAMPP/WAMP, then visit:
```
http://localhost/webgis/
```

---

## Feature Usage

### Adding a Point (SPBU / Mosque / Poor Population)
1. Click the **POINTS** tab in the sidebar
2. Click **"Add Point on Map"**
3. Click anywhere on the map
4. Fill in the modal form (name, category, etc.)
5. Click **"Add Point"** — marker appears on map

### Drawing a Road
1. Click the **ROADS** tab
2. Click **"Draw Road on Map"**
3. Click multiple points on the map to draw the polyline
4. **Double-click** to finish drawing
5. Modal appears with **length auto-calculated** (read-only)
6. Enter road name and type, then save

### Drawing a Land Parcel
1. Click the **PARCELS** tab
2. Click **"Draw Parcel on Map"**
3. Click to draw polygon vertices; **double-click** to close
4. Modal appears with **area auto-calculated** in m²
5. Enter owner name and ownership type, then save

### Layer Visibility
- Use the **LAYERS** tab to toggle any layer on/off
- Each sub-layer (SPBU 24h, National Road, SHM parcels, etc.) is independently controllable

### Edit / Delete
- Click **✏️** icon on any list item or in a popup to edit
- Click **🗑️** to delete (with confirmation)
- Press **Escape** to cancel any active drawing

---

## API Endpoints

All endpoints return JSON. CORS headers are set for local development.

| Method | URL | Description |
|--------|-----|-------------|
| GET | `/api/points.php` | List all points as GeoJSON FeatureCollection |
| GET | `/api/points.php?id=N` | Get single point |
| GET | `/api/points.php?category=spbu` | Filter by category |
| POST | `/api/points.php` | Create a point |
| PUT | `/api/points.php?id=N` | Update a point |
| DELETE | `/api/points.php?id=N` | Delete a point |
| GET | `/api/roads.php` | List all roads |
| POST | `/api/roads.php` | Create a road |
| PUT | `/api/roads.php?id=N` | Update a road |
| DELETE | `/api/roads.php?id=N` | Delete a road |
| GET | `/api/parcels.php` | List all parcels |
| POST | `/api/parcels.php` | Create a parcel |
| PUT | `/api/parcels.php?id=N` | Update a parcel |
| DELETE | `/api/parcels.php?id=N` | Delete a parcel |

---

## Libraries Used (CDN — no installation required)

| Library | Version | Purpose |
|---------|---------|---------|
| Leaflet.js | 1.9.4 | Core mapping library |
| Leaflet.draw | 1.0.4 | Drawing tools (polyline, polygon) |
| leaflet-geometryutil | 0.10.3 | Geodesic area calculation |
| Google Fonts | — | Space Mono + DM Sans typography |

---
# WebGIS — Spatial Data Management System
## Setup & Installation Guide

---

## Folder Structure

```
webgis/
├── index.html              ← Main frontend (single-page app)
├── database.sql            ← Database schema + seed data
├── config/
│   ├── db.php              ← PDO database connection
│   └── helpers.php         ← Shared utility functions
├── api/
│   ├── points.php          ← CRUD for point features
│   ├── roads.php           ← CRUD for road polylines
│   └── parcels.php         ← CRUD for land parcel polygons
├── assets/
│   ├── css/
│   │   └── style.css       ← Application stylesheet
│   └── js/
│       └── app.js          ← Main application JavaScript
└── docs/
    └── SRS.md              ← Software Requirements Specification
```

---

## Requirements

- **PHP** 8.0 or higher (with PDO + PDO_MySQL extension)
- **MySQL** 8.0 or higher (or MariaDB 10.6+)
- **Web Server**: Apache (XAMPP/WAMP) or Nginx
- **Modern Browser**: Chrome 90+, Firefox 88+, Edge 90+

---

## Installation Steps

### 1. Copy Files
Place the entire `webgis/` folder inside your web server's document root:
- XAMPP: `C:/xampp/htdocs/webgis/`
- WAMP: `C:/wamp64/www/webgis/`
- Linux: `/var/www/html/webgis/`

### 2. Create the Database
Open phpMyAdmin or MySQL CLI and run:
```sql
source /path/to/webgis/database.sql;
```
This creates the `webgis_db` database and all tables with sample data.

### 3. Configure Database Connection
Edit `config/db.php`:
```php
define('DB_HOST', 'localhost');
define('DB_NAME', 'webgis_db');
define('DB_USER', 'root');       // your MySQL username
define('DB_PASS', '');           // your MySQL password
```

### 4. Start the Server
Start Apache and MySQL in XAMPP/WAMP, then visit:
```
http://localhost/webgis/
```

---

## Feature Usage

### Adding a Point (SPBU / Mosque / Poor Population)
1. Click the **POINTS** tab in the sidebar
2. Click **"Add Point on Map"**
3. Click anywhere on the map
4. Fill in the modal form (name, category, etc.)
5. Click **"Add Point"** — marker appears on map

### Drawing a Road
1. Click the **ROADS** tab
2. Click **"Draw Road on Map"**
3. Click multiple points on the map to draw the polyline
4. **Double-click** to finish drawing
5. Modal appears with **length auto-calculated** (read-only)
6. Enter road name and type, then save

### Drawing a Land Parcel
1. Click the **PARCELS** tab
2. Click **"Draw Parcel on Map"**
3. Click to draw polygon vertices; **double-click** to close
4. Modal appears with **area auto-calculated** in m²
5. Enter owner name and ownership type, then save

### Layer Visibility
- Use the **LAYERS** tab to toggle any layer on/off
- Each sub-layer (SPBU 24h, National Road, SHM parcels, etc.) is independently controllable

### Edit / Delete
- Click **✏️** icon on any list item or in a popup to edit
- Click **🗑️** to delete (with confirmation)
- Press **Escape** to cancel any active drawing

---

## API Endpoints

All endpoints return JSON. CORS headers are set for local development.

| Method | URL | Description |
|--------|-----|-------------|
| GET | `/api/points.php` | List all points as GeoJSON FeatureCollection |
| GET | `/api/points.php?id=N` | Get single point |
| GET | `/api/points.php?category=spbu` | Filter by category |
| POST | `/api/points.php` | Create a point |
| PUT | `/api/points.php?id=N` | Update a point |
| DELETE | `/api/points.php?id=N` | Delete a point |
| GET | `/api/roads.php` | List all roads |
| POST | `/api/roads.php` | Create a road |
| PUT | `/api/roads.php?id=N` | Update a road |
| DELETE | `/api/roads.php?id=N` | Delete a road |
| GET | `/api/parcels.php` | List all parcels |
| POST | `/api/parcels.php` | Create a parcel |
| PUT | `/api/parcels.php?id=N` | Update a parcel |
| DELETE | `/api/parcels.php?id=N` | Delete a parcel |

---

## Libraries Used (CDN — no installation required)

| Library | Version | Purpose |
|---------|---------|---------|
| Leaflet.js | 1.9.4 | Core mapping library |
| Leaflet.draw | 1.0.4 | Drawing tools (polyline, polygon) |
| leaflet-geometryutil | 0.10.3 | Geodesic area calculation |
| Google Fonts | — | Space Mono + DM Sans typography |

---

## Notes
- This application is designed for academic/prototype use. For production, add:
  - User authentication (sessions/JWT)
  - Input rate limiting
  - HTTPS enforcement
  - Database backup strategy

## Notes
- This application is designed for academic/prototype use. For production, add:
  - User authentication (sessions/JWT)
  - Input rate limiting
  - HTTPS enforcement
  - Database backup strategy