Search code examples
javascriptleafletediting

Leaflet.Editable: Prevent drawing when clicked on map control


I am using Leaflet.Editable for drawing polygon, which is automatically activated after a map is loaded. New vertex is drawn when I click on the home button (added via Leaflet.EasyButton) or any other added controls except the default zoom control. So how to prevent drawing when leaflet control clicked?

map = new L.Map('mapa', {
        maxBounds: extent,
        minZoom: 12,
        touchZoom: true,
        tap: false,
        editable:true,
        attributionControl:true,
        zoomControl: true
        });

L.easyButton('fa-home',function(btn,map){
      map.setView(initialCenter,initialZoom);
    },'Domů').addTo(map);

var overviewMap = L.control({position: 'bottomleft'});
    var divOverviewMap;
    overviewMap.onAdd = function (map) {
        divOverviewMap = L.DomUtil.create('div', 'prehledka');
        return divOverviewMap;
    };

    overviewMap.addTo(map);
var prehledkaButton=L.control({position: 'bottomleft'});
    prehledkaButton.onAdd = function (prehledkaMap) {
        divOverviewMapButton = L.DomUtil.create('div', 'prehledkaButton');
        divOverviewMapButton.innerHTML='<img src="toggle.png" class="toggleButton">';
        $(divOverviewMapButton).attr('title','Skrýt přehledku...');
        return divOverviewMapButton;
    };
    prehledkaButton.addTo(prehledkaMap);

newFeature_polygon=map.editTools.startPolygon();

Solution

  • I've probably figured it out. It worked when I added

    $('.leaflet-control-container').on("mousedown", L.DomEvent.stopPropagation);