1

Continuing the issue with the multiple JSON layer selection with leaflet:

Leaflet select markers from multiple JSON files within the radius given

I was trying to put a step forward and make the layers visible only, when the sode layer is switched on. So I combined the function SelectPoints(lat,lon) with the command .addEventListener('change', function() in order to have highlighted only these values, that already have been switched on. My code looks like this:

function SelectPoints(lat,lon){
var dist = document.getElementById("miles").value;

xy = [lat,lon];  //center point of circle

var theRadius = parseInt(dist) * 1609.34  //1609.34 meters in a mile 
//dist is a string so it's convered to an Interger.

selPts.length =0;  //Reset the array if selecting new points

job.eachLayer(function (layer) {
    // Lat, long of current point as it loops through.
    layer_lat_long = layer.getLatLng();

    // Distance from our circle marker To current point in meters
    distance_from_centerPoint = layer_lat_long.distanceTo(xy);

    // See if meters is within radius, add the to array
    if (distance_from_centerPoint <= theRadius) {
         selPts.push(layer.feature);  
    }
document.querySelector("input[name=bball]").addEventListener('change', 
function() {
            if(this.checked) map.addLayer(job)
              else map.removeLayer(job)
            })

but map is gone...

As you can see in the picture below, despite all layers are switched off, the marker still highlight values within the radius. On top of that I am not aware to which layer my placemark is referred to, because all of them has been highlighted in green.

Is it possible to have them distinguished as per layers given? For instance keep the marker with clear selection within the radius, when all layers are switched off or keep highlighted only these, that has been switched on by side panel on the right?

enter image description here

2

oops, easy fix. In the posted example there are 2 checkboxes, id-'bball' and id='foot', you just need to see if they are 'checked' on before adding them to the selected set. See below for my fix.

    if (distance_from_centerPoint <= theRadius && $('#bball').is(":checked")) {
         selPts.push(layer.feature);  
    }


    if (distance_from_centerPoint <= theRadius && $('#foot').is(":checked")) {
         selPts.push(layer.feature);  
    }
  • Shall I place your code underneath: if(this.checked) map.addLayer(job)? I already replaced if(this.checked) map.addLayer(job) with your code, but the layers are visible even when they're unchecked. – Mariusz Krukar Sep 11 at 13:24
  • Yeah! I know where the error is: – Mariusz Krukar Sep 11 at 13:28
  • 1
    This example was modifying your existing code: Find if (distance_from_centerPoint <= theRadius) than replace it with if (distance_from_centerPoint <= theRadius && $('#bball').is(":checked")) with the Id for the layer. – Bill Chappell Sep 11 at 13:28

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.