Retrieve geometry from GeoJSON to L.polygon in Leaflet?

Question

Since I have a problem with Leaflet draw, which, unfortunately is discontinued, I'm trying to rely on Leaflet editable for editing: before I learn how to save edits, I just want to retrieve a polygon from my database as a L.polygon that Leaflet editable can read.

About the code: this is Leaflet CRUD, available on github, modified, relying on Leaflet draw.

This is the state of the code: the data is read through the AJAX call and is retrieved as geojson or featuregroup... but is not passing to the L.polygon. leaflet editable is reading only l.polygon , not featuregroup, not featurelayer, so I'm trying to translate. That's what I would like to achieve:

function _displayMapEditPolygon(divtarget, objectgid) {
objectsGroup.clearLayers();
    /* Digitize Function */
    drawnItems_editpolygon = new L.FeatureGroup();
    map.addLayer(drawnItems_editpolygon);

    var promiseObjectEdit = $.ajax({
        url: "../crud/dataservice/read_one_polygon.php",
        method: "GET",
        dataType: "json",
        data: {
            command: "POLYGON",
            gid: objectgid,
            current_file: current_file
        },
        xhrFields: {
            withCredentials: true
        },
        username: null,
        password: null,
    success: function (response) {
        console.log(response);
        console.log('i asked the response');
    },
    });


promiseObjectEdit.then(function(data) {
    console.log(data);


    L.geoJson(data, {
        onEachFeature: _onEachFeature_editpolygon
    });
});
    function _onEachFeature_editpolygon(feature, layer) {
        drawnItems_editpolygon.addLayer(layer);
console.log(data);
for ( var i=0; i < layer.features.length; i++ ) {
    feat = layer.features[i];coords = [];
    for ( var j = 0 ; j < feat.geometry.coordinates[0].length - 1; j++ ) {
        coord = feat.geometry.coordinates[0][j];point = [];
        point.push( coord[1], coord[0]);
        coords.push( point );
    }
    var test = L.polygon( coords).addTo(map);
};


     
        
    }
};

The following console logs holds the data as asked in ajax, console.log(response); : only one polygon is asked each time..

Object { type: "FeatureCollection", features: (1) […] }
​
features: Array [ {…} ]
​​
0: Object { type: "Feature", id: 0, properties: {…}, … }
​​​
geometry: Object { type: "Polygon", coordinates: (1) […] }
​​​​
coordinates: Array [ (7) […] ]
​​​​​
0: Array(7) [ (2) […], (2) […], (2) […], … ]
​​​​​​
0: Array [ -13.206044, 55.765013 ]
​​​​​​
1: Array [ -11.229188, 55.715583 ]
​​​​​​
2: Array [ -9.999144, 54.979196 ]
​​​​​​
3: Array [ -11.207223, 55.167712 ]
​​​​​​
4: Array [ -12.634953, 55.01697 ]
​​​​​​
5: Array [ -13.337835, 55.079848 ]
​​​​​​
6: Array [ -13.206044, 55.765013 ]
​​​​​​
length: 7
​​​​​​
<prototype>: Array []
​​​​​
length: 1
​​​​​
<prototype>: Array []
​​​​
type: "Polygon"

and the error preventing the translation to a L.Polygon;

Uncaught TypeError: data is undefined

Answer 1

As the name of onEachFeature GeoJSON layer option tells, it's called for each single feature when loading GeoJSON data. This means that layer.features does not exist at all, only layer.feature. But since one of the function parameters is also feature, you can directly use this one.

So relevant part of the code could then look something like this:

function _onEachFeature_editpolygon(feature, layer) {
  drawnItems_editpolygon.addLayer(layer);

  var coords = [];
  for (var j = 0 ; j < (feature.geometry.coordinates[0].length - 1); j++) {
    var coord = feature.geometry.coordinates[0][j];
    var point = [];
    point.push( coord[1], coord[0]);
    coords.push(point);
  }
  var test = L.polygon(coords).addTo(map);
}