Sync POI list with map content

[bmcbride]

Sync POI list with map content

[bmcbride]

Thanks for the suggestion. I'll have to think about this some more. On the one hand, it's great functionality for long lists where you only care about what is in the map view. Sometimes though, it's nice to be able to use the list to navigate the map itself- do a quick search and jump to the location, even if it's not on the map. This is especially true if you trigger geolocation to zoom to the user's location on mobile devices.

[nilem]

Hi! Just to say that I'm building an app using BootLeaf and I would use such a feature described by dinResita. But you also have a good point : we don't necessarly always want this behavior. It's depend of the context.

[bmcbride]

This could be accomplished by registering a map moveend event to check which points are contained in the current map bounds. I'm still thinking through the best way to include this in the template, but in the meantime, see below for the code to implement this.

map.on("moveend", function (e) {
  $("#feature-list tbody").empty();
  theaters.eachLayer(function (layer) {
    if (map.getBounds().contains(layer.getLatLng())) {
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '"><td style="vertical-align: middle;"><img width="16" height="18" src="assets/img/theater.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
    }
  });
  museums.eachLayer(function (layer) {
    if (map.getBounds().contains(layer.getLatLng())) {
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '"><td style="vertical-align: middle;"><img width="16" height="18" src="assets/img/museum.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
    }
  });
  featureList = new List("features", {
    valueNames: ["feature-name"]
  });
  featureList.sort("feature-name", {
    order: "asc"
  });
});