Inspired by http://embed.plnkr.co/1I7dIw/, I'm trying to mask the remainder of the map outside of various polygons. But I'm encountering some challenges seemingly with the vertices. Could it be that some of the polygons are not closed so the masking is struggling with the start / stopping? Within each polygon the start / stop point is the same.
Or does the issue lie with the scripting, namely L.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);
};
Looking for any help possible.
Demo ... https://jsfiddle.net/q7wo0ndf/7/ (apologies for being heavy-laden)
The L.mask
Class is correct, you have a problem with your data.
Let leaflet work for you:
var sanbartolome_001 = ...;
var sanbartolome_002 = ...;
...
var options = {
style: function(feature) {
return {
"color": "black",
"weight": 3,
"opacity": 1,
"fillColor": "transparent",
"fillOpacity": 0.0
};
}
};
var latLngs = [];
var rfc_nerfc_001 = new L.geoJson(sanbartolome_001.features, options).addTo(map);
var rfc_nerfc_002 = new L.geoJson(sanbartolome_002.features, options).addTo(map);
var rfc_nerfc_003 = new L.geoJson(sanbartolome_003.features, options).addTo(map);
var rfc_nerfc_004 = new L.geoJson(sanbartolome_004.features, options).addTo(map);
var rfc_nerfc_005 = new L.geoJson(sanbartolome_005.features, options).addTo(map);
latLngs.push(rfc_nerfc_001.getLayers()[0].getLatLngs());
latLngs.push(rfc_nerfc_002.getLayers()[0].getLatLngs());
latLngs.push(rfc_nerfc_003.getLayers()[0].getLatLngs());
latLngs.push(rfc_nerfc_004.getLayers()[0].getLatLngs());
latLngs.push(rfc_nerfc_005.getLayers()[0].getLatLngs());
var rfc_nerfc_000 = L.mask(latLngs).addTo(map);