Leaflet: Toggle GeoJSON layers with Checkboxes in custom sidebar

Question

I have a custom sidebar sitting on top of my map. Within the sidebar are checkboxes:

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

I would like the map to load with none of the GeoJSON layers pre-loaded and the functionality to toggle a layer on by clicking the checkbox.

Below is the Javascript I am using:

//Create Variable called 'map' and Set Options
var map = L.map('map', {
    center: [35.132703, -92.347412], //Faulkner County
    zoom: 11,
    minZoom: 8, 
    maxZoom: 18,
    keyboard: true,
    zoomControl: false,
}); 

//Add Base Map Tile Layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); //ROADMAP
//L.tileLayer('http://{s}.tiles.mapbox.com/v3/moklick.lh736gg3/{z}/{x}/{y}.png').addTo(map); //SATELLITE
//L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png').addTo(map); //TERRAIN
//L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-cnkhv76j/{z}/{x}/{y}.png').addTo(map); //HEATMAP



//Create Variable for Default Polygon Style
var defaultStyle = {
    color: "#3498db",
    weight: 2,
    opacity: 1,
    fillOpacity: 0.4,
    fillColor: "#3498db"
};

//Create Variable for Highlighted Polygon Style on Mouseover
var highlightStyle = {
    color: "#e74c3c",
    weight: 3,
    opacity: 1,
    fillOpacity: 0.3,
    fillColor: "#e74c3c"
};

var onEachFeature = function(feature, layer){
    layer.bindPopup("<h4>Voting Precinct:</h4>" + feature.properties.NAME10),
    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.NAME10);
};

/*//Add GeoJSON for County Outline
L.geoJson(faulknerCounty, {
    style: defaultStyle,
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.popupContent);
        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.NAME10);
}
}).addTo(map);*/

/*//Add GeoJSON for Voting Precincts
L.geoJson(votingPrecincts, {
    style: defaultStyle,
    onEachFeature: onEachFeature
}).addTo(map);*/

//Add GeoJSON for JP Districts
L.geoJson(jpDistricts, {
    style: defaultStyle,
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h4>Justice of the Peace District: " + feature.properties.district);
        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.district);
}
}).addTo(map)

/*//Add GeoJSON for School Districts
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);
}
}).addTo(map);*/

new L.Control.GeoSearch({
    provider: new L.GeoSearch.Provider.Google(),
    position: 'topright',
    showMarker: false,
    retainZoomLevel: false,
}).addTo(map);

snkashis snkashis · Accepted Answer · 2015-05-21T22:17:57

Create (but do not .addTo(map)) each geoJSON layer you need...so your init would look likevar schoolDistricts = L.geoJSON(...., then watch for the change event on your checkboxes to add or remove the appropriate layers with map.addLayer(layerToAdd) and map.removeLayer(layerToRemove).

Leaflet: Toggle GeoJSON layers with Checkboxes in custom sidebar

1 Answers