Making polygons editable using leaflet-draw

Question

How can I make polygons loaded on a map from a database editable?

As of now, when the polygons get loaded they remain un-editable. The edit option only gets enabled when I create a new polygon.

Polygons loaded from the database are marked blue and the newly created polygon is marked red. (The edit icons are screwed up!)

I found the following links helpful -http://gis.stackexchange.com/questions/203540/how-to-edit-an-existing-layer-using-leaflet & https://github.com/Leaflet/Leaflet/issues/4461 — codejunkie, Nov 01 '16 at 08:44
Can you please post some code showing how you are converting database items to leaflet items? Here's my answer from a few years ago http://stackoverflow.com/a/26965160/859686 — pk., Nov 02 '16 at 18:37
I had posted another question on stackoverflow. The answer to that question solved this issue as well. Here's the link --> http://stackoverflow.com/questions/40376176/add-existing-leaflet-polygons-to-an-existing-leaflet-layer?noredirect=1#comment68009098_40376176 — codejunkie, Nov 03 '16 at 03:46

score 0 · Answer 1 · answered Apr 30 '19 at 18:58

let map = L.map("map").setView([41.31, 69.27], 12);
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

let drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// toolbar

var drawControl = new L.Control.Draw({
  draw: {. . .},
  edit: {
    featureGroup: drawnItems,
    poly: {
      allowIntersection: false
    }
  }
});
map.addControl(drawControl);

map.on("draw:edited", function(e) {
  let layers = e.layers;
  layers.eachLayer(function(layer) {
    console.log(layer);
  });
});

Making polygons editable using leaflet-draw

1 Answers1