How do I filter GeoJSON/TopoJSON data by coordinates?

Question

I have large files (~100mb each) with GeoJSON/TopoJSON data.

These have states and counties boundaries. States layer loads just fine as it doesn't have so much data, but the one with counties just makes page crash in Chrome.

So, files themselves load from network and are parsed properly, but when it comes to putting them on a Leaflet map, it freezes and crashes.

As a solution, I wonder if I can filter features by their coordinates? I can get viewport boundaries of the map.

Are there methods I can filter features with coordinates that are inside some boundaries?

This way I could filter only those that should be rendered in the current view and ignore the rest, then repeat this routine on map/zoom.

I use TufJS for all my geospatial calculations on GeoJSON. Check out the inside function: turfjs.org/docs/#inside — shotor

treecon treecon · Accepted Answer · 2017-06-29T15:13:38

First of all, Leaflet has a getBounds() method that you can use in order to load only the features that are inside the Bounding Box. This could be done by triggering the getBounds() method when the map "moves" (zoom, dragging), using the moveend event.

So, basically:

map.on('moveend', function() {
map.getBounds()
//erase the features you had on the map
//Then load on the map only the features with coordinates inside the Bounging Box. 
}

Of course, the above is just an approach. Every time the map "moves", the previous feautures are erased and new ones are loaded. It may result to slow loading of features but you may have to live with it for so large files.

Also, you can experiment with the code by, for example, loading the new features and then erasing the old. In addition, you can load features for a Box bigger than the Bounding Box.

How do I filter GeoJSON/TopoJSON data by coordinates?

1 Answers