Adding a Layer Control Legend based on geoJson properties

Question

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.

Answer 1

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