Highlight polygon
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script>
<div id="map" ></div>
CSS
#map {
height: 400px;
}
JavaScript
// credits: https://github.com/turban/Leaflet.Mask
L.Mask = L.Polygon.extend({
options: {
stroke: false,
color: '#333',
fillOpacity: 0.5,
clickable: true,
outerBounds: new L.LatLngBounds([-90, -360], [90, 360])
},
initialize: function (latLngs, options) {
var outerBoundsLatLngs = [
this.options.outerBounds.getSouthWest(),
this.options.outerBounds.getNorthWest(),
this.options.outerBounds.getNorthEast(),
this.options.outerBounds.getSouthEast()
];
L.Polygon.prototype.initialize.call(this, [outerBoundsLatLngs, latLngs], options);
},
});
L.mask = function (latLngs, options) {
return new L.Mask(latLngs, options);
};
// Polygon created with http://geojson.io/
var Island = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
2.548828125,
51.055207338584964
],
[
1.6259765625,
50.84757295365389
],
[
1.5380859375,
50.078294547389426
],
[
0.2197265625,
49.696061819115634
],
[
-0.59326171875,
49.33944093715546
],
[
-1.2744140625,
49.63917719651036
],
[
-1.9335937499999998,
49.681846899401286
],
[
-1.3842773437499998,
48.58932584966972
],
[
-2.3291015625,
48.61838518688487
],
[
-3.18603515625,
48.8936153614802
],
[
-4.658203125,
48.66194284607008
],
[
-4.8779296875,
...