CODEWITHSUNDEEP
leafletgeodjangoleaflet.draw
whob13
whob13

Reputation: 15

Leaflet Draw Will Not Delete Features that are added on page load from L.geoJSON()

I am loading a GeoDjango GeometryCollection from a database record and placing them on a featureGroup() using L.geoJSON(). When I try to edit or delete the individual layers, it does not work and there's no error message. However, when I use the "Clear All Layers" button, it successfully deletes all the layers. Is there somewhere I should look to figure this out?

UPDATE: I noticed an error message on Edit, seen below. The delete (trash icon) still does not work or provide any error message when I try to delete the items that are placed when the page is loaded. 

Uncaught TypeError: Cannot read property 'enable' of undefined
  at i._enableLayerEdit (leaflet.draw.js:formatted:2204)
  at i.eachLayer (leaflet.js:5)
  at i.addHooks (leaflet.draw.js:formatted:2131)
  at i.enable (leaflet.js:5)
  at i.enable (leaflet.draw.js:formatted:2115)
  at HTMLAnchorElement.s (leaflet.js:5)

enter image description here

Using Leaflet Draw 1.0.4 (Leaflet 1.6.0)

<script>
var mymap = L.map('mapid').setView([39.828, -98.579], 4),
layer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox/streets-v11',
  tileSize: 512,
  zoomOffset: -1,
  accessToken: '<my token>'
}),
drawnItems = L.featureGroup().addTo(mymap);

L.control.layers({
  'layer': layer.addTo(mymap),
},
{
  'drawLayer': drawnItems
}).addTo(mymap);



{% if coords %}
var geos = {% autoescape off %}{{coords}}['geometries']{% endautoescape %}
$(geos).each(function() {
  L.geoJSON(this).addTo(drawnItems);
})
{% endif %}

mymap.addControl(new L.Control.Draw({
  edit: {
    featureGroup: drawnItems,
    remove: true,
  poly: {
    allowIntersection: false
  },
},
draw: {
  polyline: false,
  circle: false,
  circlemarker: false,
  polygon: {
    allowIntersection: false
  }
}
})
);
</script>

Upvotes: 0

Views: 772

Answers (1)

ghybs
ghybs

Reputation: 53185

Since you are not showing a sample of GeoJSON data that reproduces the problem, it is hard to tell exactly what is the reason.

However, the error message is exactly the same as when you try editing or deleting Leaflet Layer Groups with Leaflet.draw, see Leaflet Draw "Cannot read property 'enable' of undefined" adding control to geoJSON layer

Possible workaround: flatten your layers before adding them into the editable layer, as shown in the linked post.

Upvotes: 1

Related Questions