mapbox gl js disable controls - mapbox-gl-js

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

Answer 1

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');
};
})

Answer 2

Currently in 2020 you should use
mapboxDraw = new MapboxDraw({....
map.addControl(mapboxDraw);
map.removeControl(mapboxDraw);

Answer 3

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()

Answer 4

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.