Personal project · Geospatial editor · 2026
VECTOR — HD Map Studio
A precise, approachable map editor for lanes, intersections, and traffic signals — built around real Singapore streets.
Working prototype · AI-assisted design and developmentThe problem
Editing dense map data needs both precision and responsiveness. A small geometry change should not force the entire map to rebuild.
What I did
A React and deck.gl editor with contextual tools, command-based undo, worker imports, and device-local recovery, using Singapore as the sample workspace.
Where it landed
A working prototype with 13 automated tests and a measured million-feature CPU pipeline. Browser performance at that scale is still unverified.
Singapore, as a working canvas
The example workspace covers Raffles Place and Telok Ayer. Real OpenStreetMap centerlines and signal locations provide context; lane boundaries and intersection extents are illustrative, editable annotations.
Interactive preview
Explore Singapore streets, draw a lane, move a vertex, and undo your changes—all here inside the portfolio. Launch the editor when you’re ready; imported files stay on your device.
Precision without losing your place
A focused editing surface
Select, draw, and inspect in one workspace. White vertex handles, snapping, keyboard shortcuts, and named undo steps make changes visible and reversible.
Keep small changes small
Feature IDs map directly to bounded data chunks. An edit replaces only the affected chunk, preserving the other deck.gl data references and their GPU buffers.
Import with a way back
A worker parses and validates GeoJSON in batches. Cancellation or invalid geometry leaves the current map untouched; replacement happens only after validation completes.
Recovery belongs in the workflow
IndexedDB saves changed chunks locally. Explicit save feedback and GeoJSON export give users a recoverable workspace and a portable backup.
Measured, with boundaries
One CPU benchmark on macOS and Node v26.4.0 processed 1,000,000 mixed features with 1,400,000 vertices in a 135.51 MiB Singapore-coordinate dataset. These are single-run measurements, not browser frame rates or a production capacity guarantee.
- JSON parsing
- 838.42 ms
- Validation
- 196.26 ms
- Indexing
- 74.63 ms
- Single-feature edit
- 0.07 ms
The run used about 871 MiB of Node heap. Parsing reads the complete JSON document; worker isolation keeps it off the UI thread but does not eliminate memory cost.
What this prototype does—and what remains
Point, line, and polygon drawing, vertex editing, property updates, import/export, undo/redo, and local recovery are implemented. Multi-part geometries can be imported and managed, but vertex editing supports single geometries only. Automated tests, TypeScript, lint, and the production build passed; browser interaction and million-feature GPU rendering still need testing.
Next steps: browser and mobile interaction testing, streaming imports, binary geometry, spatial tiling, and deeper topology validation. The examples are not surveyed HD maps and must not be used for navigation.
Built with
- React
- TypeScript
- deck.gl
- MapLibre
- Web Workers
- IndexedDB