1

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?

1

First you can put class definition and create function definition out of show/hide logic:

L.Control.Watermark = L.Control.extend({
    onAdd: function(map) {
        var img = L.DomUtil.create('img');

        img.src = 'baseball-marker.png';
        img.style.width = '50px';

        return img;
    },

    onRemove: function(map) {
    }
});
L.control.watermark = function(opts) {
    return new L.Control.Watermark(opts);
};

Then define global var for your control:

var myControl;

And then your display/hide function looks like:

displayPicture(active){
    if (active) {
        myControl = L.control.watermark({ position: 'topright' }).addTo(map);
    } else {
        map.removeControl(myControl);
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.