2

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?

  • What do you mean by 'link on the map' – Alex Leith Jan 14 '15 at 0:25
  • do i understand correctly that you want to write out a list of cities on the webpage that are within the extent of the map that updates as people pan and zoom? are you currently displaying basemap image tiles only or do you already have a hold on a dataset that contains all the individual city features that you're interested in querying? – John Gravois Jan 14 '15 at 21:20
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.

0

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.

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.