Leaflet Draw map and import saved data error

Question

I've created a mapbox-gl and leaflet map and I'm trying to add and edit a layer using the plugin leaflet-draw.

The plugin works nicely; I can create a path (polyline) and save it using geojson.

I got error when I reload the map including the saved data:

TypeError: dataLayer.push is not a function
TypeError: a.slice is not a function

The plyline is on map but if I try to edit it (clicking on "Edit layer" button) the polyline change color (which means it's selected) but no anchor points are shown and it's not possible to drag or edit.

dataLayer is the layer I created including the new data.

The JSON data is verified on http://geojson.io/#map=19/44.93382/9.67409 and it looks good.

I think I created the dataLayer not correctly.

  // ADD data stored in DB
  var geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            9.67420756816864,
            44.93391475147485
          ],
          [
            9.674186110496521,
            44.93359955072641
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          9.67420756816864,
          44.933929941828694
        ]
      }
    }
  ]
};

    var dataLayer = L.geoJson(geojson);

    // featureGroup is the layer editable
    var featureGroup = L.featureGroup();

    // add  data from DB  to editable layer
    dataLayer.addTo(featureGroup);

    // add editable layer to the Map
    featureGroup.addTo(map);

What's wrong in my code ?

Uncoke Uncoke · Accepted Answer · 2017-12-14T07:04:05

Geojson standard doesn't contain extra features so I have only the path and not the extra items such as th anchor points (rectangles). To solve it I need to fix the code as:

  // featureGroup is the layer editable
    var featureGroup = L.featureGroup();
    featureGroup.addTo(map);


    L.geoJson(geojson, {
        onEachFeature: function (feature, layer) {
            if (layer.getLayers) {
                layer.getLayers().forEach(function (l) {
                    featureGroup.addLayer(l);
                })
            } else {
                featureGroup.addLayer(layer);
            }
        }
    });

Leaflet Draw map and import saved data error

1 Answers