Filtering GeoJSON by lat-long in Leaflet

Question

I'm ingesting a large geoJSON file in leaflet with somewhere near 19,000 features (points). This results in a massive amount of clutter on the map and is unmanageable.

The goal is to use geolocation to mark my location, draw a 5nm circle around it, and only display geoJSON features that reside within that geometry.

A condensed version of my project is: https://jsfiddle.net/blintster/d2ucock2/3/

I've worked out finding my location and drawing the circle, but I'm not able to parse the geoJSON features on location. Ideally the output would function like this: https://esri.github.io/esri-leaflet/examples/spatial-queries.html However, that method only seems to apply to L.esri.FeatureLayer and this is a locally imported geoJSON.

The geoJSON layer in question is below where [airports] is the 19,000 entries:

  var allairportsLayer = L.geoJson([airports],  {
    filter: airportFilter,
    onEachFeature: function(feature, layer) {
      layer.bindPopup(feature.properties.Type + " - " + feature.properties.FacilityName + "<br>Contact Info: " + feature.properties.Manager + "<br> Phone: " + feature.properties.ManagerPhone);
    }
  }).addTo(map);

  function airportFilter(feature) {
  if (feature.properties.State === "MD") return true
  };

I was able to pair down the results slightly by using the filter method by state but that only allowed me to determine if an attribute meets a specified criteria.

I'v also tried the following method: https://www.mapbox.com/mapbox.js/example/v1.0.0/marker-radius-search/ with no luck.

Does anyone know of any additional methods I could try to parse the data so it only shows points that reside within a geometry?

Answer 1

However, that method only seems to apply to L.esri.FeatureLayer and this is a locally imported geoJSON.

esri-leaflet piggybacks off ArcGIS Server and ArcGIS Online services which provide a backend hosted database that supports spatial queries.

obviously Esri isn't the only option, but your use-case is a perfect example of a situation when it is beneficial not to fetch an entire dataset that you don't plan on displaying.

1. you could create a arcgis developer account and then sign into arcgis.com to upload your .geojson file as a new hosted service for free.

2. you could find another hosted service that provides comparable functionality

3. you could run your own server, install your own PostGIS database and hook up spatial web queries yourself.

4. you could continue to download all 19,000 features on page load and either:

   a) simplify your search and test whether the relevant L.latLngBounds.contains() each point.

   b) use something like turf to test the relationship with an actual circle. (one caveat worth mentioning here is that leaflet doesn't include any built in methods for generating actual L.circle geometry so you'd need more custom logic for that too. i wrote something similar here that you are welcome to ripoff).