Dim/Hide rest of map around country with leaflet.js

Question

Is it possible to dim or hide the "rest of the world" except one country on a standard leaflet.js map? Mabye overlay out with some kind of "inverted polygon" with the contours of the country? Any code examples or links would be appreciated.

Answer 1

Expanding @tmcw's answer ...

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

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.

The first polygon will be a rectangle as big as 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/