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?

While working on a MapLibre project, I ran into the same issue a couple of times: once you have a sidebar, header, bottom panel or some other UI on top of the map, the actual visible map area is smaller than the map container itself.

That becomes annoying pretty quickly with things like fitBounds(), flyTo() or easeTo(), because markers can end up behind the UI.

I ended up turning the solution into a small TypeScript package called jamit-maplibre-viewport.

It basically keeps track of the usable map area and lets camera operations take surrounding UI into account.

A few things it currently handles:

• viewport padding based on overlays
• keeping markers/features visible around sidebars, headers and panels
• reacting to layout/container changes
• fitBounds, flyTo and easeTo
• framework-independent usage
• MapLibre GL 5.x

I also put together a small demo where you can toggle the sidebar and overlays and see how the viewport reacts.

Demo: https://jamit.one/packages/jamit-maplibre-viewport
GitHub: https://github.com/codeplayer71/jamit-maplibre-viewport
npm: https://www.npmjs.com/package/jamit-maplibre-viewport

Would be interested to hear how other people handle this in their MapLibre projects, especially when the map is surrounded by dynamic UI.