CODEWITHSUNDEEP
leaflet
kdb
kdb

Reputation: 2180

Leaflet Draw: differentiating between multiple controls

I'm adding two instances of Leaflet Draw (https://github.com/Leaflet/Leaflet.draw) like this (only using lines):

var drawControl = new L.Control.Draw({
    draw: {
        polygon: false,
        rectangle: false,
        circle: false,
        marker: false
    }
});
map.addControl(drawControl);

var drawControl2 = new L.Control.Draw({
    draw: {
        polygon: false,
        rectangle: false,
        circle: false,
        marker: false
    }
});
map.addControl(drawControl2);

Now I want to listen to the draw:drawvertex event and do different things depending on if I had activated the drawControl or drawControl2:

map.on('draw:drawvertex', function (e) {
    console.log("Vertex drawn", e);
});

How can I differentiate which drawControl is currently active?

Upvotes: 4

Views: 1087

Answers (1)

Julien V
Julien V

Reputation: 895

Here is a dirty way to know which drawControl is active.

The trick is to put them in different map corners. It helps to check which ul.leaflet-draw-actions is visible when the user draws. The one in div.leaflet-top or the one in div.leaflet-bottom for example :

var drawControl = new L.Control.Draw({
    position: 'topleft',
    draw: {
        polygon: false,
        rectangle: false,
        circle: false,
        marker: false
    }
});
map.addControl(drawControl);

var drawControl2 = new L.Control.Draw({
    position: 'bottomleft',
    draw: {
        polygon: false,
        rectangle: false,
        circle: false,
        marker: false
    }
});
map.addControl(drawControl2);

map.on('draw:drawvertex', function (e) {
    console.log("Vertex drawn", e);
    if ($('div.leaflet-top ul.leaflet-draw-actions').is(':visible')){
        console.log('it was drawn with drawControl');
    }
    else {
        console.log('it was drawn with drawControl2 !');
    }
});

It's dirty but it works.

Upvotes: 1

Related Questions