I have a bunch of polygons which are stored in a database. I would like to add them to the map in such a way that they can be edited using the leaflet-draw toolbar. Although, now the polygons get added to the map, I am unable edit them.
I think this is because they are not added to the layerGroup() to which newly drawn shapes are added.
Please help.
You have to add your polygons to the featureGroup drawnItems ! Let's say,
var polyLayers = dbArray;
is your database array with polygons. First create a feature group with your drawn items:
var drawnItems = new L.FeatureGroup();
and add it to the map:
map.addLayer(drawnItems);
Then you simply need to iterate over your polygons from your database and add them to the drawnItems FeatureGroup:
for(layer of polyLayers) {
drawnItems.addLayer(layer);
};
Now the layers are added to the map and editable.
Here goes an EXAMPLE:
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var polyLayers = [];
var polygon1 = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]);
polyLayers.push(polygon1)
var polygon2 = L.polygon([
[51.512642, -0.099993],
[51.520387, -0.087633],
[51.509116, -0.082483]
]);
polyLayers.push(polygon2)
// Add the layers to the drawnItems feature group
for(let layer of polyLayers) {
drawnItems.addLayer(layer);
}
