Find out if a leaflet control has already been added to the map

Question

I wrote a custom Leaflet control. It's some kind of legend that may be added for each layer. The control itself has a close button to remove it from the map (like a popup). The control can be added by clicking a button. My problem is that the user may add the same control to the map several times. So what I need is to test if this specific control has already been added to the map and, if so, don't add it again.

I create a control for each layer, passing some options

var control = L.control.customControl(mylayer);

and add it to my map on button click

control.addTo(map);

Now imagine the control has a close button and may be closed. Now if the user clicks the button again, I only want to add the control if it's not already on the map - something like this (hasControl is pseudocode, there is afaik no such function)

if(!(map.hasControl(control))) {
    control.addTo(map);
}

For simplicity I made an example where I create a zoom control and add it twice here.

Answer 1

Easiest way is to check for the existence of the _map property on your control instance:

var customControl = new L.Control.Custom();

console.log(customControl._map); // undefined

map.addControl(customControl);

console.log(customControl._map); // returns map instance

But please keep in mind, when using the _map property, that the _ prefix of the property implies that it's a private property, which you are normally not supposed to use. It could be changed or removed in future versions of Leaflet. You're not going to encounter that if you use the follow approach:

Attaching a reference of your custom control to your L.Map instance:

L.Control.Custom = L.Control.extend({
    options: {
        position: 'bottomleft'
    },
    onAdd: function (map) {
        // Add reference to map
        map.customControl = this;
        return L.DomUtil.create('div', 'my-custom-control');
    },
    onRemove: function (map) {
        // Remove reference from map
        delete map.customControl;
    }
});

Now you can check for the reference on your map instance like so:

if (map.customControl) { ... }

Or create a method and include it in L.Map:

L.Map.include({
    hasCustomControl: function () {
        return (this.customControl) ? true : false;
    }
});

That would work like this:

var customControl = new L.Control.Custom();

map.addControl(customControl);

map.hasCustomControl(); // returns true

map.removeControl(customControl);

map.hasCustomControl(); // returns false

Here's a demo of the concept on Plunker: http://plnkr.co/edit/nH8pZzkB1TzuTk1rnrF0?p=preview