When making a Leaflet map,how can pull and convert the GeoJSON coordinates to a latLng?

Question

I'm making a map using Leaflet, and populating the map with data from a GeoJSON file. I want to use the distanceTo function, but it requires a latLng object. Is there a way to convert the GeoJSON's properties.geometry.coordinates into latLng?

I have an array of 31 coordinates, from using the push() method on the onEachLayer:

var coords = [];

onEachFeature : function(feature,layer) {
 coords.push(feature.geometry.coordinates)
 //console.log(coords)...

After running that, the coords array is populated with the array for each coordinate. Is there a way to 'convert' this array of arrays to a latLng object so ditanceTo can be used?

End goal is to run the latLng objects through a loop using distanceTo, so that each popup displays the distance from the center point.

     var low = L.geoJson(hosp, {    
     pointToLayer: function(feature,latlng) {
      return L.circleMarker(latlng, {
            color: 'yellow',
             weight: 2,
             fillColor: 'green',
             fillOpacity: .7,
             radius:9

         });
     },

     filter: function (feature, layer) {
         if(feature.properties.DAILY_PAT <= '600'){
             return feature;}
     },


   onEachFeature : function(feature,layer) {
     coords.push(feature.geometry.coordinates)
     //console.log(coords)

     layer.on('click',function(){

       layer.bindPopup("<b>Low Enrollement </b><br>"+"<b>School Name: </b>" 
           + feature.properties.FACILITY_N+"<br><b># of Students: </b>"
           + feature.properties.DAILY_PAT).openPopup()
       });  
     }
    }).addTo(map);

score 0 · Answer 1 · answered Apr 23 '19 at 04:21

Why don't you create the coordinates array with Leaflet's LatLng object?

var coords = [];

onEachFeature : function(feature,layer) {
  var coordinates = feature.geometry.coordinates;
  coords.push(L.LatLng(coordinates[1], coordinates[0])); // paramter's depending on your object
}

Then, use somewhat like:

// suppose, centerCoordinates is LatLng object as well
centerCoordinates.distanceTo(coords[0]);

link to LngLat object on Leaflet: https://leafletjs.com/reference-1.4.0.html#latlng
link to distanceTo method on LngLat: https://leafletjs.com/reference-1.4.0.html#latlng

score 0 · Answer 2 · answered Apr 23 '19 at 07:17

Since you're spawning L.CircleMarkers, and L.CircleMarkers have a getLatLng() method, you can forego handling the coordinates yourself. Simply refer to the CircleMarker instance when calculating the distance, e.g.:

onEachFeature : function(feature,layer) {
  var distance = layer.getLatLng().distanceTo(centerPoint);
  layer.on('click',function(){
    layer.bindPopup("Distance to center: " + distance);
  });
}

Note that, in this case, the distance variable exists in a scope unique for each feature, so there's no need for closures. The calls to the onEachFeature() callback act as a closure here.

When making a Leaflet map,how can pull and convert the GeoJSON coordinates to a latLng?

2 Answers2