Remove control in Leaflet
11,386
figured it out on my own eventually:
function createControl() {
customControl = L.control({position: 'topleft'});
customControl.onAdd = function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom toggleContainer');
return container;
}
customControl.addTo(map)
}
var menuControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom menuControl');
container.onclick = function() {
if (menuControlActive === true) {
this.style.backgroundImage = 'url(./assets/close.jpg)'
createControl()
menuControlActive = false
} else {
this.style.backgroundImage = 'url(./assets/open.jpg)'
map.removeControl(customControl);
menuControlActive = true
}
}
return container;
}
});
Author by
joe-gz
Updated on June 28, 2022Comments
-
joe-gz almost 2 years
I have a control on a Leaflet map that creates another control on click. When on the second click, the second control should be removed. I'm using
map.removeControl(customControl)
, but I get an errorUncaught TypeError: t.remove is not a function
Any thoughts on what I'm missing here?
var customControl = L.Control.extend({ options: { position: 'topleft' }, onAdd: function (map) { var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom toggleContainer'); return container; } }); var menuControl = L.Control.extend({ options: { position: 'topleft' }, onAdd: function (map) { var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom menuControl'); container.onclick = function() { if (menuControlActive === true) { this.style.backgroundImage = 'url(./assets/close.jpg)' map.addControl(new customControl()); menuControlActive = false } else { this.style.backgroundImage = 'url(./assets/open.jpg)' map.removeControl(customControl); menuControlActive = true } } return container; } });