2

I have a Leaflet map app in which I am having difficulty getting the L.Control to function properly. The app pulls points based on data from a geoJson file. The geoJson data has a property "Type" (feature.properties.Type). The types are restaurants, bars, music, cafe, and culture. I want a Layer control legend that will toggle the points on and off the map depending on whether the use has them clicked in a checkbox. For example, if the user has bars clicked, but not culture, all the points with Type == 'bar' will show on the map but not those with 'culture'. This is how the geoJson is set up; mind that I already have variable to control what the icons look like that I am not including:

var points = L.geoJson(dtr_points, {
onEachFeature: function (feature, layer) {
    var link_url = "<a href='" + feature.properties.Link + "' target='_blank'>" + feature.properties.Name + "</a>"
    console.log(link_url);
    layer.bindPopup(link_url);

     if(feature.properties.Type == "beer") {
        layer.setIcon(beer);
     };
     if(feature.properties.Type == "bar") {
        layer.setIcon(bar);
     };
     if(feature.properties.Type == "restaurant") {
        layer.setIcon(restaurant);
     };
     if(feature.properties.Type == "music") {
        layer.setIcon(music);
     };
     if(feature.properties.Type == "culture") {
        layer.setIcon(culture);
     };
     if(feature.properties.Type == "cafe") {
        layer.setIcon(cafe);
     };
     if(feature.properties.Type == "occult shop") {
        layer.setIcon(occult);
     };
  }    
}).addTo(map);

L.control.zoom({
  position:'bottomright'
}).addTo(map);

L.control.layers(points).addTo(map);

Notice that the last line is where I am trying to add the Layer Control. It does not show up on the map currently. Can you suggest how to fix this? I think I need to add a layer group, but the Leaflet documentation doesn't explain how to do this for geoJson data.

4

Here's one approach

// first list the types in an array
var types = ['beer','bar','restaurant','music','culture','cafe']; // etc.
// add an empty layer control to the map
var layerControl = L.control.layers().addTo(map);

// iterate over types, filter by that type, and format the layer for that feature type
types.forEach(function(type) {
    var layer = L.geoJson(dtr_points, {
        filter: function(feature, layer) {
            return feature.properties.Type == type;
        }, 
        onEachFeature: function(feature, layer) {
            var link_url = "<a href='" + feature.properties.Link + "' target='_blank'>" + feature.properties.Name + "</a>"
            layer.bindPopup(link_url);
            // I don't see any L.icons in your example, but following what you have:
            layer.setIcon(type);
        }
    }
    // all done with the layer, add it to the control
    layerControl.addOverlay(layer, type);

});

Documentation for L.control.layers: http://leafletjs.com/reference.html#control-layers

  • That worked great! I see now that to utilize geoJson properties in the layer control, you must iterate through and format the properties and use addOverlay. I had to make a few modifications to accomodate my custom icons, but it is functioning nicely. Thanks for the insight! – gwydion93 Mar 28 '17 at 17:45

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.