leaflet-environmental-layers
Version:
[](https://gitpod.io/#https://github.com/publiclab/leaflet-environmental-layers/) [](http
219 lines (164 loc) • 6.36 kB
HTML
<html lang="en">
<head>
<title>Leaflet Environmental Layers</title>
<script src="../../../node_modules/leaflet/dist/leaflet.js"></script>
<script src="../../../node_modules/leaflet-blurred-location/dist/Leaflet.BlurredLocation.js"></script>
<script src="../../../node_modules/leaflet.blurred-location-display/dist/Leaflet.BlurredLocationDisplay.js"></script>
<script src="../../../dist/LeafletEnvironmentalLayers.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link href="../../../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
<link href="../../../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
<style>
#map { position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(51,51,51,0.7);
z-index: 10; }
</style>
<style>
.leaflet-control-layers {
width: 270px;
overflow: auto;
}
.leaflet-control-layers:after {
content: "Turn on layers";
display: block;
color: black;
background-color: white;
font-size: 16px;
padding-bottom: 10px;
padding-left: 10px;
margin-left: 70px;
}
.leaflet-control-layers-toggle {
width: 44px;
height: 44px;
padding-left: 70px;
padding-bottom: 25px;
margin-right: 65px;
display: inline;
}
</style>
</head>
<body>
<script type="text/javascript">
/* indigenous territories layer */
L.LayerGroup.IndigenousLayers = L.LayerGroup.extend(
{
options: {
popupOnMouseover: false,
clearOutsideBounds: false,
target: '_self',
},
initialize: function (options) {
options = options || {};
L.Util.setOptions(this, options);
this._layers = {};
},
onAdd: function (map) {
map.on('moveend', this.requestData, this);
this._map = map;
this.requestData();
},
onRemove: function (map) {
map.off('moveend', this.requestData, this);
if(typeof map.spin === 'function'){
map.spin(false) ;
}
this.clearLayers();
this._layers = {};
},
requestData: function () {
var self = this ;
(function() {
var zoom = self._map.getZoom(), origin = self._map.getCenter() ;
var $ = window.jQuery;
var ILL_url;
ILL_url = "https://native-land.ca/api/index.php?maps=territories&position=" + parseInt(origin.lat) + "," + parseInt(origin.lng);
if(typeof self._map.spin === 'function'){
self._map.spin(true) ;
}
$.getJSON(ILL_url , function(data){
self.parseData(data) ;
if(typeof self._map.spin === 'function'){
self._map.spin(false) ;
}
});
})();
},
getPoly: function (data) {
var coords = data.geometry.coordinates;
for(var j = 0; j < coords[0].length; j++) {
var temp = coords[0][j][1];
coords[0][j][1] = coords[0][j][0];
coords[0][j][0] = temp;
}
var nme = data.properties.Name;
var frNme = data.properties.FrenchName;
var desc = data.properties.description;
var frDesc = data.properties.FrenchDescription;
var clr = data.properties.color;
var key = data.id;
var ill_poly ;
if (!isNaN((coords[0][0][0]) && !isNaN((coords[0][0][1]))) ){
ill_poly = L.polygon(coords, {color: clr}).bindPopup("<strong>Name : </strong>" + nme + "<br><strong>Description: </strong> <a href=" + desc + ">Native Lands - " + nme + "</a><br><i>From the <a href='https://github.com/publiclab/leaflet-environmental-layers/pull/77'>Indigenous Territories Inventory</a> (<a href='https://publiclab.org/notes/sagarpreet/06-06-2018/leaflet-environmental-layer-library?_=1528283515'>info<a>)</i>") ;
}
return ill_poly ;
},
addPoly: function (data) {
var poly = this.getPoly(data), key = data.id ;
if (!this._layers[key]) {
this._layers[key] = poly;
this.addLayer(poly);
}
},
parseData: function (data) {
if (!!data){
for (var i = 0 ; i < data.length ; i++) {
this.addPoly(data[i]) ;
}
if (this.options.clearOutsideBounds) {
this.clearOutsideBounds();
}
}
},
clearOutsideBounds: function () {
var bounds = this._map.getBounds(),
polyBounds,
key;
for (key in this._layers) {
if (this._layers.hasOwnProperty(key)) {
polyBounds = this._layers[key].getBounds();
if (!bounds.intersects(polyBounds)) {
this.removeLayer(this._layers[key]);
delete this._layers[key];
}
}
}
}
}
);
L.layerGroup.indigenousLayers = function (options) {
var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
map.fitBounds(polygon.getBounds());
return new L.LayerGroup.IndigenousLayers(options);
};
</script>
<div id="map"></div>
<script>
var map = L.map("map").setView([23, 77], 3);
var baselayer = L.tileLayer(
"https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png",
{
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map) ;
var IndigenousLandsTerritories = L.layerGroup.indigenousLayers().addTo(map);
</script>
</body>
</html>