I have created a map using leaflet, with polygons. Each polygon has its proper color(style) based on the number of inhabitants. please see the following example: Map

I want to merge polygons as I zoom out. for example: after every 2 zoom levels, I want to aggregate 2 adjacent polygons into one, where the inhabitant number of the new polygon is the addition of the volumes of the previous 2 aggregated polygons. I found that there is a method called turf.union that is able to merge polygons. But the issue that I have is in term of the algorithm that will be identifying adjacent polygons and returning them. How can I achieve that? is there any library that can help me achieve that ?


I cannot see a solution to make it on the fly in Javascript. The key word is generalization. So I'd suggest to rather 1) create your generalized layers using some GIS tools and (2) to display them in your Leaflet map depending on the zoom levels.

I don't have an automated solution for (1). Have a look at this post. If there is not a lot of data, you may do it manually in a desktop GIS software.

For (2), you can add/remove layers in a leaflet map using something like:

if (map.getZoom() > zoom1 && map.hasLayer(myLayerforZoom0)) 
if (map.getZoom() < zoom1 && map.hasLayer(myLayerforZoom1))

Hope it helps.


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.