0

I have the GeoJSON:

  [{"type":"FeatureCollection",
    "features":[
        {"type":"Feature","properties":{"id":27,"name":"F001"},"geometry":{"type":"LineString","coordinates":[[-100.231018,47.875829],[-100.231018,47.875829],[-100.225525,47.715306],[-100.225525,47.715306],[-100.057983,47.717154],[-100.057983,47.717154],[-100.063477,47.885039],[-100.063477,47.885039]]}},
        {"type":"Feature","properties":{"id":27,"name":"F001"},"geometry":{"type":"Point","coordinates":[-100.143127,47.914501]}},
        {"type":"Feature","properties":{"id":27,"name":"F001"},"geometry":{"type":"LineString","coordinates":[[-100.310669,47.648737],[-100.310669,47.648737],[-99.931641,47.656138],[-99.931641,47.656138]]}},
        {"type":"Feature","properties":{"id":27,"name":"F001"},"geometry":{"type":"Polygon","coordinates":[[[-99.989319,47.829752],[-99.989319,47.964181],[-99.780579,47.964181],[-99.780579,47.829752],[-99.989319,47.829752]]]}}]},

{"type":"FeatureCollection",
    "features":[
        {"type":"Feature","properties":{"id":53,"name":"F002"},"geometry":{"type":"LineString","coordinates":[[-95.700531,45.095822],[-95.700531,45.095822],[-95.700531,44.985199],[-95.700531,44.985199],[-95.600281,44.988113],[-95.600281,44.988113]]}},
        {"type":"Feature","properties":{"id":53,"name":"F002"},"geometry":{"type":"Point","coordinates":[-95.655212,45.030833]}},
        {"type":"Feature","properties":{"id":53,"name":"F002"},"geometry":{"type":"Polygon","coordinates":[[[-95.579681,44.991027],[-95.579681,45.058972],[-95.502777,45.058972],[-95.502777,44.991027],[-95.579681,44.991027]]]}},
        {"type":"Feature","properties":{"id":53,"name":"F002"},"geometry":{"type":"LineString","coordinates":[[-95.460205,45.0774],[-95.460205,45.0774],[-95.456085,44.995883],[-95.456085,44.995883],[-95.350342,44.994911],[-95.350342,44.994911]]}}]
}]

I am able to put on the map with the code:

 L.geoJson(JSON.parse(data), {
                               onEachFeature: function (feature, layer) {  
                                overlays.push(layer);

                                layer.bindPopup('<pre>'+JSON.stringify(feature.properties.name,null,' ')
                                .replace(/[\{\}"]/g,'')+'</pre>');

                                drawnItems.addLayer(layer);
                }
            });         


                L.control.layers(null, overlays, {
                    collapsed: true
                }).addTo(m);

But I am getting this result:

enter image description here

Instead to have the name "F001" and "F002" I am getting the key for the array.

I am struggling to get the names in the overlay. I have multiples "geometry" for each name. I want to click on the name and show or hide the "geometry" for that name.

0

Reason why you don't get feature names in layer control is because you are adding layers to control without specifying layer display name. Syntax is: {"<someName1>": layer1, "<someName2>": layer2}.

But even if you had the correct syntax, you would have another problem. Since several features have the same name, only the last one with the same name would be linked to the control.

Solution is to group features/layers by adding them to separate feature groups according to feature name.

Simplified code four your case (without popups) could then look something like this:

var overlays = {};

function onEachFeature(feature, layer) {
  if (typeof overlays[feature.properties.name] === 'undefined') { 
    overlays[feature.properties.name] = L.featureGroup();
  }
  overlays[feature.properties.name].addLayer(layer);
}

L.geoJSON(myGeojson, {
  onEachFeature: onEachFeature
});

L.control.layers(null, overlays, {
    collapsed: true
}).addTo(map);
  • @TomazciM Thank you so much for your help! It is doing what I was looking for. I just added at your code the bindPopup. Thank you again and have a great day! – ASerra Aug 23 at 18:10

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.