React-map-gl: Discussion: integration with mapbox-gl-draw

[macobo]

My workplace recently replaced google maps with react-map-gl. We've had great success - user engagement with the map has shot through roof thanks to new functionality made easy by this wonderful library.

However, the last large piece holding us back is editing and creating polygons on the map. Seems the most mature tool in the mapbox ecosystem for this is https://github.com/mapbox/mapbox-gl-draw, but we've had trouble integrating the library with react-map-gl.

In our app, we store the (dynamic) mapStyle in redux, and gl-draw makes the map application to become really unresponsive. The problem comes from that mapbox-gl-draw is managing internal layers, is trying to update map styles dynamically via the vanilla mapbox API. This obviously clashes with react-map-gl's approach, causing one library to add layers and sources and the other to remove in an eternal tug-of-war.

I wanted to ask for advice - how would you go about integrating the two libraries? I'm interested in spending some development time making it possible and share with others. Internally we've thought about proxying addSource, addLayer, getSource().setData methods and redirecting them to our redux store, but wondering if there's better methods to use here.

Linking a related discussion: #450

[ibgreen]

Seems the most mature tool in the mapbox ecosystem for this is mapbox/mapbox-gl-draw,

Small plug: We use nebula.gl for geospatial editing. Haven't compared it recently to mapbox-gl-draw, so can't really say how the two solutions compare. nebula.gl does bring in deck.gl so it is likely the bigger dependency.

mapbox-gl-draw is managing internal layers, is trying to update map styles dynamically via the vanilla mapbox API. This obviously clashes with react-map-gl's approach,

As I recall, react-map-gl doesn't do too much with the styles except some diffing and passing them on. Maybe we could just support setting style to null in which case we wouldn't touch/update styles in the react render cycle but instead let the user manage it with the "imperative" mapbox style APIs.

I'd personally prefer a lightweight "enabler" like that, rather than add too much complex logic to react-map-gl itself.

[xintongxia]

We did something similar in other project. Here is a short demo. Will this cover your use cases if this polygon editing layer overlay on the Map?

[macobo]

Thanks for the quick answers!

@ibgreen we'll take another look. nebula did look like overkill dependency-wise, but it looks like a stable solution

@xintongxia That looks pretty much exactly what we're looking for. Would you mind sharing the code backing this? :)

[xintongxia]

Discussed with @Pessimistress, we could add a polygon editing overlay in react-map-gl. But it is probably going to take a while (maybe 2 - 3 weeks) to get it done.

[rob137]

FWIW I am experiencing the same issues. mapbox-gl-draw would be great for our use-case, but it slows down react-map-gl too much. mapbox-gl-draw also seems to behave strangely with click events - in some instances clicking controls/shapes also selects the map itself. (E.g. attempting to resize a polygon will cause the map to pan, double clicking controls will cause the map to zoom in.)

[goldpbear]

We've found ourselves in the same position as @macobo -- react-map-gl has significantly streamlined our mapping application, but we need to clear the drawing hurdle. nebula.gl is intriguing but we'd prefer not to add deck.gl just for drawing support.

For us, @xintongxia's demo above is also exactly the kind of functionality we're looking for. Maybe I missed it, but is the source code for that demo available somewhere? Or maybe it's easier to wait for an editing overlay to be added?

Thanks!

[rob137]

@goldpbear +1. Would also love to be able to add/delete lines & notes to maps.

[HamidAghdaee]

+1

[rob137]

It appears that react-mapbox-gl / react-mapbox-gl-draw work together ok (example), so we are exploring that for the time being. But we'd rather use react-map-gl if possible.

[Pessimistress]

@macobo @goldpbear Please help review and provide feedback for https://github.com/uber/react-map-gl/issues/734

[macobo]

@xintongxia I see some stuff has been happening on the background, any updates?

[xintongxia]

@macobo

react-map-gl-draw library is still under development, the API is gong to change in
the official release which will probably happen in next month.

But if you would like to give a try, here is the example code.

It currently support drawing points, lines, and polygons.

[xintongxia]

@macobo

I have released a react-map-gl-draw library, here is an example using it with react-map-gl.

Example code draw-polygon

Also here is the sandbox example

[daniela-green]

hey @xintongxia :)
Can you please give an example of how to catch events of finish dragging feature?
when i drag a polygon, i only see that "movePosition" events is being fired, and dont see "finishMovePosition" Event.
Thanks