Draggable Marker Example

DraggableMarker.js

import React from "react";
import PropTypes from "prop-types";

import * as MapboxGl from "mapbox-gl";

export default class DraggableMarker extends React.Component {
  marker = null;

  componentDidMount() {    
    const { map } = this.context;

    this.marker = new MapboxGl.Marker({
      draggable: this.props.draggable,
      element: this.refs.wrapper
    })
      .setLngLat([this.props.coordinate.lon, this.props.coordinate.lat])
      .addTo(map);

    this.marker.on('drag', () => {
      const lngLat = this.marker.getLngLat();
      this.props.onDrag && this.props.onDrag(lngLat);
    });
  }

  componentWillUnmount() {
    this.marker.remove();
    this.marker = null;
  }

  componentDidUpdate() {
    this.marker.setDraggable(this.props.draggable);
  }

  render() {
    return <div ref="wrapper">{this.props.children}</div>
  }
}

DraggableMarker.contextTypes = {
  map: PropTypes.object
};

Example Usage

 <ReactMapboxGl>
  <DraggableMarker 
    draggable
    coordinate={{lat: 0, lon: 0}}
    onDrag={console.log}
  >
    <div>I'm a draggable marker!</div>
  </DraggableMarker>
</ReactMapboxGl>

Yes it does. I forgot to update as I also needed to useState rather than useRef as the ref isn’t set. I’ll update.