Leaflet markers from multiple JSON layer within the radius given after layer selection

Question

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?

Answer 1

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);  
    }