Delete last vertex drawn of polygon

I am creating a polygon using leaflet.draw plugin in mapbox. My requirement is to restrict the user to draw outside a particular boundary and in case user clicks outside that boundary ,last drawn vertex should get deleted and line drawn to that vertex should also get removed. I am writing following code to achieve this.

mapData=document.getElementById('mapTest');

        L.mapbox.accessToken = 'pk.eyJ1Ijoicml0aWthIiwiYSI6IlpnRThghmhbifQ.i9VWs0WDpjyxMn1YFzKOow';
        var map = L.mapbox.map(mapData, 'abc.j565ghh0o')
            .setView( [38.893596444352134, -77.0381498336792], 12);
        featureGroup = L.featureGroup().addTo(map);

drawControl = new L.Control.Draw({
      edit: {
        featureGroup: featureGroup
      },
      draw: {
        polygon: true,
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false
      }
    }).addTo(map);

        map.on('draw:created', showPolygonArea);
        map.on('draw:edited', showPolygonAreaEdited);           

        function showPolygonAreaEdited(e) {
          e.layers.eachLayer(function(layer) {
            showPolygonArea({ layer: layer });
          });

        }

        function showPolygonArea(e) {
          featureGroup.clearLayers();
          featureGroup.addLayer(e.layer);

          var layer = e.layer;



              latLngs = layer.getLatLngs();

              mapZoom=map.getZoom();

        }


 map.on('click', function(e) {

                var currentLoc=e.latlng;
                if(polygonParent!="")
                    {
                    var a=polygonParent.getBounds();
                     containsCurrentLocation=a.contains(currentLoc);
                    }


                if(containsCurrentLocation==false)
                    {
                    alert("Select point within the boundary.");
                    // how to remove last vertex here??                 }

            });

[germanjoey]

Wait until the next version, it will be easier then. You’ll be able to do something like this:

var drawHandler = null;
map.on(L.Draw.Event.DRAWVERTEX, function(e) {
    drawHandler = e.drawHandler;
});

function deleteLastDrawnVertex () {
    if (drawHandler && drawHandler.enabled()) {
        drawHandler.deleteLastVertex();
    }
    else {
        throw new Error('There is no vertex to delete!');
    }
}

Note that the call to deleteLastVertex will trigger an L.Draw.Event.DRAWVERTEX event.

For edit mode, it’s a little tricker. It sounds like you’ve found the marker you want to delete; in that case, you can do this:

var editHandlerIndex = {};
map.on(L.Draw.Event.EDITHOOK, function(e) {
    if (e.vertex) {
        editHandlerIndex[e.layer._leaflet_id] = e.editHandler;
    }
});
map.on(L.Draw.Event.EDITVERTEX, function(e) {
    editHandlerIndex[e.poly._leaflet_id] = e.editHandler;
});

function deleteVertex(marker) {
    if ((!marker) && (!marker.enabled()) {
        throw new Error("Can't delete a phantom vertex!);
    }

    map.once(L.Draw.Event.EDITVERTEX, function (e) {
        var editHandler = editHandlerIndex[e.poly._leaflet_id];
        editHandler.updateMarkers();
        e.poly.fire('edit');
    });
    marker.fire('click');
}

The tricky parts are making sure you have the right edit handler, and then updating the markers once the marker click has finished firing. And again, this is only once the new version is released.

On Thu, Dec 15, 2016 at 6:13 AM, mikila85 [e-mail] wrote:

+1

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Leaflet/Leaflet.draw/issues/321#issuecomment-267336760, or mute the thread https://github.com/notifications/unsubscribe-auth/AAzNEtTwxe0vntYCbEGEFAR3_si3Ru6yks5rIUrygaJpZM4CgK-i .

[cavasinf]

@germanjoey There’s no e.drawHandler from the event L.Draw.Event.DRAWVERTEX. Where did you find this ?