Skip to content

Geospatial Urban Analytics Platform

ui/ux / web

Urban planning at scale generates a particular kind of complexity. The data is spatial, multidimensional, and dense — district boundaries, transport networks, demographic scores, accessibility indices, 3D building extrusions. Analysts need to move between layers, draw hypothetical geometries, run analyses, compare scenarios, and read results inside a single interface without context switches. Building that interface as a standard CRUD dashboard is not an option. It requires something closer to a GIS application embedded in a web platform.

This project is that platform — built for an infrastructure and engineering consultancy working at city scale.

The Viewer Engine

The centerpiece is the Viewer: a custom geospatial visualization engine built on MapLibre-GL, extended with a plugin-like component-controller architecture that decouples map interaction logic from UI rendering.

Every interactive capability is implemented as a BaseComponent with a defined lifecycle — onInit, onRender, onDestroy. Components register themselves in a ComponentRegistry and communicate through a SimpleEmitter event bus rather than direct references. Controllers handle lower-level input: MouseEventController processes click and hover events, KeyboardEventController handles shortcuts, MemoryController manages undo/redo snapshots. The boundary between UI components and input controllers is explicit and enforced by the architecture.

Adding a new map capability means implementing the BaseComponent interface and registering it — not modifying existing components.

Spatial Data and Coordinate Systems

The platform works with real urban datasets: district boundaries, metro lines, metro stations, parks, wadi networks. Data is served as GeoJSON via dedicated API routes and as vector tiles from local MBTiles files. The Viewer loads these layers dynamically and gives analysts control over visibility, opacity, filters, and rendering style through a live style editor.

The underlying data uses UTM Zone 38N projection. A dedicated coordinate converter transforms imported geometries to WGS84 at load time, allowing GeoJSON in the local coordinate system to render correctly on the global map without manual preprocessing.

Analysis Capabilities

3D Extrusion Analysis renders building footprints as extruded polygons with height driven by analysis values — population density, land use intensity, or custom metrics. A movable panel displays donut charts and advanced statistical visualizations that update in real time as the user interacts with the map.

District Scorecards are multi-dimensional popups that open when an analyst clicks a district. A tabbed panel presents scoring across six dimensions: Urban Structure, Transport, Livelihood, Education, Community Identity, and a Summary view. Each tab combines bar charts, pie charts, and waffle charts. Data model and rendering are fully decoupled.

Scenario Analysis supports named analytical modes including Opportunity Accessibility Index, Public Transport Accessibility Level (PTAL), Opportunity Accessibility for Schools, and Access to Education — each with its own visualization and a downloadable PDF report.

Drawing Tools let analysts sketch geometries directly on the map: lines, rectangles, circles, points, and freeform polygons. Every drawing operation is snapshotted by the MemoryController for full undo/redo support. Area selection enables spatial queries over drawn regions.

The Layer Editor

Each layer type — fill, line, circle, symbol, heatmap, fill-extrusion — has its own style editor with controls specific to that geometry type. A LayerPaintController translates editor state into MapLibre paint expressions. An InteractiveRampEditor lets analysts define color ramps by picking classification breakpoints visually. A GenericPropertyScanner introspects the layer's source data to enumerate available properties for driving style expressions.

Backend and Collaboration

PostgreSQL via Prisma, Redis for session caching, BullMQ for job queues, WebSocket for real-time project collaboration. Projects are role-scoped with admin, editor, and viewer roles enforced at the API layer. Authentication covers JWT with OTP, TOTP, and OAuth SSO, with session fingerprinting tracking device, browser, OS, and location metadata.

Newsletter

Stay updated! Get all the latest and greatest posts delivered straight to your inbox