Leaflet checking and disabling GeoJSON sublayers troubleshoots

0
votes

I have been fighting with the GeoJSON sublayers in leaflet map.

The problem is, that when I switch them off, they still appear, when change the zoom level In this event I cannot even switch them off as per in the image below:

enter image description here

Once I only click on the job thick, then console says:

Uncaught TypeError: Cannot read property '_targets' of null at NewClass.removeInteractiveTarget (Layer.js:83) at NewClass._removePath (SVG.js:132) 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 NewClass.removeFrom (Layer.js:66) at NewClass.remove (Layer.js:59) at NewClass.onRemove (leaflet.markercluster.js:1)

Before I start to write my code, see my JS fiddle here:

https://jsfiddle.net/Krukarius/abnkfxcL/3/

And the map demo here:

https://mariusz-krukar.mkrgeo.pl/en/workshop/media/MDU_demo.html

Now my existing code:

  document.querySelector("input[name=vm]").addEventListener('change',  function() {   //main geoJSON layer
  if(this.checked) {
if (!map.hasLayer(job2)) map.removeLayer(job2);
if (!map.hasLayer(infill)) map.addLayer(infill);
if (!map.hasLayer(mdu)) map.addLayer(mdu);
if (!map.hasLayer(featuresLayer2)) map.addLayer(featuresLayer2);
//document.querySelector("input[name=vm]").disabled
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() {   //GeoJSOn sublayer1
 if(this.checked) {
  if (!map.hasLayer(infill)) map.addLayer(infill);
  //if (!map.hasLayer(job2)) map.addLayer(job2);
  //if (!map.hasLayer(featuresLayer2)) map.addLayer(featuresLayer2);
   document.querySelector("input[name=vm]").disabled = true;

   }
   else {
   if (map.hasLayer(infill)) map.removeLayer(infill);
   if (map.hasLayer(job2)) map.removeLayer(job2);
   if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
   document.querySelector("input[name=vm]").checked = true;
  }
 });

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


  map.on('zoomend', function() {
if (map.getZoom() < 9){
if (map.hasLayer(job)) map.removeLayer(job);
if (map.hasLayer(job2)) map.removeLayer(job2);
    if (map.hasLayer(infill)) map.removeLayer(infill);
    if (map.hasLayer(mdu)) map.removeLayer(mdu);
if (map.hasLayer(job3)) map.removeLayer(job3);
  }
  else {
    if (document.querySelector("input[name=cf]").checked && !map.hasLayer(job)) map.addLayer(job);
    if (document.querySelector("input[name=vm]").checked && !map.hasLayer(job2)) map.addLayer(job2);
    if (document.querySelector("input[name=infill]").checked && !map.hasLayer(infill)) map.addLayer(infill);
    if (document.querySelector("input[name=mdu]").checked && !map.hasLayer(infill)) map.addLayer(mdu);
if (document.querySelector("input[name=bt]").checked && !map.hasLayer(job3)) map.addLayer(job3);
  }
});

I want to have these layers working. Doesanyone have some ideas how to solve it?

Thanks & Regards

1
javascriptleafletgeojson
You don't need to check if map has Layer !map.hasLayer(job) you can always add the layer. If the map has already the layer it "overwrites" it, it is the same Object and so it is not add additionaly. – Falke Design
It doesn't help at all. I found something here: github.com/Leaflet/Leaflet.draw/issues/851 But I am far from understanding this – MKR
If you post a fiddle or a Demo, the demo should be working and on the same state / version as you image / problem. And pls Update your fiddle with all paths (script, css, ...), so that it is a working example. – Falke Design
I have already posted the link to my demo map - this is the code just before the filtering. Code included in Stack Overflow is such an addition. – MKR

1 Answers

0
votes

One reasonable solution is switching off the main geoJSON layer, whereas the another sublayers has been determined.

The simplified code can look like this:

 /*  ----------- main GeoJSON Layer job2 made inactive!!! ---------------
job2 = L.geoJson(data2, {  //layer2 Virgin Media start  
    style: style2,
    pointToLayer: function(feature, latlng) {
            feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + feature.properties.Address
            label = String(feature.properties.Owner)
            if (feature.properties.Post_Survey_Home_Count >=100)
        return L.circleMarker(latlng, {
            radius:12,
            opacity: .5,
            //color: "#000",
            color:getColor2(feature.properties.Type),
            fillColor:  getColor2(feature.properties.Type),
            fillOpacity: 0.8
        }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
           else if (feature.properties.Post_Survey_Home_Count >=50)
           return L.circleMarker(latlng, {
            radius:9,
            opacity: .5,
            //color: "#000",
            color:getColor2(feature.properties.Type),
            fillColor:  getColor2(feature.properties.Type),
            fillOpacity: 0.8
        }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
            else if (feature.properties.Post_Survey_Home_Count >=1)
            return L.circleMarker(latlng, {
            radius:6,
            opacity: .5,
            //color: "#000",
            color:getColor2(feature.properties.Type),
            fillColor:  getColor2(feature.properties.Type),
            fillOpacity: 0.8
        }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
            else if (feature.properties.Post_Survey_Home_Count === "")
            return L.circleMarker(latlng, {
            radius:4,
            //opacity: .5,
            //color: "#000",
            color:getColor2(feature.properties.Type),
            fillColor:  getColor2(feature.properties.Type),
            fillOpacity: 0.6,
        }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
    },
    onEachFeature: function (feature, layer) {  // Virgin Media tracker data start ---------
                layer._leaflet_id = feature.properties.Owner;
            var popupContent = "<p><h2>" +
                feature.properties.Owner + "</h2><font color='red'><h3>Status:</font> " +
                feature.properties.Status + "</h3><b> NBU ID:</b> " +
                feature.properties.NBU + "</br><b> Ticket ID:</b> " +
                feature.properties.Ticket_ID + "</br><b> Address (street):</b> " +
                feature.properties.Address + "</br><b> Address (postcode):</b> " +
                feature.properties.Postcode + "</br><b> Asbestos report:</b> " +
                feature.properties.Asbestos_rep + "</br><font color='blue'><b>Planner</b>:</font> " +
                feature.properties.Planner + "</br><font color='blue'><b>Surveyor</b>:</font> " +
                feature.properties.Surveyor + "</br></h2><b>Units provisional:</b> " +
                feature.properties.Client_Home_Count + "</br></h2><b> Post survey units:</b> " +
                feature.properties.Post_Survey_Home_Count + "</br> <b>STATS (applied):</b> " +
                feature.properties.STATS_Applied_for_date + "</br> <b>STATS (completed):</b> " +
                feature.properties.STATS_compleeted + "</br> <b>VM issue date:</b> " +
                feature.properties.Date_issued_from_VM + "</br> <b>QC date:</b> " +
                feature.properties.ACTUAL_Internal_QC_Date + "</br> <b>VM ECD date:</b> " +
                feature.properties.VM_ECD_date + "</br><b>General notes:</b> " +
                feature.properties.General_notes + "</br>" +
                '</br><center><a href="'+ feature.properties.Directory +'" target="_blank">Local directory</a></center></p>' +
                '<center><font color="red"><a href="'+ feature.properties.Sharepoint +'" target="_blank">Sharepoint</a></font></center></p>';                   
            if (feature.properties && feature.properties.popupContent) {
                    popupContent += feature.properties.popupContent;
                }
            layer.bindPopup(popupContent);
            layer.on({ 
                mouseover: function (e) {
                    this.setStyle({
                        'fillColor': '#663300',
                        'weight':11
                    });
                },
                mouseout: function (e) {
                 job2.resetStyle(this);
                }
            }); //layer.on finish
    } //Virgin Media onEachfeature tracker finish
})//.addTo(map);  //layer 2 Virgin Media finish
*/
                    infill = L.geoJson(data2, {    //1st geoJSON sublayer, deriving from the "job"  layer
                        style: style2,
                        pointToLayer: function(feature, latlng) {
                                feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + feature.properties.Address
                                label = String(feature.properties.Owner)
                                if (feature.properties.Post_Survey_Home_Count >=100)
                            return L.circleMarker(latlng, {
                                radius:12,
                                opacity: .5,
                                //color: "#000",
                                color:getColor2(feature.properties.Type),
                                fillColor:  getColor2(feature.properties.Type),
                                fillOpacity: 0.8
                            }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
                               else if (feature.properties.Post_Survey_Home_Count >=50)
                               return L.circleMarker(latlng, {
                                radius:9,
                                opacity: .5,
                                //color: "#000",
                                color:getColor2(feature.properties.Type),
                                fillColor:  getColor2(feature.properties.Type),
                                fillOpacity: 0.8
                            }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
                                else if (feature.properties.Post_Survey_Home_Count >=1)
                                return L.circleMarker(latlng, {
                                radius:6,
                                opacity: .5,
                                //color: "#000",
                                color:getColor2(feature.properties.Type),
                                fillColor:  getColor2(feature.properties.Type),
                                fillOpacity: 0.8
                            }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
                                else if (feature.properties.Post_Survey_Home_Count === "")
                                return L.circleMarker(latlng, {
                                radius:4,
                                //opacity: .5,
                                //color: "#000",
                                color:getColor2(feature.properties.Type),
                                fillColor:  getColor2(feature.properties.Type),
                                fillOpacity: 0.6,
                            }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
                        },
                            onEachFeature: function (feature, layer) {
                            layer._leaflet_id = feature.properties.Owner;
                            var popupContent = "<p><h2>" +
                                    feature.properties.Owner + "</h2><font color='red'><h3>Status:</font> " +
                                    feature.properties.Status + "</h3><b> NBU ID:</b> " +
                                    feature.properties.NBU + "</br><b> Ticket ID:</b> " +
                                    feature.properties.Ticket_ID + "</br><b> Address (street):</b> " +
                                    feature.properties.Address + "</br><b> Address (postcode):</b> " +
                                    feature.properties.Postcode + "</br><b> Asbestos report:</b> " +
                                    feature.properties.Asbestos_rep + "</br><font color='blue'><b>Planner</b>:</font> " +
                                    feature.properties.Planner + "</br><font color='blue'><b>Surveyor</b>:</font> " +
                                    feature.properties.Surveyor + "</br></h2><b>Units provisional:</b> " +
                                    feature.properties.Client_Home_Count + "</br></h2><b> Post survey units:</b> " +
                                    feature.properties.Post_Survey_Home_Count + "</br> <b>STATS (applied):</b> " +
                                    feature.properties.STATS_Applied_for_date + "</br> <b>STATS (completed):</b> " +
                                    feature.properties.STATS_compleeted + "</br> <b>VM issue date:</b> " +
                                    feature.properties.Date_issued_from_VM + "</br> <b>QC date:</b> " +
                                    feature.properties.ACTUAL_Internal_QC_Date + "</br> <b>VM ECD date:</b> " +
                                    feature.properties.VM_ECD_date + "</br><b>General notes:</b> " +
                                    feature.properties.General_notes + "</br>" +
                                    '</br><center><a href="'+ feature.properties.Directory +'" target="_blank">Local directory</a></center></p>' +
                                    '<center><font color="red"><a href="'+ feature.properties.Sharepoint +'" target="_blank">Sharepoint</a></font></center></p>';   
                                    if (feature.properties && feature.properties.popupContent) {
                                        popupContent += feature.properties.popupContent;
                                    }
                                    layer.bindPopup(popupContent);
                                    layer.on({ 
                                    mouseover: function (e) {
                                        this.setStyle({
                                            'fillColor': '#663300',
                                            'weight':11
                                        });
                                    },
                                    mouseout: function (e) {
                                     infill.resetStyle(this);
                                    }
                                }); //layer.on finish

                            },
                            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, {     //2nd geoJSON sublayer, deriving from the "job"  layer
                        style: style2,
                        pointToLayer: function(feature, latlng) {
                        feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + feature.properties.Address
                                label = String(feature.properties.Owner)
                                if (feature.properties.Post_Survey_Home_Count >=100)
                            return L.circleMarker(latlng, {
                                radius:12,
                                opacity: .5,
                                //color: "#000",
                                color:getColor2(feature.properties.Type),
                                fillColor:  getColor2(feature.properties.Type),
                                fillOpacity: 0.8
                            }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
                               else if (feature.properties.Post_Survey_Home_Count >=50)
                               return L.circleMarker(latlng, {
                                radius:9,
                                opacity: .5,
                                //color: "#000",
                                color:getColor2(feature.properties.Type),
                                fillColor:  getColor2(feature.properties.Type),
                                fillOpacity: 0.8
                            }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
                                else if (feature.properties.Post_Survey_Home_Count >=1)
                                return L.circleMarker(latlng, {
                                radius:6,
                                opacity: .5,
                                //color: "#000",
                                color:getColor2(feature.properties.Type),
                                fillColor:  getColor2(feature.properties.Type),
                                fillOpacity: 0.8
                            }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
                                else if (feature.properties.Post_Survey_Home_Count === "")
                                return L.circleMarker(latlng, {
                                radius:4,
                                //opacity: .5,
                                //color: "#000",
                                color:getColor2(feature.properties.Type),
                                fillColor:  getColor2(feature.properties.Type),
                                fillOpacity: 0.6,
                            }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
                        },
                            onEachFeature: function (feature, layer) {
                            layer._leaflet_id = feature.properties.Owner;
                                var popupContent = "<p><h2>" +
                                    feature.properties.Owner + "</h2><font color='red'><h3>Status:</font> " +
                                    feature.properties.Status + "</h3><b> NBU ID:</b> " +
                                    feature.properties.NBU + "</br><b> Ticket ID:</b> " +
                                    feature.properties.Ticket_ID + "</br><b> Address (street):</b> " +
                                    feature.properties.Address + "</br><b> Address (postcode):</b> " +
                                    feature.properties.Postcode + "</br><b> Asbestos report:</b> " +
                                    feature.properties.Asbestos_rep + "</br><font color='blue'><b>Planner</b>:</font> " +
                                    feature.properties.Planner + "</br><font color='blue'><b>Surveyor</b>:</font> " +
                                    feature.properties.Surveyor + "</br></h2><b>Units provisional:</b> " +
                                    feature.properties.Client_Home_Count + "</br></h2><b> Post survey units:</b> " +
                                    feature.properties.Post_Survey_Home_Count + "</br> <b>STATS (applied):</b> " +
                                    feature.properties.STATS_Applied_for_date + "</br> <b>STATS (completed):</b> " +
                                    feature.properties.STATS_compleeted + "</br> <b>VM issue date:</b> " +
                                    feature.properties.Date_issued_from_VM + "</br> <b>QC date:</b> " +
                                    feature.properties.ACTUAL_Internal_QC_Date + "</br> <b>VM ECD date:</b> " +
                                    feature.properties.VM_ECD_date + "</br><b>General notes:</b> " +
                                    feature.properties.General_notes + "</br>" +
                                    '</br><center><a href="'+ feature.properties.Directory +'" target="_blank">Local directory</a></center></p>' +
                                    '<center><font color="red"><a href="'+ feature.properties.Sharepoint +'" target="_blank">Sharepoint</a></font></center></p>';           
                                    if (feature.properties && feature.properties.popupContent) {
                                        popupContent += feature.properties.popupContent;
                                    }
                                    layer.bindPopup(popupContent);
                                    layer.on({ 
                                    mouseover: function (e) {
                                        this.setStyle({
                                            'fillColor': '#663300',
                                            'weight':11
                                        });
                                    },
                                    mouseout: function (e) {
                                    mdu.resetStyle(this);
                                    }
                                }); //layer.on finish   
                            },
                            filter: function(feature, layer) {   
                                return (feature.properties.Type == "MDU" );
                            }
                            })//.addTo(map);

and afterwards:

  document.querySelector("input[name=vm]").addEventListener('change',  function() {
   if(this.checked) {
  //if (!map.hasLayer(job2)) map.addLayer(job2);   - not needed as the job layer is inactive
if (!map.hasLayer(infill)) map.addLayer(infill);
if (!map.hasLayer(mdu)) map.addLayer(mdu);
if (!map.hasLayer(featuresLayer2)) map.addLayer(featuresLayer2);
if (!map.hasLayer(featuresLayer2a)) map.addLayer(featuresLayer2a);
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);  - not needed as the job layer is inactive
if (map.hasLayer(infill)) map.removeLayer(infill);
if (map.hasLayer(mdu)) map.removeLayer(mdu);
if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
if (map.hasLayer(featuresLayer2a)) map.removeLayer(featuresLayer2a);
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(featuresLayer2)) map.addLayer(featuresLayer2);
    }
   else {
   if (map.hasLayer(infill)) map.removeLayer(infill);
   if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
   }
  });

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

This is the one reasonable solution for now, which works. I believe, that we still are able to make the previous combination running.