[GIS] Using Mapbox (LeafletJS), how to edit imported shapes from GeoJSON

javascriptleafletleaflet-drawmapbox

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.

Best Answer

I never actually was able to use L.mapbox.featureLayer for this. I ended up having to use Leaflet's L.geoJson, adding featureLayer to map instead of the featureGroup, and adding the layer to the featureGroup at onEachFeature. Here's what my final code looked like:

var featureGroup = L.featureGroup().addTo(map);
if (oldData) {
    var featureLayer = L.geoJson(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);
            }
        },
        style: function (feature) {
            return {color: feature.properties.color};
        },
        onEachFeature: function (feature, layer) {
            featureGroup.addLayer(layer);
            layer.bindPopup(feature.properties.description);
            layer.openPopup();
        }
    }).addTo(map);
}

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);

Here's a Mergely diff showing the difference: http://www.mergely.com/fVq3TQvT/

Related Question