4

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.

  • Should the second featureLayer variable be added to the featureGroup rather than the map? – jmfolds Jul 2 '15 at 15:23
  • @jmfolds That doesn't seem to be working. I just found a post where someone used L.geoJson instead of L.mapbox.featureLayer and entered featureGroup.addLayer(layer); under onEachFeature. That seemed to do the trick to get me to edit the shapes. However, I'm running into issues saving the data. But that may be my answer for now. Here's a link to the post. – Josh Jul 2 '15 at 15:39
3

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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