index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet Mask</title>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css" />
<link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css" />
<style type="text/css">
html, body, #map { width: 100%; height: 100%; margin: 0; background: #fff; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js"></script>
<script src="//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js"></script>
<script type="text/javascript" src="L.Mask.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([59.91, 10.75], 10);
L.tileLayer('//{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="//stamen.com">Stamen Design</a>, under <a href="//creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="//openstreetmap.org">OpenStreetMap</a>, under <a href="//creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
}).addTo(map);
var mask = new L.Draw.Mask(map).enable();
map.on('draw:created', function(evt){
var layer = evt.layer;
map.addLayer(layer);
layer.editing.enable();
});
</script>
</body>
</html>
L.Mask.js
L.Mask = L.Rectangle.extend({
options: {
stroke: false,
color: '#333',
fillOpacity: 0.5,
clickable: true,
outerBounds: new L.LatLngBounds([-90, -360], [90, 360])
},
initialize: function (latLngBounds, options) {
L.Polygon.prototype.initialize.call(this, [this._boundsToLatLngs(this.options.outerBounds), this._boundsToLatLngs(latLngBounds)], options);
},
getLatLngs: function () {
return this._holes[0];
},
setLatLngs: function (latlngs) {
this._holes[0] = this._convertLatLngs(latlngs);
return this.redraw();
},
setBounds: function (latLngBounds) {
this._holes[0] = this._boundsToLatLngs(latLngBounds);
return this.redraw();
}
});
L.mask = function (latLngBounds, options) {
return new L.Mask(latLngBounds, options);
};
if (L.Draw && L.Draw.SimpleShape) {
L.Draw.Mask = L.Draw.SimpleShape.extend({
statics: {
TYPE: 'mask'
},
options: {
shapeOptions: {
stroke: false,
color: '#333',
fillOpacity: 0.5,
clickable: true
}
},
initialize: function (map, options) {
this.type = L.Draw.Mask.TYPE;
this._initialLabelText = 'Click and drag to draw mask';
L.Draw.SimpleShape.prototype.initialize.call(this, map, options);
},
_drawShape: function (latlng) {
if (!this._shape) {
this._shape = new L.Mask(new L.LatLngBounds(this._startLatLng, latlng), this.options.shapeOptions);
this._map.addLayer(this._shape);
} else {
this._shape.setBounds(new L.LatLngBounds(this._startLatLng, latlng));
}
},
_fireCreatedEvent: function () {
var mask = new L.Mask(this._shape.getBounds(), this.options.shapeOptions);
L.Draw.SimpleShape.prototype._fireCreatedEvent.call(this, mask);
}
});
}