leaflet-environmental-layers
Version:
[](https://gitpod.io/#https://github.com/publiclab/leaflet-environmental-layers/) [](http
215 lines (166 loc) • 6.49 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">
L.Icon.MapKnitterIcon = L.Icon.extend({
options: {
iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [12, 21],
iconAnchor: [6, 21],
popupAnchor: [1, -34],
shadowSize: [20, 20]
}
});
L.icon.mapKnitterIcon = function () {
return new L.Icon.MapKnitterIcon();
};
L.LayerGroup.LayerCode = L.LayerGroup.extend(
{
options: {
url: 'https://mapknitter.org/map/region/Gulf-Coast.json?minlon=-98.8&minlat=23.6&maxlon=-79.1&maxlat=31.8',
clearOutsideBounds: true ,
},
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(), northeast = self._map.getBounds().getNorthEast() , southwest = self._map.getBounds().getSouthWest() ;
var $ = window.jQuery;
var MapKnitter_url = "https://mapknitter.org/map/region/Gulf-Coast.json?minlon="+(southwest.lng)+"&minlat="+(southwest.lat)+"&maxlon="+(northeast.lng)+"&maxlat="+(northeast.lat);
if(typeof self._map.spin === 'function'){
self._map.spin(true) ;
}
$.getJSON(MapKnitter_url , function(data){
self.parseData(data) ;
if(typeof self._map.spin === 'function'){
self._map.spin(false) ;
}
});
})();
},
getMarker: function (data) {
var redDotIcon =new L.icon.mapKnitterIcon();
var lat = data.lat ;
var lng = data.lon;
var title = data.name ;
var location = data.location ;
var author = data.author ;
var url = "https://publiclab.org/profile/" + author ;
var map_page = "https://mapknitter.org/maps/"+ title ;
var mapknitter ;
if (!isNaN(lat) && !isNaN(lng) ){
mapknitter = L.marker([lat , lng] , {icon: redDotIcon}).bindPopup("<strong>Title : </strong>"+ "<a href=" + map_page + ">" + title + "</a>" + "<br><strong>Author :</strong> " + "<a href="+url+">" + author +"</a>" + "<br><strong>Location : </strong>" + location + "<br><strong> Lat : </strong>" + lat + " , <strong> Lon : </strong>" + lng +"<br><i>For more info on <a href='https://github.com/publiclab/leaflet-environmental-layers/issues/10'>MapKnitter Layer</a>, visit <a href='https://mapknitter.org/'>here<a></i>" ) ;
}
return mapknitter ;
},
addMarker: function (data) {
var marker = this.getMarker(data),
key = data.id;
if (!this._layers[key]) {
this._layers[key] = marker;
this.addLayer(marker);
}
},
parseData: function (data) {
for (i = 0 ; i < data.length ; i++) {
this.addMarker(data[i]) ;
}
if (this.options.clearOutsideBounds) {
this.clearOutsideBounds();
}
},
clearOutsideBounds: function () {
var bounds = this._map.getBounds(),
latLng,
key;
for (key in this._layers) {
if (this._layers.hasOwnProperty(key)) {
latLng = this._layers[key].getLatLng();
if (!bounds.contains(latLng)) {
this.removeLayer(this._layers[key]);
delete this._layers[key];
}
}
}
}
}
);
L.layerGroup.layerCode = function (options) {
return new L.LayerGroup.LayerCode(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 MapKnitter = L.layerGroup.layerCode().addTo(map) ;
</script>
</body>
</html>