I have an application where I create polygons based on values I calculate from points on a map. The polygons are then overlayed on top of a city using a single leaflet FeatureGroup. Another one is then used to draw the border according to a GeoJSON I have with borders for each of the cities where I create these polygons. Also, each polygon belongs to a tier in a tiered system, much like an isopleth.

However, I'd like to cut these polygons so that only what is located inside the city borders is shown. Are there any tricks using Leaflet to achieve that? If at all possible, I'd like to avoid having to use any other package and need to adapt the way my polygons are defined to work with this other package.

This is how my application is looking at the moment:

enter image description here

Since I was using a python server to generate my polygons, I ended up using Shapely to calculate the polygon intersections and only show what's inside the borders.

  • 2
    Leaflet itself has no such capability. I'm also not aware of any Leaflet plugin that could achieve that. The simplest way would be to use intersect module of turf.js library (turfjs.org/docs) when loading GeoJSON. – TomazicM Jul 18 '19 at 18:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.