Overview: I'm currently working on a project where I'm importing GeoJSON into a map using Mapbox. However, I'm wanting to be able to edit those shapes once imported into the map. I've gotten the GeoJSON imported successfully. I can see my shapes as layers in my FeatureGroup. I can see my shapes on the map as they should be rendered.
The Issue: The problem that I'm having is editing the layers after I've imported them. When I click on the "edit" button using Leaflet Draw, I'm getting an error saying "Uncaught TypeError: Cannot read property 'enable' of undefined" on line 10 of leaflet_draw.js. Also, my shapes are now empty shapes with dashed border and no edit controls. Therefore, I can't even interact with the shapes at all.
My Code: Here's the code that I've used to pull my GeoJSON into the map:
var featureGroup = L.featureGroup().addTo(map);if (oldData) { var featureLayer = L.mapbox.featureLayer(oldData, { pointToLayer: function (feature, latlon) { if (feature.properties.type === 'circle') { return L.circle(latlon, feature.properties.radius); } else if (feature.properties.type === 'marker') { return L.marker(latlon); } }, setStyle: function (feature) { return {color: feature.properties.color}; }, onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.description); layer.openPopup(); } }).addTo(featureGroup);}var featureLayer = L.mapbox.featureLayer().addTo(map);var drawControl = new L.Control.Draw({ edit: { featureGroup: featureGroup }, draw: { polygon: true, polyline: true, rectangle: true, circle: true, marker: true }}).addTo(map);Also, it may be helpful to know that I'm using Leaflet.draw version 0.2.3 and Leaflet 0.7.2 that come with Mapbox 2.2.1.
Any tips will help. Thanks in advance!
أكثر...
The Issue: The problem that I'm having is editing the layers after I've imported them. When I click on the "edit" button using Leaflet Draw, I'm getting an error saying "Uncaught TypeError: Cannot read property 'enable' of undefined" on line 10 of leaflet_draw.js. Also, my shapes are now empty shapes with dashed border and no edit controls. Therefore, I can't even interact with the shapes at all.
My Code: Here's the code that I've used to pull my GeoJSON into the map:
var featureGroup = L.featureGroup().addTo(map);if (oldData) { var featureLayer = L.mapbox.featureLayer(oldData, { pointToLayer: function (feature, latlon) { if (feature.properties.type === 'circle') { return L.circle(latlon, feature.properties.radius); } else if (feature.properties.type === 'marker') { return L.marker(latlon); } }, setStyle: function (feature) { return {color: feature.properties.color}; }, onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.description); layer.openPopup(); } }).addTo(featureGroup);}var featureLayer = L.mapbox.featureLayer().addTo(map);var drawControl = new L.Control.Draw({ edit: { featureGroup: featureGroup }, draw: { polygon: true, polyline: true, rectangle: true, circle: true, marker: true }}).addTo(map);Also, it may be helpful to know that I'm using Leaflet.draw version 0.2.3 and Leaflet 0.7.2 that come with Mapbox 2.2.1.
Any tips will help. Thanks in advance!
أكثر...