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.

  • Since each station has a marker on the map, it's quite easy to update table to show only those stations which have visible markers on the map, i.e., which are within bounding box of the view. – TomazicM Apr 25 at 15:10

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.