leaflet map and table-list

1,074 views
Skip to first unread message

epp.inf...@gmail.com

unread,
Jan 14, 2015, 11:17:54 AM1/14/15
to leafl...@googlegroups.com

I would ask you if someone knows a tutorial or an example that combine a map and a table.

I have a map made with Leaflet. Data is external, from a geojson. There are 4 categories of entries and I have 4 buttons that show/hide elements according to a feature.propierty.

Is there a way, example, tutorial, that explain how to add a table outside the map that updates itself when a filter is applied to the map?

For example: json contains a list of places in 4 categories: 'cafes', 'restaurants', 'bars', 'pubs'. Without any filter, table and map show the full list of places. But when 'cafe' filter is applied in the map, the list only also updates to show all the entries where feature.propierties == cafe. Or vice versa, if a filter is applied in the table (as in datatables.js), can the map update and show only what is shown in the filtered list?

And asking more, is there a way to connect rows of this table to a point in the map? In other words, if you have the full list and see 'cafe central', is it possible when you click in the name that the map centers in this point and opens its popup infowindow?

Thank you and sorry for my strange English.

Bryan McBride

unread,
Jan 15, 2015, 10:31:37 PM1/15/15
to leafl...@googlegroups.com
You might want to check out some of the mapbox.js examples here: https://www.mapbox.com/mapbox.js/example/v1.0.0/marker-list-click/ and https://www.mapbox.com/mapbox.js/example/v1.0.0/multiple-marker-filters/. The mapbox.js library is built on Leaflet, so much of the functionality is the same. Best of luck!

Bryan
Reply all
Reply to author
Forward
0 new messages