Leaflet: Toggle GeoJSON layers with Checkboxes in custom sidebar - toggle

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);

Answer 1

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).