291 lines
8.8 KiB
Markdown
291 lines
8.8 KiB
Markdown
# 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
|