Leaflet: inverse/reverse polygon style

Question

I have a province boundary polygon in geojson format. What I want is to show this province on the map with the non-province area greyed out (opaque) and the province area shown without style. How can I achieve this?

Answer 1

From the Polygon api documentation:

You can also create a polygon with holes by passing an array of arrays of latlngs, with the first latlngs array representing the exterior ring while the remaining represent the holes inside.

So I think you can use that to make a really big polygon for the exterior ring, with the province cut out in as a hole inside. Of course, if you zoom to a level bigger than the big polygon, that's gonna look awkward. Perhaps best set a min zoom level so that this won't happen.

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 the outer polygon to cover the entire world:

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