Leaflet – Combining Leaflet with DataTables to Show Attributes Based on Map Extent

leaflet

I've seen a great implementation of both Leaflet and DataTables at the UK Centre for Ecology and Hydrology's National River Flow Archive (see here https://nrfa.ceh.ac.uk/data/search).

How might it be possible to implement a solution which updates the contents of the DataTable beneath depending upon which features in the map are visible?

Note how as you zoom in the DataTable beneath live updates.

This is probably the best implementation of both of these libraries together which I've yet come across. Might it be related to the extent of the map portal?

I'm not looking for any wholesale code here – but an understanding of how to link the two up. Or other examples of where this has been implemented.

Best Answer

Two examples that might apply: https://github.com/chillly/Leaflet-Toads no longer an active demo site but the code shows you how to get the extents and through an ajax call, get the toads (points) in the current extents, and on change drop them and get the new points. Basically, you would also drop your table and repopulate with the point attributes.

https://github.com/fulcrumapp/geojson-dashboard/ Is a working site with code that does what you describe, check out it's demo.