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:
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:
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)
- Click the POINTS tab in the sidebar
- Click "Add Point on Map"
- Click anywhere on the map
- Fill in the modal form (name, category, etc.)
- Click "Add Point" — marker appears on map
Drawing a Road
- Click the ROADS tab
- Click "Draw Road on Map"
- Click multiple points on the map to draw the polyline
- Double-click to finish drawing
- Modal appears with length auto-calculated (read-only)
- Enter road name and type, then save
Drawing a Land Parcel
- Click the PARCELS tab
- Click "Draw Parcel on Map"
- Click to draw polygon vertices; double-click to close
- Modal appears with area auto-calculated in m²
- 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:
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:
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)
- Click the POINTS tab in the sidebar
- Click "Add Point on Map"
- Click anywhere on the map
- Fill in the modal form (name, category, etc.)
- Click "Add Point" — marker appears on map
Drawing a Road
- Click the ROADS tab
- Click "Draw Road on Map"
- Click multiple points on the map to draw the polyline
- Double-click to finish drawing
- Modal appears with length auto-calculated (read-only)
- Enter road name and type, then save
Drawing a Land Parcel
- Click the PARCELS tab
- Click "Draw Parcel on Map"
- Click to draw polygon vertices; double-click to close
- Modal appears with area auto-calculated in m²
- 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