mardi 26 mai 2015

Leaflet: Toggle GeoJSON layers with Checkboxes

I would like to be able to use checkboxes to toggle on/off layers on a map. The map will be loaded without any layers.

Right now my buttons look like this:

<label><input type="checkbox" name="points" value="addressPoints" /> ADDRESS POINTS</label>

I'm calling my GeoJSON layers like this:

L.geoJson(schoolDistricts, {
style: defaultStyle,
onEachFeature: function (feature, layer) {
    layer.bindPopup("<h4>School District: " + feature.properties.name);
    layer.setStyle(defaultStyle);
(function(layer, properties) {
    layer.on("mouseover", function (e) {
        layer.setStyle(highlightStyle);
    });
    layer.on("mouseout", function (e) {
        layer.setStyle(defaultStyle);
    });
})(layer, feature.properties.name);

} });

I know I need to add a change event to the checkbox code. I just don't really know how to go about writing a function to toggle the layer on and off. I have about 10 layers I will need to do this for so I'd like to be able to have a function that I can use for them all.

Hopefully this is enough information to go on.

Thanks!




Aucun commentaire:

Enregistrer un commentaire