Real-Time Geospatial Mapping: Building 'Petrol Koi' with Next.js, Leaflet, and Spatial Queries

During acute fuel shortages, drivers often waste valuable fuel traveling from one filling station to another only to find pumps dry. To solve this problem in Lalmonirhat, I engineered **Petrol Koi**, a live, crowdsourced and station-verified geospatial tracking web application. Building an interactive map application that performs smoothly on budget Android devices across low-bandwidth mobile networks required strict optimization choices. ## Choosing the Architecture: Next.js + Leaflet While Google Maps is the standard choice for web applications, it carries heavy JavaScript initialization overhead (~300KB+ gzipped) and strict API billing limits. For a public utility tool designed for instantaneous mobile access, I chose **Leaflet** combined with OpenStreetMap raster tiles: - **Initial bundle payload**: Under 45KB gzipped. - **Client-Side Rendering**: Leaflet map components are loaded dynamically with `next/dynamic` and `ssr: false` to avoid window/DOM mismatch errors during SSR. ```tsx // Dynamic Leaflet container loading import dynamic from 'next/dynamic'; export const LiveStationMap = dynamic( () => import('./LiveStationMapInner'), { ssr: false, loading: () => ( Initializing GPS Coordinates... ), } ); ``` ## Bounding-Box Spatial Queries Rather than sending all stations in the database to the client and filtering in memory, the API accepts map viewport bounding coordinates (`north, south, east, west`): ```sql SELECT id, station_name, octane_status, diesel_status, latitude, longitude FROM fuel_stations WHERE latitude BETWEEN $1 AND $2 AND longitude BETWEEN $3 AND $4 AND is_active = true; ``` This spatial indexing allows the application to query thousands of regional points in under 4ms on PostgreSQL. ## Marker Clustering & Live Status Indicators Stations display live color-coded pulsing pins: - 🟢 **Green**: Octane & Diesel in stock - 🟡 **Amber**: Limited stock (rationed) - 🔴 **Red**: Out of stock Combining Leaflet MarkerCluster with lightweight CSS pulse animations gives users an instantaneous visual overview of local fuel availability without needing to tap through multiple menus.