I tried to add a picture to the map by using a button. This works well by using L.control.watermark. But I want to remove the picture at the next button click and I can´t find a working solution. Here is what I tried so far:
pictureActive = false;
showPicture() {
if (!this.pictureActive) {
this.displayPicture(true);
this.pictureActive = true;
this.pictureStyle.backgroundColor = "#002896"; //buttonStyle
}
else {
this.displayPicture(false);
this.pictureActive = false;
this.pictureStyle.backgroundColor = "#999999";
}
},
displayPicture(active){
console.log('displayPicture');
if (active) {
L.Control.Watermark = L.Control.extend({
onAdd: function(map) {
var img = L.DomUtil.create('img');
img.src = 'BUGAlog.png';
img.style.width = '200px';
return img;
},
onRemove: function(map) {
}
});
L.control.watermark = function(opts) {
return new L.Control.Watermark(opts);
};
L.control.watermark({ position: 'topright' }).addTo(this.map);
} else {
this.map.removeControl(L.control.watermark);
}
},
or:
else {
L.control.watermark.removeFrom(self.map);;
}
But the picture stays...
Can anybody help me?