Event handling of plugins

[ghost]

How would a plugin e.g. mapbox-gl-draw be integrated into react-map-gl? I tried using the mapControls attribute in InteractiveMap but I got an error that simply meant it did not match the interface mapControls was expecting.

I'm also not sure how the construction of the Popup and Marker controls work. How do they manage to keep track of the map coordinates?

[ghost]

I've managed to add mapbox-gl-draw by using the InteractiveMap ref during componentDidMount, used getMap() and added with map.addControl(draw), but there's this problem with (I guess) event handling of the plugin.

For reference, here is how the demo page at https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/ does it:

In my app, here's how it turned out:

Both GIF's few seconds involve me clicking in and outside of the polygon feature: there is flickering because MapboxDraw uses two sources for the added features, one -hot and one -cold. But in react-map-gl the flickering was more pronounced, and MapboxDraw event handling wasn't done properly: note the changing pointers and draggable polygon in the first, while in the second GIF, as soon as the polygon is clicked, there is a significant slowdown (compared to no MapboxDraw added to map) and the polygon isn't draggable.

I've taken a look at the event object that was being returned in an onClick handler for InteractiveMap, and there's virtually no difference from a click done inside and outside the polygon feature, which means this cannot be handled easily by a custom map control.

Is there a way to include the MapboxDraw data into the mapControls's event handler parameter? Or is there a way to return to the default event handling by Mapbox GL JS?

[Pessimistress]

@ralphstodomingo Marker and Popup components are rendered as children of the InteractiveMap, and access the viewport via this.context.viewport. This is part of the work migrating mapbox-gl's controls system to the React paradigm.

Unfortunately we have to disable the native event handling of mapbox-gl, because the native interaction events are only fired after the map updates and therefore break the synchronization between the map and its overlays.

@abmai This topic has come up multiple times and we have written components like this for internal projects. Maybe we should add an example to share that code?

[ghost]

@Pessimistress Is it right to assume that the way to move forward with this particular plugin would be to write a child component? Without using map.addControl(drawPlugin) mentioned above (since it results in the behavior above)?

[Pessimistress]

Just speculating - you may be able to hack map.addControl to work by setting dragPan and dragRotate to false. But our own implementation extends SVGOverlay and does not use the mapbox-gl-draw plugin at all.

[ghost]

@Pessimistress Can you give me pointers on how to achieve a similar implementation? I've been hacking at it from the deck.gl side but has been having problems.
Also, is it an implementation that can work alongside the use of deck.gl?

[kriscarle]

I've made an attempt at it here: https://github.com/maphubs/mapbox-gl-draw

Had to hack mapbox-gl-draw to wire it to the react-map-gl eventManager, convert the wrapped events to match what is used internally in mapbox-gl-js, disable dragPan when needed, and update the cursors.

It is also needed to overlay the controls outside of the InteractiveMap component, otherwise they cause selected features to unselect, related to #304 This unfortunately is still an issue with the react-map-gl navigation control, zooming the map fires a click clearing the selection.

[akiori]

also hope to use mapbox-gl-draw, or other similar implementation in react-map-gl/deck.gl. but find it really difficult.
Hi @kriscarle , I can't run your example code correctly. can you show me a detailed code copy?

[dekkofilms]

I would also love to know, @Pessimistress, how y'all handle this internally if possible? Or what other people have come up with in solving this feature.

[kriscarle]

@akiori I didn't end up using that mapbox-gl-draw fork, decided to keep my own React wrappers around mapbox-gl because I didn't really need the deck.gl overlays.

I do remember getting my measurement tools to work using that fork, the best I can do is point you to this commit in the branch where I was testing it, maybe it will show a bit more of how I wired it up. maphubs/maphubs@94f50a0

I'm getting the react-map-gl instance via a ref, and passing it down into my measurement tool component and then to the mapbox-gl-draw instance (from my fork) so it can rewire itself to react-map-gl's event manager... bit of a hack.

[Pessimistress]

Closing for inactivity. The latest recommendation is to use react-map-gl-draw: http://visgl.github.io/react-map-gl/examples/draw-polygon