Leaflet map distance from the onclick marker

Question

Here is the part of working code:

  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 && $('#cf').is(":checked")) {
     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 && $('#vm').is(":checked")) {
     selPts.push(layer.feature);  
}
})

job3.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 && $('#bt').is(":checked")) {
     selPts.push(layer.feature);  
}
})

but it looks like it's going to be repeatable over next few layers. So far is only 3 layers job, job2 and job3, what doesn't look bad, but I am worried about the future.

Does anyone knows how to make this code a bit shorter?

Thanks & Regards,

Answer 1

A short review;

• selPts.length = 0; //Reset the array if selecting new points always resets the array, even if no points will be added, also selPts = [] is more idiomatic
• Seems like xy is not declared there, and it probably should be. Nor is selPts
• I feel center describes more accurately the purpose of xy
• Idiomatic JavaScript uses lowerCamelCase, so layer_lat_long -> layerLatLong etc.
• In the end I went with layerLatLng since you get it from a function called getLatLng
• I only knew selPts was selectedPoints due to comments, I think you should spell it out completely
• You can extract the common logic into a function and pass that function to .eachLayer()

Obligatory rewrite:

function SelectPoints(latitude, longitude) {
  var dist = document.getElementById("miles").value,
    theRadius = parseInt(dist, 10) * 1609.34; //1609.34 meters in a mile

  center = [latitude, longitude]; //center point of circle
  selectedPoints.length = []; //Reset the array if selecting new points

  function updateSelectedPoints(layer){
    // Lat, long of current point as it loops through.
    layerLatLng = layer.getLatLng();
    // Distance from our circle marker To current point in meters
    distanceFromCenter = layerLatLng.distanceTo(center);
    // See if meters is within radius, add the to array
    if (distanceFromCenter <= theRadius){
      selectedPoints.push(layer.feature);
    }
  }

  if($('#cf').is(":checked")){
    job.eachLayer(updateSelectedPoints);
  }
  if($('#vm').is(":checked")){
    job2.eachLayer(updateSelectedPoints);
  }
  if($('#bt').is(":checked")){
    job3.eachLayer(updateSelectedPoints);
  }
}