How to make a react-mapbox-gl marker component draggable?

Question

I m using https://github.com/alex3165/react-mapbox-gl

My question is how to make a marker component draggable?

 <Map
    id='map'
    style="mapbox://styles/mapbox/streets-v11"
    center={[locationInputs.lon, locationInputs.lat]}
    containerStyle={{ height: '500px', width: '100%' }}>
       <Marker
          coordinates={[locationInputs.lon, locationInputs.lat ]}
          anchor="center">
          <div class="marker"></div>
       </Marker>
 </Map>

Have I missed something? Thanks

Answer 1

React Map GL have a similar example in their docs:

https://visgl.github.io/react-map-gl/examples/draggable-markers

On that page you'll find a link to "View Code", and in App.js you'll see the logic.

React-Mapbox-GL works in a similar way, and have the same properties you can pass functions to: onDragStart, onDrag, onDragEnd.

You'll need to set up your marker in a similar way to them:

  const onMarkerDragStart = useCallback(event => {
    logEvents(_events => ({..._events, onDragStart: event.lngLat}));
  }, []);

  const onMarkerDrag = useCallback(event => {
    logEvents(_events => ({..._events, onDrag: event.lngLat}));
  }, []);

  const onMarkerDragEnd = useCallback(event => {
    logEvents(_events => ({..._events, onDragEnd: event.lngLat}));
    setMarker({
      longitude: event.lngLat[0],
      latitude: event.lngLat[1]
    });
  }, []);

<Marker
  longitude={marker.longitude}
  latitude={marker.latitude}
  offsetTop={-20}
  offsetLeft={-10}
  draggable
  onDragStart={onMarkerDragStart}
  onDrag={onMarkerDrag}
  onDragEnd={onMarkerDragEnd}
>