Delete last vertex drawn of polygon

[ritikamehta]

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??                 }

            });

[senolozgur]

We are trying to figure out same problem. We managed to delete last vertex by clicking "Delete last point drawn" link programatically(although that is not the most elegant solution, it works).

var deleteLastPointElement = $('ul li a:contains("Delete last point drawn")'); deleteLastPointElement[0].click();

We would be pleased to hear better solution alternatives.

[mikila85]

+1

[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 [email protected] 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 .

[mikila85]

I solved it in a more elegant way:

var drawPolyline = new L.Draw.Polyline(map, drawControl.options.polyline); drawPolyline.enable();

//On your button: drawPolyline.deleteLastVertex();

[cavasinf]

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