I am trying to make my geoJSON sublayers enable for on/off. There are geoJSON layers filtered by property, what look like this:
infill = L.geoJson(data2, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius:6,
opacity: .5,
//color: "#000",
color:getColor(feature.properties.Type),
fillColor: getColor(feature.properties.Type),
fillOpacity: 0.8
}).bindTooltip(feature.properties.Owner);
},
onEachFeature: function (feature, layer) {
},
filter: function(feature, layer) {
return (feature.properties.Type == "Infill" );
}
})//.addTo(map); //Note turned on to start map with Data, Checkbox has checked property.
mdu = L.geoJson(data2, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius:6,
opacity: .5,
//color: "#000",
color:getColor(feature.properties.Type),
fillColor: getColor(feature.properties.Type),
fillOpacity: 0.8
}).bindTooltip(feature.properties.Owner);
},
onEachFeature: function (feature, layer) {
},
filter: function(feature, layer) {
return (feature.properties.Type == "MDU" );
}
})//.addTo(map);
They consist of the bigger layer as it shown in the image below:
This result comes from this code:
//major geoJSON layer#
document.querySelector("input[name=vm]").addEventListener('change',
function() { //checking the jobs in the sidebar layer 2 Virgin Media
if(this.checked) map.addLayer(job2, infill, mdu)
else map.removeLayer(job2, infill, mdu)
if(this.checked) map.addLayer(featuresLayer2)
else map.removeLayer(featuresLayer2)
})
//Infill - 1st sublayer
document.querySelector("input[name=infill]").addEventListener('change',
function() { //checking the jobs in the sidebar layer 1
if(this.checked) map.addLayer(infill) //geoJson layer
else map.removeLayer(infill)
if(this.checked) map.addLayer(featuresLayer) //clustered geoJson layer
else map.removeLayer(featuresLayer)
})
//MDU - 2nd sublayer
document.querySelector("input[name=mdu]").addEventListener('change',
function() { //checking the jobs in the sidebar layer 2 Virgin Media
if(this.checked) map.addLayer(mdu)
else map.removeLayer(mdu)
if(this.checked) map.addLayer(featuresLayer2)
else map.removeLayer(featuresLayer2)
})
There are 2 sublayers Infill and MDU that belongs to major GeoJSOn layer.
Is it possible to make them distinguished (eligible to click on-off) when the major layer in ON and all them disabled, when the major layer is OFF?
The original examples comes from here:
http://www.gistechsolutions.com/leaflet/DEMO/sports/sports.html selection layers from one geoJSON layer
http://www.gistechsolutions.com/leaflet/DEMO/sports/index.html
but unfortunately they are valid for major layers, whereas the dotted divisions are not a subject of selection.