Leaflet: Reverse / Reverse Polygon

Question

I have a border area polygon in geographic information format. I want to show this province on a map with a non-provincial area highlighted in gray (opaque) and a provincial area shown without style. How can i achieve this?

Answer 1

From the api polygon documentation :

You can also create a polygon with holes by passing an array of latlngs arrays, with the first latlngs array representing the outer ring, while the rest are holes inside.

So, I think you can use this to make a really big polygon for the outer ring, and the province is cut out like a hole inside. Of course, if you zoom in to a level larger than the large polygon, it will be inconvenient. It might be best to set a minimum scale to prevent this from happening.

var polygon = L.polygon( [[[52, -1], [52, 1], [50, 1], [50, -1]], //outer ring [[51.509, -0.08], [51.503, -0.07], [51.51, -0.047]]] // cutout ).addTo(map); 

Jsfiddle

Or set an external polygon to cover the whole world:

 [[90, -180], [90, 180], [-90, 180], [-90, -180]]