2

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:

enter image description here

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.

2

To achieve desired behaviour when selecting layers, you have to take the following into account:

  • To make solution independent of initial state of layers, always check status of layer with map.hasLayer method before trying to add/remove it to the map.
  • Enable/disable checkbox input element for sublayers when main layer is checked/unchecked.
  • Check/uncheck checkbox of input element for sublayers when main layer is checked/unchecked. Here you decide is you want them initially checked or unchecked.

So the code could then look something like this (variant with sublayers are initially checked when main layer is checked):

document.querySelector("input[name=vm]").addEventListener('change',  function() {
  if(this.checked) {
    if (!map.hasLayer(job2)) map.addLayer(job2);
    if (!map.hasLayer(infill)) map.addLayer(infill);
    if (!map.hasLayer(mdu)) map.addLayer(mdu);
    if (!map.hasLayer(featurelayer2)) map.addLayer(featuresLayer2);
    document.querySelector("input[name=infill]").disabled = false;
    document.querySelector("input[name=mdu]").disabled = false;
    document.querySelector("input[name=infill]").checked = true;
    document.querySelector("input[name=mdu]").checked = true;
    }
  else {
    if (map.hasLayer(job2)) map.removeLayer(job2);
    if (map.hasLayer(infill)) map.removeLayer(infill);
    if (map.hasLayer(mdu)) map.removeLayer(mdu);
    if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
    document.querySelector("input[name=infill]").disabled = true;
    document.querySelector("input[name=mdu]").disabled = true;
    document.querySelector("input[name=infill]").checked = false;
    document.querySelector("input[name=mdu]").checked = false;
  }
});

document.querySelector("input[name=infill]").addEventListener('change', function() {
  if(this.checked) {
    if (!map.hasLayer(infill)) map.addLayer(infill);
    if (!map.hasLayer(featurelayer)) map.addLayer(featuresLayer);
    }
  else {
    if (map.hasLayer(infill)) map.removeLayer(infill);
    if (map.hasLayer(featuresLayer)) map.removeLayer(featuresLayer);
   }
 });

document.querySelector("input[name=mdu]").addEventListener('change', function() {
  if(this.checked) {
    if (!map.hasLayer(mdu)) map.addLayer(mdu);
    if (!map.hasLayer(featurelayer2)) map.addLayer(featuresLayer2);
    }
  else {
    if (map.hasLayer(mdu)) map.removeLayer(mdu);
    if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
  }
});

Remark: Nicely indented code greatly helps in understanding the logic of code. I warmly recommend it.

  • Unfortunately not working. The idea seems to be good, but when I check the main layer again, the sublayers remain unchecked. Moreover sublayers are not able to switch on/off because the looks like another layer on the existing one. It will be better to raise new query, because the problem looks too complicated for this comment. – Mariusz Krukar Dec 2 at 9:41
  • It worked for me when I tested it. If you understand the logic of it, you should now why it's working or not working. – TomazicM Dec 2 at 11:35
  • I already raised another query here: gis.stackexchange.com/questions/343609/… showing all cases. Now I am thinking how to solve it, alongside with the stuff here: gis.stackexchange.com/questions/343329/… – Mariusz Krukar Dec 2 at 11:42
  • Ok I solved it, thank you :) Looks like I got to the grip – Mariusz Krukar Dec 2 at 16:14
  • I am still getting error: Uncaught TypeError: Cannot read property '_removePath' of undefined at NewClass.onRemove (Path.js:90) at NewClass.removeLayer (Layer.js:185) at NewClass.eachLayer (LayerGroup.js:121) at NewClass.onRemove (LayerGroup.js:109) at NewClass.removeLayer (Layer.js:185) at HTMLInputElement.<anonymous> ((index):903) that refers to main fleaflet.js file. What should I do with it? – Mariusz Krukar Dec 3 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.