I'm building a cycle touring map in leaflet.js, with subjective information overlaid as markers, along the lines of "this is a great road", "this town is quite nice" etc. To avoid information overload, I want to only show the most prominent markers at a given zoom level (eg, show awesome roads highlighted at zoom 9, good roads at 11, and all road information, including negative comments, at 13+)

I have two questions here:

  1. Is there a recognised idiom or design pattern for this kind of thing? I'm quite happy to manually decide the prominence of each marker, so I don't need any kind of clustering algorithm. There'll be maybe a couple of hundred for the whole state, so it's manageable.

  2. How can I implement this in Leaflet? My obvious thought is to attach a handler to map.zoomend() and simply show or hide the relevant markers. Is there a better way?

1 Answer 1


I think there is no better way than to handle zoomend event. To group markers by zoom levels, use L.LayerGroup: turning them on and off will be easier.

Calling map.removeLayer() or map.addLayer() twice won't produce any errors or add a layer twice: there is an internal hash that prevents such things. So you can just have a bunch of if (zoom > 6 && zoom <= 10 ) map.addLayer(zoom6_10); else map.removeLayer(zoom6_10); in the event handler.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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