Parking Simulator Quick-Start
Adjust vehicle dimensions.
Draw the site polygon.
Draw polyline for entry road.
Place 2 markers (Entry/Exit).
Site Parameters
Parking Layout Simulator – Working Explanation
This application is a GIS-based parking layout generator built using interactive web mapping tools. It allows users to draw a site boundary, define roads, and automatically generate optimized parking layouts for multiple vehicle types.
1. Technologies Used
- Leaflet.js – Interactive map rendering
- Leaflet Draw – Drawing polygons, lines, and markers
- Turf.js – Geospatial calculations
These libraries work together to enable real-time spatial design directly in the browser.
2. Map Initialization
var map = L.map('map').setView([20.009130, 73.791004], 18);
The map is centered at a specific coordinate and zoom level. Satellite imagery is loaded using ArcGIS tile services.
3. Drawing System
Users draw elements directly on the map:
- Polygon → Parking boundary
- Polyline → Access road
- Markers → Entry/Exit gates
map.on('draw:created', function(e){
drawnItems.addLayer(e.layer);
});
All drawn elements are stored in arrays for later processing:
polygons[]polylines[]markers[]
4. Site Division Logic
The function divideIntoTwo() splits the site into two parts:
- If site is wider → split vertically
- If taller → split horizontally
var bbox = turf.bbox(polygon);
Bounding box dimensions determine split direction.
This improves layout efficiency by distributing vehicle zones logically.
5. Road Buffer Creation
The drawn road is expanded using a buffer:
var roadBuffer = turf.buffer(mainRoad, 6, {units: 'meters'});
Purpose:
- Create clearance around road
- Prevent parking overlap
- Reserve circulation space
The parking area is then reduced:
var remainingArea = turf.difference(parkingGeoJSON, roadBuffer);
6. Zone Allocation
The remaining area is divided into up to 4 sections:
- Bus Zone
- Tempo Zone
- Car Zone
- Bike Zone
Each section is assigned based on size priority.
7. Vehicle Parameters
User inputs define vehicle sizes and capacities:
bus: { length, width, capacity }
These values are used to compute stall dimensions and capacity.
8. Parking Layout Algorithm
The core logic generates parking stalls using a grid system.
Step 1: Convert meters to degrees
const M_DEG = 111319.9;
This converts real-world dimensions into geographic coordinates.
Step 2: Row-wise iteration
- Outer loop → rows
- Inner loop → stalls
Step 3: Stall creation
var stall = turf.polygon(ring);
Each stall is validated:
turf.booleanWithin(stall, section)
Only stalls fully inside the boundary are accepted.
9. Double-Loading Concept
The layout follows 90° Double-Loading:
- Two rows face each other
- Shared central aisle
- Maximizes space efficiency
Every alternate row adds an aisle:
if (rowT % 2 === 1)
10. Aisle Generation
Aisles are drawn as white lines:
L.geoJSON(aLine, { color: '#FFF' })
These represent internal vehicle circulation paths.
11. Visualization
Each vehicle type is color-coded:
- Red → Bus
- Blue → Tempo
- Green → Car
- Orange → Bike
Stalls are rendered using Leaflet layers.
12. Capacity Calculation
Total capacity is computed as:
capacity = number of stalls × vehicle capacity
Density is calculated per hectare:
density = total people / area
13. Report Generation
A summary table is dynamically created:
- Vehicle-wise stall count
- Total passenger capacity
- Overall density
document.getElementById('report').innerHTML = html;
14. Reset Function
location.reload();
Resets the entire map and clears all drawings.
15. Engineering Significance
- Automates parking design
- Reduces manual layout effort
- Improves land utilization
- Supports transport planning
- Useful for bus terminals, depots, and public parking
Posts
0 Comments
If you have any doubts, suggestions , corrections etc. let me know