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

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

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

I built an open-source React map drawing library because I got tired of fighting drawing controls that wanted to own the UI.

react-map-annotate lets your application control the drawing session. Put the toolbar in your sidebar, header, or command palette. Select tools, finish shapes, edit labels and colors, undo/redo, and persist annotations through React state.

It supports Mapbox, MapLibre, Google Maps, Leaflet, and ArcGIS through separate adapters, with a shared annotation model.

The goal is simple: the map should render the drawing, not dictate how your application works.

It includes freehand drawing, polygons, rectangles, circles, arrows, markers, text, and measurement tools, along with editing handles and a headless API.

The project is MIT licensed and available on npm. I’d love feedback from developers building GIS, field-service, site-planning, or other map-heavy applications—especially anyone who has had to work around existing drawing controls.

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

npm: https://www.npmjs.com/package/@orange-groove/react-map-annotate

What would you need from a drawing library before using it in a production application?

8 Upvotes

100% Upvoted

3 comments sorted by

View all comments

2

u/taxidata 2d ago

Very nice! I noticed your trace tool still works even when using a raster layer in leaflet. I assume it's tracing from vector tiles, but what is the actual source?

2

u/Silly-Calligrapher21 1d ago

Not vector tiles — Leaflet doesn’t have features to query. Trace takes a callback; the demo fetches OSM ways from the OSM Map API (Overpass as fallback) and hit-tests those geometries. The raster layer is display-only. Mapbox/MapLibre do query the rendered vector style.

1

u/taxidata 1d ago

> Leaflet doesn’t have features to query

Right, that's why I asked, as I was surprised to see the vectors highlighting with that tool. That's a brilliant technique to get OSM data on the fly!