1

There is a polygon come from api and I need to update coordinates with edit layer by angular-draw leaflet. Here is the html,

<div  
    style="height: 100vh;"
    leaflet
    leafletDraw 
    [leafletOptions]="options"
    [leafletDrawOptions]="drawOptions"
    (leafletDrawCreated)="onDrawCreated($event)">
    <div [leafletLayer]="drawnItems"></div>
</div>

And the drawOption

 drawOptions :any = {
        position: "topright",
        draw: {
            marker: {
                icon: icon({
                    iconSize: [25, 41],
                    iconAnchor: [13, 41],
          iconUrl: 'assets/leaflet/marker-icon.png',
                    iconRetinaUrl: 'assets/leaflet/marker-icon-2x.png',
                    shadowUrl: 'assets/leaflet/marker-shadow.png'
                })
            },
      polygon : true,
        },
    edit: {
            featureGroup: this.drawnItems
        }

  
    };

In this function, coordinate bring the coordinates from api and I can see the polygon on map Also, there is a edit button come from option. However, while clicking the edit button for change polygon I have seen the changing coordinates on console but cannot pick the updated coordinates to send the db back.

This one is the polygon has been show up. The coordinates come from api in the select.

 var polygonJson =L.polygon (select,{
      
         fillColor: result.color, // result is data from db
         fillOpacity: 0.5,  
         color: result.color, 
         fill: true,
      
       
      })
 

//And here trying to get update

  var updatePolygon=this.drawnItems.addLayer(polygonJson).on('draw:editvertex', function(event) 
         {
            var poly = event.layer;
          if (poly.options.polygon) {
        var coords = poly.getLatLngs();
             poly.options.polygon.setLatLngs(coords);
            }
          })
        
       
        
          var coord = updatePolygon // here I am trying to get update coordinates
          console.log(coord)
4
  • 1
    You have to add polygon feature to drawnItems layer to be able to edit it.
    – TomazicM
    Oct 6 at 13:00
  • this.drawnItems.addLayer(updatePolygonJson).on('draw:editvertex', function(event){ var poly = event.poly; if (poly.options.polygon) { var coords = poly.getLatLngs(); poly.options.polygon.setLatLngs(coords); } }) var coord = updatePolygonJson.getLatLngs()[0] console.log(coord) this one not work either
    – Nil
    Oct 6 at 13:14
  • First define your updatePolygonJson layer without .on event processing, then add layer to drawnItems, again without event event processing, just: this.drawnItems.addLayer(updatePolygonJson);.
    – TomazicM
    Oct 6 at 14:06
  • I am trying to update polyJson to the updatePolygon. And the var coord has to have update coordinates to send the db back. Thank you so much for you effort!
    – Nil
    Oct 6 at 14:33

1 Answer 1

0

You can get edited polygon with hooking on map 'draw:edited' event, where you get edited layers.

Event processing function to get GeoJSON object for edited polygon could look something like this:

map.on('draw:edited', function (event) {
  event.layers.eachLayer(function(layer) {
    var geoJSON = layer.toGeoJSON();
    console.log(geoJSON);
  });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.