1

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

4
  • Can you add a sample from your GeoJSON (a feature or two)?
    – TomazicM
    Commented Sep 25, 2023 at 18:10
  • @TomazicM yes, only one feature is retrieved each time. Meanwhile... I've just been seeing that my read_one_polygon.php was looking inside the points of the database.. not the polygons ! so i've just updated the php and the screenshots....
    – Vincent Dc
    Commented Sep 25, 2023 at 20:08
  • Pictures are not of a much use. Please add a sample of your GeoJSON data as it is fed to L.geoJson(data, ... (a feature or two) as a text.
    – TomazicM
    Commented Sep 25, 2023 at 20:14
  • @TomazicM i updated the code and the sample - i hope this is what you mean .. in fact, I now asked the console.log to get the full response to the ajax code - i can't ask directly the php file because there are some session variables that are required
    – Vincent Dc
    Commented Sep 25, 2023 at 20:27

1 Answer 1

2

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);
}
1
  • I just implemented this solution, after a long time because my code is beginning to be very heavy, and found out that it works. Thanks
    – Vincent Dc
    Commented Nov 9, 2023 at 20:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.