CODEWITHSUNDEEP
javascriptleafletleaflet.draw
Behatted
Behatted

Reputation: 33

How to edit loaded geoJson with Leaflet

I want to retrieve polygon data from a database, then edit it. I can retrieve the polygons (stored as geojson), but cannot make them editable. How can I do this?

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

    var drawControl = new L.Control.Draw({
        edit: {
            featureGroup: drawnItems
        }
    });
    map.addControl(drawControl);

    map.on('draw:created',function(e) {
    e.layer.addTo(drawnItems);
    });

    L.control.layers(baseLayers).addTo(map);    

    var oldPolygon = null;
    function showOnMap(rowid){
    if(oldPolygon != null){
    map.removeLayer(oldPolygon);
    }

    $.get("testdbextract.php?show="+rowid,function(data){
        var newPolygon = L.geoJson(data);
        newPolygon.addTo(drawnItems); // or drawnItems.addLayer(newPolygon);
        oldPolygon = newPolygon;
        }); 
    }

Upvotes: 3

Views: 6702

Answers (1)

YaFred
YaFred

Reputation: 10008

In your example, you need to parse the geojson data you receive, create layers and initialize drawnItems

To make it easier you can create a GeoJson layer like this:

// Create a GeoJson layer without adding it to the map
L.geoJson(geojsonFeatures, {
  onEachFeature: onEachFeature
});

// Take advantage of the onEachFeature callback to initialize drawnItems
function onEachFeature(feature, layer) {
  drawnItems.addLayer(layer);
}

Here is an example

In your code, it could be used like that

$.get("testdbextract.php?show="+rowid,function(data){
   L.geoJson(data, {
      onEachFeature: onEachFeature
   });
});

Upvotes: 9

Related Questions