React-native-mapbox-gl: Is it possible to drag markers on map?

[alexey-kuznetsov]

I suppose, that it is very important to have ability of dragging of markers. If there is a feature to place markers, there must be feature to edit them. But I can't find any info about this feature in react-native-mapbox-gl

[nitaliano]

This is part of the backlog for version 6 and is on the roadmap to be supported

[Jose4gg]

@nitaliano Any progress with this?

[ulisesorozco]

When can we expect this functionality?

[tayyabshabab]

@nitaliano Is there any update with this feature? I can't find out the drag feature even in Maps SDK for android documentation.

[Madhavan-reactiveworks]

@tayyabshabab Do you have any workaround for this?

[krishandeo]

@Madhavan-reactiveworks Have you got any solution for this?

[bbalan]

I am also interested in this feature. @nitaliano is there another issue we can follow?

[kristfal]

We’ve had this in production for a few months. Here is our approach:

On iOS, dragable markers can be achieved by using a panResponder on top of the MapView and read panRespinder data to update a shape source. Our interaction pattern is Long Press -> drag on interactive marker.

You will also need to disable/enable scrolling on the map when the user hits a marker that is dragable.

On Android, you will not be able to pass touch events via the MapView to a panResponder (due to the way Android handles touches).

You can still implement dragable points, but the interaction model needs to be a bit different.

In this case, you’ll need to listen to presses on the interactive shape source, then add an invisible view on top of the map with panResponder. From there, you can listen to drag events on the invisible view and update the underlying map data. Once the drag gesture is complete, you remove the invisible view to let the user resume interaction with the map. This approach is a bit more clunky than iOS, but it’s the best possible right now.

FYI: You will need to do a bit of transforms between screen coordinates and geographic coordinates along with a bit of state management. It can be a bit hard, but it is def. doable.

[awdhootlele]

@nitaliano Any update on this one?
I am really interested in this feature. Also, if the feature is preset in native sdks but the bridging is not there, can anyone point me to any documentation on how to achieve that?

[NathanNovak]

We’ve had this in production for a few months. Here is our approach:

On iOS, dragable markers can be achieved by using a panResponder on top of the MapView and read panRespinder data to update a shape source. Our interaction pattern is Long Press -> drag on interactive marker.

You will also need to disable/enable scrolling on the map when the user hits a marker that is dragable.

On Android, you will not be able to pass touch events via the MapView to a panResponder (due to the way Android handles touches).

You can still implement dragable points, but the interaction model needs to be a bit different.

In this case, you’ll need to listen to presses on the interactive shape source, then add an invisible view on top of the map with panResponder. From there, you can listen to drag events on the invisible view and update the underlying map data. Once the drag gesture is complete, you remove the invisible view to let the user resume interaction with the map. This approach is a bit more clunky than iOS, but it’s the best possible right now.

FYI: You will need to do a bit of transforms between screen coordinates and geographic coordinates along with a bit of state management. It can be a bit hard, but it is def. doable.

@kristfal do you have an example?