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.
Add a comment
|
2 Answers
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/
-
The mask effect falls over when panning around as it seems to wait for the tiles to load before masking them. Is there a way around this?– TitanCommented Oct 9, 2014 at 9:19
-
I just noticed that clipping occurs with the L.Mask technique (the one I'm reffering to above) but not with leaflet-maskcanvas (check the demo domoritz.de/vbb-coverage). I will try and understand how they do that.– YaFredCommented Oct 10, 2014 at 12:29
-
geojson.io (tool: draw a polygone). When you close the shape, you'll be able to copy/paste the value (in the right view)– YaFredCommented May 19, 2020 at 13:20
See the leaflet-maskcanvas and L.Mask plugins
