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.

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.

• javascript
• leaflet
• leaflet.draw

• 1 Did it solved your problem ? – Manuel Commented Nov 2, 2016 at 11:16
• Thank you so much! – codejunkie Commented Nov 2, 2016 at 11:37

2 Answers 2

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); 
    }

As a simplistic and straight forward approach you could also add the polygons to the map without using the FeatureGroup.

const polygon = L.polygon([[lat,lng],[lat,lng],[lat,lng]], { fillOpacity: 0.5, fillColor: '#9a8fcd' });
polygon.addTo(map);

You can of course loop through your data and add all the polygons in this way as well.