A real map library
Budget: 1 week.
Why this matters
MapPanel.jsx uses Leaflet. Leaflet is fine for a few markers and
polylines, but it struggles once you have thousands of stops or want custom
styling beyond DOM elements. MapLibre GL JS renders vector tiles on the
GPU, handles large GeoJSON sources cleanly, and gives you data-driven
styling. For a route planning tool, this is the piece that most affects
whether the product feels real or feels like a demo.
What to learn
| Topic | Time |
|---|---|
| The MapLibre concept stack: style, sources, layers | 1 day |
GeoJSON sources and circle, line, symbol layers | 1 day |
| Data-driven styling with expressions (color by vehicle, width by load) | 1 day |
| Clustering for dense point sets | 0.5 day |
| Fit-to-bounds and camera transitions for scenario switching | 0.5 day |
react-map-gl as a thin React wrapper (optional but helpful) | 0.5 day |
Rewrite MapPanel.jsx on top of MapLibre with GeoJSON sources | 2-3 days |
deck.gl overlay basics (only if you actually need heavy viz) | defer |
Resources
- MapLibre GL JS docs: concepts, style spec, API reference.
- MapLibre style spec: the reference you will keep open while styling layers.
- MapLibre examples: copy-paste starting points for clustering, expressions, feature-state.
- react-map-gl: thin React wrapper, optional but helpful.
- deck.gl: GPU-accelerated overlays, for later.
- OpenFreeMap: free basemap tiles if you need to stay zero-cost.
Exercise
Rewrite frontend/src/components/MapPanel.jsx on top of MapLibre GL JS.
Represent tasks and depots as GeoJSON sources rather than per-marker React
components. Draw selected routes as a line layer driven by a
feature-state so highlighting a route does not rerender the whole map.
Wire the existing polyline decoding in server.py into the GeoJSON
features returned by the API.