Add a scale bar to the map

[YayinC]

I want to know if it's possible to add a scale bar to the map, since it can help us get a sense of the distance displayed on the map. I think a similar issue is #495 Expecting to see any update on this issue:)

[heshan0131]

@Pessimistress Does react-map-gl allow adding scale control via mapbox? https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol

[robert-claypool]

@heshan0131, it does not. This might work instead (not tested)...

import { ScaleControl } from 'mapbox-gl';

_getMapboxRef = (mapbox, index) => {
  if (!mapbox) {
    // The ref has been unset.
    // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
    // console.log(`Map ${index} has closed`);
  } else {
    // We expect an InteractiveMap created by KeplerGl's MapContainer.
    // https://uber.github.io/react-map-gl/#/Documentation/api-reference/interactive-map
    const map = mapbox.getMap();
    const scale = new ScaleControl({
        maxWidth: 80,
        unit: 'imperial'
    });
    map.addControl(scale);
  }
};

// In your render function ...
<KeplerGl getMapboxRef={this._getMapboxRef} />

[YayinC]

Hi does it mean that the scale bar is not on the product roadmap? And the only way to add it is to do as described above...