React-mapbox-gl: How do i make Marker Draggable and get lat:lng of the dropped location

[suyesh]

[alex3165]

Hi @suyesh, here is how you would achieve it using Layer and Feature. There is no support of draggable html Marker yet.

[suyesh]

Thank You Alex.

[suyesh]

@alex3165 Hi Alex it worked great for me but how do i change the icon to the marker icon i want? I am converting a application from google maps to Mapbox for the building numbers.

[alex3165]

I wrote a medium article about Mapbox and React, right after the second code example I explain how to use a custom image for you Feature, cf: https://codeburst.io/build-rich-map-experiences-with-mapbox-and-react-fa13d2c814de.

[alex3165]

One of the downside of using Layer and Feature with custom image is that you need to group your features for each image icon so if you have many different icons it might be a bit of overhead, in other words, images are not a per Feature thing but per Layer

[krisaoe]

@alex3165 could you please repost the mentioned workaround using Layer and Feature?
Webpackbin has closed, sadly, and many handy-sounding links throughout these issues are dead as a result.

[Wykks]

@krisaoe This link works for now https://webpackbin-prod.firebaseapp.com/bins/-KuVrS0dZldhBUUqmwp9

[karantza]

I also needed a draggable marker, and was able to make one that worked with react-mapbox-gl fairly easily. I could probably make it into a PR for the regular Marker class, but in the mean time here's my implementation:

https://gist.github.com/karantza/0212c05eeac090d72a8f00e714f57788

[krisaoe]

Thanks for the updated link @Wykks

@karantza I like your implementation, it's similar to my previous failed attempts. Any idea what could be causing my "Type Error: this.marker.on is not a function" when this mounts though?

Edit: I'm not sure where I'm going wrong, but your solution works fine in Codesandbox.

[karantza]

@krisaoe Hmm, perhaps something is running in a weird order and initializing wrong, or you're using a different version maybe? I only tested against the latest mapbox-gl-js (0.46.0)

[paveltretyakovru]

Functional typescript modification: https://gist.github.com/paveltretyakovru/4534b632d9cf5b9d714837734870a04b
Thanks @karantza for link