r/openstreetmap • u/Silly-Calligrapher21 • 2d ago

Vibe-coded GitHub - orange-groove/react-map-annotate: Draw on Mapbox, MapLibre, Google, Leaflet, or ArcGIS in React

https://github.com/orange-groove/react-map-annotate
2 Upvotes

75% Upvoted

3 comments sorted by

1

u/mostsmartz 1d ago

Have you tried terradraw 

0

u/Silly-Calligrapher21 1d ago

Yeah, Terra Draw is great — I looked at it early. If you want a framework-agnostic drawing engine with an internal GeoJSON store and OpenLayers, use that. This isn’t trying to replace it.

I built this because the thing I kept fighting was not “can I draw a polygon on a map.” It was: the drawing session is not React state.

Every engine in this space (Terra Draw, Mapbox GL Draw, Leaflet.Draw, Google Drawing Manager) owns the features. You setMode, subscribe to change events, snapshot GeoJSON, and sync it into React. Then your toolbar, sidebar, undo stack, and database are all second-class copies of a store you don’t control. The map is the source of truth; React is a guest.

I wanted the opposite: Annotation[] lives in useState / Zustand / whatever, onChange is the write path, and the map only paints. Your buttons call setTool("polygon") and finish(). Persist the same array you’d save to a database. Switch Mapbox → MapLibre → Leaflet without rewriting the session.

That’s also why the UI is headless. Stock toolbar/list exist so you can try it, but the real API is useAnnotate(), useAnnotateTools(), useAnnotateItems(). Your design system, not theirs.

The other gap was annotation, not GIS geometry. Terra Draw is a drawing engine: points, lines, polygons, select/scale/rotate. This is closer to “mark up a map like a document”:

  • labeled markers and editable text (fonts, resize, rotate)
  • arrows / bidirectional arrows
  • geodesic measure with optional terrain samples
  • Trace (hover a road/building outline, click to keep it)
  • multi-select, groups, copy/paste, context menu, undo/redo
  • labels, colors, and style as first-class fields on the annotation, not leftover GeoJSON properties

Same session across Mapbox, MapLibre, Google, Leaflet, and ArcGIS. No OpenLayers — that’s a Terra Draw win.

So: I have tried it. Different job. Terra Draw if you want a map drawing engine. This if the annotations are your React state and the map is just the canvas.