I developed a map displaying a large number of datasets (around 70 different layers at this point) using leaflet. To toggle each of these layers I am using a Javascript function and switch case within that to add/remove layers based on checkbox status. To toggle 3 layers I had to write 6 case statements (two lines of code for each layer), for 70 layers in my primary project I had to write 140 case statements. Tried different things like loops, variable switching and others to reduce this code but couldn’t crack it just wanted to know if there is an efficient way of doing this. I consciously named my layers to match the name with checkbox IDs and the argument passed when the function toggleLayer() from HTML is called to take advantage of it.
Below is a basic example of what I am doing in my primary project. Here is my HTML part of the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Example</title>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<main>
<div class="address-list">
<p>Use checkboxs to toggle layers</p><br>
<div class="inputs" id="years">
<input type="checkbox" id="layer_points_state" onclick='toggleLayer("layer_points_state")' checked="true">States<br>
<input type="checkbox" id="layer_points_territory" onclick='toggleLayer("layer_points_territory")' checked="true">Territories<br>
<input type="checkbox" id="layer_polygon" onclick='toggleLayer("layer_polygon")' checked="true">State Polygons
</div>
</div>
<div id="map"></div>
</main>
<!-- Leaflet js Packages/libraries -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<script src="./leaflet-providers.js"></script>
<!-- data files -->
<script src="state_points.js"></script>
<script src="state_polygons.js"></script>
<script src="script.js"></script>
</body>
</html>
and JS file
var osmMapHum = L.tileLayer.provider('OpenStreetMap.HOT');
var baseMaps = {'OSM Humanitarian':osmMapHum,}
var map = L.map('map', {
center: [-26.750867654966356, 136.22808234118338],
zoom:4.8,
worldCopyJump: false,
layers:[osmMapHum]
});
// Start of States Points
function filter_state(feature){
if (feature.properties.type === 'State')
return true
}
var layer_points_state = new L.GeoJSON(json_state_point, {filter: filter_state}).addTo(map);
function filter_territory(feature){
if (feature.properties.type === 'Territory')
return true
}
var layer_points_territory = new L.GeoJSON(json_state_point, {filter: filter_territory}).addTo(map);
// Start of States Polygon
var layer_polygon = new L.GeoJSON(json_state_polygon, {}).addTo(map);
var overlayMaps = {
"States": layer_points_state,
"Territories": layer_points_territory,
"State Polygon": layer_polygon,
};
var layerControl = L.control.layers(baseMaps, overlayMaps, {collapsed:false}).addTo(map);
//toggle layers with checkbox status
function toggleLayer(layer_toggled){
id_to_check = '#' + layer_toggled
const cb = document.querySelector(id_to_check);
if (cb.checked === true){
switch (layer_toggled){
case 'layer_points_state': return map.addLayer(layer_points_state);
case 'layer_points_territory': return map.addLayer(layer_points_territory);
case 'layer_polygon': return map.addLayer(layer_polygon);
}
}else{
switch (layer_toggled){
case 'layer_points_state': return map.removeLayer(layer_points_state);
case 'layer_points_territory': return map.removeLayer(layer_points_territory);
case 'layer_polygon': return map.removeLayer(layer_polygon);
}
}
}
This is how the map looks
enter image description here
Thanks in advance for the suggestions
