Leaflet Draw not taking properties when converting FeatureGroup to GeoJson

Question

I'm unable to convert my Layer properties into the properties of the GEOJson object using Leaflet(0.7.7)/Leaflet.Draw(latest). My workflow is:

1 Create Map: var map = L.map('#map', options);

2 Create a FeatureGroup: features= new L.FeatureGroup();

3 Add to the Leaflet Map: map.addLayer(features);

4 On the draw:created event, I'm capturing e.layer and adding a bunch of properties:

var layer = e.layer;

layer.properties = { Title: 'Hello' };

features.addLayer(layer);

geo_features = features.toGeoJSON();

However, my geo_features always have empty property attributes in each of the features and I can't figure it out!

score 11 · Accepted Answer · edited May 23 '17 at 12:33

iH8's initial answer was almost correct.

To specify properties that will appear in a vector layer's GeoJSON export (i.e. through its .toGeoJSON() method), you have to fill its feature.type and feature.properties members:

var myVectorLayer = L.rectangle(...) // whatever

var feature = myVectorLayer.feature = myVectorLayer.feature || {};
feature.type = "Feature";
feature.properties = feature.properties || {};
feature.properties["Foo"] = "Bar";

Now myVectorLayer.toGeoJSON() returns a valid GeoJSON feature object represented by:

{
  "type": "Feature",
  "properties": {
    "Foo": "Bar"
    // More properties that may be pre-filled.
  },
  "geometry": // The vector geometry
}

score 2 · Answer 2 · edited Mar 03 '16 at 18:24

2

A (kind of ugly workaround) is using a L.GeoJSON layer and add the drawn layer's GeoJSON to it by using it's addData method. Afterwards grab the last layer in the L.GeoJSON layer's _layers object. At that point the layer has a valid GeoJSON feature property you can edit:

var geojson = new L.GeoJSON().addTo(map);

var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: geojson
    }
}).addTo(map);

map.on('draw:created', function (e) {

    geojson.addData(e.layer.toGeoJSON());

    var layers = geojson._layers,
        keys = Object.keys(layers),
        key = keys[keys.length - 1],
        layer = layers[key];

    layer.feature.properties = {
        'Foo': 'Bar'
    };
});

edited Mar 03 '16 at 18:24

ghybs

47,565
6
74
99

answered Mar 03 '16 at 02:37

iH8

27,722
4
67
76

Thanks for the reply iH8, but I can't get this to work. When injecting into e.layer.feature.properties it actually ends up on level too deep in GEOJsonObject.features[0].geometry.properties instead of GEOJsonObject.features[0].properties. This is causing Leaflet to throw "invalid GEOJson errors and not render anything" – Chronix3 Mar 03 '16 at 08:01
Whoa, that's dumb :( Sorry for the confusion, should have tested it myself. I see now. Was sure that would work. Changed my answer to something that works, kinda ugly, but it does the trick. Let me know what you think. Good luck! – iH8 Mar 03 '16 at 11:43
The first version would work if you also manually specify `layer.feature.type = "Feature"`. I got caught too. – ghybs Mar 03 '16 at 18:33
@ghybs if you post it as an answer, I can mark it as such :) – Chronix3 Mar 04 '16 at 23:37

score 0 · Answer 3 · answered Nov 29 '20 at 02:59

For your L.GeoJSON call include feature callback onEachFeature to options

    L.GeoJSON(featureData,{onEachFeature:function(feature,layer){

 //console.log(feature,layer);
 // do something like 

 feature.setStyle( convertLayerOptionsFromFeatureProperties( feature.properties ) );

}} )

Leaflet Draw not taking properties when converting FeatureGroup to GeoJson

3 Answers3

Linked