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)

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:

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)

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