Showing link for every city at different zoom levels using Leaflet?

Question

I have a Leaflet map that I am using to render a map of the U.S. The map will have specific zoom levels. For example, when the map first loads it will show major U.S. cities. Then if you zoom in it will show more cities on the point where you zoomed. I already have this set up in Leaflet using Mapbox for tiles.

The problem is that I need to be able to show a link on the map for every city - only on the cities that are visible on the map at the current zoom level.

Is there any way for me to know which cities are shown at the current zoom level? If not, is what I'm trying to accomplish possible with d3 or any other libraries or plugins?

Answer 1

If the major cities data layer has knowledge of the zoom level they should be shown at, you could filter the links based by if they are in bounds and if the city is visible at that zoom level.

Brian McBride's Bootleaf has a great example of how to generate and filter a list of links for features visible in the map view. I'm thinking you could add an additional criteria for zoom level.

for example:

if (map.getBounds().contains(layer.getLatLng()) && 
    layer.zoomLevel <= map.getZoom() ) {
    // make your list of links.
  }

I can improve my answer if you provide more information about what the major cities data looks like and what format it is.

Answer 2

You might want to look at UTFGrid, a format to encode, among many things, clickable areas or points in an efficient, tiled manner. UTFGrid was created by Mapbox, so it's supported by tools you already use.