Select markers from multiple JSON layers within some radius

Question

I would like to combine at least 2 json layers in order to make all their markers researchable within some radius after clicking.

There are two files, which in code looks like this:

var url = "Peterborough.json";
var url2 = "Test.json";

then code looks like in the example under this link:

https://gis.stackexchange.com/questions/334170/leaflet-select-markers-from-multiple-json-files-within-the-radius-given/334192#334192

down to the moment, where we must set the SelectPoints(lat,lon) function.

Afterwards I did something 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);  
}

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

});

But unfortunately I got a blank space instead (even map dissapears).

What can be wrong here?

I've red about the iteration of this function here:

Leaflet eachLayer function does not iterate through all Layers

but it haven't brought a clear solution to me.

I want to have these 2 layers eligible to be selected after clicking the marker instead of 1 only.

When I use the 2nd JSON file as a layer and copy the

$.getJSON(url2, function(data) {

code, then I see all clearly on the map, but they are not selected after clicking.

Could be possible to clarify it?

score 0 · Answer 1 · answered Sep 09 '19 at 14:46

It looks like I placed the ; in a wrong place.

The code should look like this:

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

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

according to the example:

http://www.gistechsolutions.com/leaflet/DEMO/sports/

Select markers from multiple JSON layers within some radius

1 Answers1