Dim / Hide the rest of the map nationwide using leaflet.js

Question

Is it possible to put out or hide the "rest of the world", except for one country, on a standard .js flyer map? Is Mabye superimposed on some kind of “inverted polygon” with the contours of the country? Any code samples or links will be appreciated.

Answer 1

@Tmcw answer extension ...

The secret is to draw a polygon using the property described at http://leafletjs.com/reference.html#polygon

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

The first polygon will be a rectangle the size of the map itself, the hole will be the country you want to highlight.

L.polygon( [outerBoundsLatLngs, latLngs] ); 

Here is a working example: http://jsfiddle.net/FranceImage/1yaqtx9u/

Answer 2

See leaflet-maskcanvas and L.Mask plugins