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.