react-map-gl addControl equivalent?

[gpbmike]

If I want to use mapboxgl.ScaleControl and MapboxDraw is that something I can do with react-map-gl or do I need to build something from scratch?

Generally speaking, is there a pattern to replace map.addControl?

[howtimeflies0]

@gpbmike We've added a few control components to react-map-gl and also a control example. #225, #226, #227, #228
Please take a look and check if they are what you are looking for. If not, you are very welcome to open a PR.

[gpbmike]

Thanks for the update @shaojingli. I ended up making my own. Cheers.

[ralphstodomingo]

@gpbmike How were you able to resolve this? Did you make your own MapboxDraw wrapper? Been looking for a way to integrate mapbox-gl-draw as well.

[gpbmike]

@ralphstodomingo I have since moved to react-mapbox-gl and don't remember how I ended up implementing the draw component with this library to be honest. 🤔

[Warkst]

@gpbmike @ralphstodomingo I've figured out how to add regular mapbox controls to react-map-gl. It was surprisingly easy once I had all the puzzle pieces.

Make sure you have mapbox-gl installed and that it is imported. If you want to add a ScaleControl for example:

npm install --save mapbox-gl
...
import {ScaleControl} from 'mapbox-gl';

To add the control, first create a ref to the ReactMapGL instance by adding the following to its definition:

<ReactMapGL ref={ map => this.mapRef = map } ... />

Then, e.g. in componentDidMount(), call let mapboxobj =this.mapRef.getMap(); to access the underlying mapbox element. You can treat this object like a regular mapbox instance:

mapboxobj.addControl(new ScaleControl(), 'bottom-right') //this works!

This lets you add regular mapbox controls to the react map.

[timendez]

@Warkst were you able to add an external control such as MapboxDraw? I can get the buttons to show up but they don't do anything :(

import MapboxDraw from '@mapbox/mapbox-gl-draw'
...
  componentDidMount() {
    this.mapInstance = this.mapRef.getMap()
    const draw = new MapboxDraw({
      displayControlsDefault: false,
      controls: {
        polygon: true,
        trash: true,
      },
    })
    this.mapInstance.addControl(draw)
  }

[Warkst]

@timendez See this thread for a full discussion on this topic. Things may have gotten better since, but when I needed it, there was no real support. First solutions that spring to mind:

• writing your own control
• manipulating the event capturing on any layers that are shown such that your clicks actually reach the control

I ended up writing my own control, as it seemed to be least effort. But I didn't write it as an official, actual plugin - I hacked together a minimal effort javascript solution with only the features I needed.

[Aid19801]

i went with react-mapbox-gl instead. I appreciate Uber's efforts on this but the draw / polygon stuff isn't quite there yet.