Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it possible to drag markers on map? #598

Closed
alexey-kuznetsov opened this issue Aug 4, 2017 · 10 comments
Closed

Is it possible to drag markers on map? #598

alexey-kuznetsov opened this issue Aug 4, 2017 · 10 comments

Comments

@alexey-kuznetsov
Copy link

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
Copy link
Owner

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

@Jose4gg
Copy link

Jose4gg commented Nov 16, 2017

@nitaliano Any progress with this?

@ulisesorozco
Copy link

When can we expect this functionality?

@tayyabshabab
Copy link

@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
Copy link

@tayyabshabab Do you have any workaround for this?

@krishandeo
Copy link

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

@bbalan
Copy link

bbalan commented Jan 4, 2019

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

@kristfal
Copy link
Collaborator

kristfal commented Jan 4, 2019

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
Copy link

@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
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests