mapbox gl js disable controls

Question

Is there a way to hide/remove or disable controls such as the controls from mapbox-gl-draw?

I add the draw control as follows

    draw = mapboxgl.Draw({
    drawing: true,
    displayControlsDefault: false,
    controls: {
        polygon: true,
        trash: true
    }
});

map.addControl(draw);

Once a polygon is drawn I want to disable or hide the control, hence is no longer possible to draw another polygon.

Thanks a lot!

Gregor

score 7 · Answer 1 · answered Sep 12 '19 at 18:21

You can actually disable the draw buttons (individually or as a group) with a little DOM interaction. In short, you can find the native CSS class for the draw menu ('mapbox-gl-draw_polygon', 'mapbox-gl-draw_point', etc.), add the disabled property, and add a CSS class with 'disabled'/grayed out styling. Example here: https://jsfiddle.net/emLs72zj/9/

// HTML

<div id="map">

</div>
<button id="disable-draw">
Disable Draw Btns
</button>

<button id="enable-draw">
Enable Draw Btns
</button>


// CSS

body { margin:0; padding:0; overflow:hidden;}
#map { position:absolute; top:20px; bottom:0; width:100%; }

.disabled-button {
  -webkit-filter: opacity(.3) drop-shadow(0 0 0 #FFF);
  filter: opacity(.3) drop-shadow(0 0 0 #FFF);
  cursor: default !important;
}


// JS

mapboxgl.accessToken = 'pk.eyJ1IjoieXVuamllIiwiYSI6ImNpZnd0ZjZkczNjNHd0Mm0xcGRoc21nY28ifQ.8lFXo9aC9PfoKQF9ywWW-g';
var sfmapbox = [-122.413692, 37.775712];

// Create a new dark theme map
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
  center: sfmapbox, // starting position
  zoom: 12, // starting zoom
  minZoom: 11,
});

map.on('load', function(){
        // create control
    var draw = mapboxgl.Draw({
        drawing: true,
        displayControlsDefault: false,
        controls: {
            polygon: true,
            trash: true
        }
    });
    // add control to map
    map.addControl(draw);

    var disableBtn = document.getElementById('disable-draw');
    var enableBtn = document.getElementById('enable-draw');

    var drawPolygon = document.getElementsByClassName('mapbox-gl-draw_polygon');

    disableBtn.onclick = (e) => {
        drawPolygon[0].disabled = true;
  drawPolygon[0].classList.add('disabled-button');
};

enableBtn.onclick = (e) => {
    drawPolygon[0].disabled = false;
  drawPolygon[0].classList.remove('disabled-button');
};
})

score 6 · Answer 2 · answered Oct 28 '20 at 14:32

6

Currently in 2020 you should use

mapboxDraw = new MapboxDraw({.... map.addControl(mapboxDraw);
map.removeControl(mapboxDraw);

answered Oct 28 '20 at 14:32

djdance

3,110
27
33

1

It is important to consider that `map.removeControl(mapboxDraw);` will also remove any polygons you have drawn. So, for use-cases where you may potentially want to control things as if they were in a state machine, you may want to retain the drawn polygons but simply hide the draw controls. Therefore this answer may not suit everyone. – Andre Dec 06 '21 at 20:48

score 2 · Answer 3 · answered Nov 02 '16 at 15:46

The remove method for controls is not bound to the map object, but you can remove it by calling remove() on the control object. https://jsfiddle.net/9o9mknqh/

// create control
var draw = mapboxgl.Draw({
    drawing: true,
    displayControlsDefault: false,
    controls: {
        polygon: true,
        trash: true
    }
});
// add control to map
map.addControl(draw);

// remove control from map
draw.remove()

score 0 · Answer 4 · answered Apr 07 '22 at 05:38

You can always hide the control (if that's what you want) like this.

controls: {
        polygon: false, // true -> show, false -> hide
        trash: true
    }

You must handle how the control is updated after this control. As in react, if you create your own component for the MapboxDraw, you can simply change the params and let it re-render itself.

mapbox gl js disable controls

4 Answers4