-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
100 lines (83 loc) · 5 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/* **** Leaflet **** */
var map_opacity = 0.7;
// Base layers
var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', minZoom: 6, maxZoom: 14});
var cartodb = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution">CartoDB</a>', minZoom: 6, maxZoom: 14});
var ortho = L.tileLayer.wms('https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMS/StandardResolution', {layers: 'Raster', minZoom: 6, maxZoom: 14});
var white = L.tileLayer("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAAA1BMVEX///+nxBvIAAAAH0lEQVQYGe3BAQ0AAADCIPunfg43YAAAAAAAAAAA5wIhAAAB9aK9BAAAAABJRU5ErkJggg==", {minZoom: 6, maxZoom: 14});
// Overlay layers (TMS)
var lyr = L.tileLayer('./{z}/{x}/{y}.png', {tms: 1, opacity: map_opacity, attribution: "Krzysztof Dyba", minZoom: 6, maxZoom: 14});
// Map
var map = L.map('map', {
center: [51.808564980592536, 19.249441503918895],
zoom: 14,
minZoom: 6,
maxZoom: 14,
layers: [osm, lyr]
});
var basemaps = {"OpenStreetMap": osm, "CartoDB Positron": cartodb, "Orthophotomap": ortho, "Without background": white}
var overlaymaps = {"Land surface types": lyr}
// Note
var src = 'Materials and methods are described in <b><a href="https://doi.org/10.1016/j.geomorph.2022.108373">doi.org/10.1016/j.geomorph.2022.108373</a></b> <br>Generated by <a href="https://gdal.org/programs/gdal2tiles.html">GDAL2Tiles</a>, Copyright © 2008 <a href="http://www.klokan.cz/">Klokan Petr Pridal</a>, <a href="https://gdal.org/">GDAL</a> & <a href="https://www.osgeo.org/">OSGeo</a> <a href="http://code.google.com/soc/">GSoC</a>';
var note = L.control({position: 'bottomleft'})
note.onAdd = function(map) {
this._div = L.DomUtil.create('div', 'ctl src');
this.update();
return this._div;
};
note.update = function(props) {
this._div.innerHTML = src;
};
note.addTo(map);
// Legend
function getCategoryAttributes(category) {
const attributes = {
'UME': { color: '#490005', hint: 'Uplands, medium Mountains, Elevated' },
'UMI': { color: '#9c6e6c', hint: 'Uplands, medium Mountains, Inner parts' },
'UMV': { color: '#859381', hint: 'Uplands, Mountains, Valleys' },
'UMS': { color: '#b78958', hint: 'Uplands, low Mountains, Slopes/highlands' },
'UHE': { color: '#9b8c6b', hint: 'Uplands, Highlands, Elevated' },
'PRH': { color: '#da9e13', hint: 'Plain, Rolling, High density' },
'PRMu': { color: '#cab443', hint: 'Plain, Rolling, Medium density, upper' },
'PRMl': { color: '#d0ec89', hint: 'Plain, Rolling, Medium density, lower' },
'PRLu': { color: '#d9e1c3', hint: 'Plain, Rolling, Low density, upper' },
'PRLl': { color: '#cdde8b', hint: 'Plain, Rolling, Low density, lower' },
'PDV': { color: '#81a2ac', hint: 'Plain, Dissection, Valleys' },
'PDEu': { color: '#b6bfc1', hint: 'Plain, Dissection, Edges, upper' },
'PDEl': { color: '#8ca59c', hint: 'Plain, Dissection, Edges, lower' },
'PSI': { color: '#b7a0c0', hint: 'Plain, Smooth, Inclined' },
'PSG': { color: '#e1cff1', hint: 'Plain, Smooth, Gently inclined' },
'PSF': { color: '#c7c6cc', hint: 'Plain, Smooth, near-Flat' },
'PFR': { color: '#b9d7c7', hint: 'Plain, near-Flat, Rough' },
'PFD': { color: '#96b69d', hint: 'Plain, near-Flat, Dissections' },
'PFSu': { color: '#91c0b9', hint: 'Plain, near-Flat, Smooth, upper' },
'PFSl': { color: '#9fd8e7', hint: 'Plain, near-Flat, Smooth, lower' },
'default': { color: '#ffffff', hint: 'Placeholder' }
};
return attributes[category] || attributes['default'];
}
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
categories = ['UME', 'UMI', 'UMV', 'UMS', 'UHE', 'PRH', 'PRMu', 'PRMl', 'PRLu', 'PRLl',
'PDV', 'PDEu', 'PDEl', 'PSI', 'PSG', 'PSF', 'PFR', 'PFD', 'PFSu', 'PFSl'],
labels = ['<strong> Land surface types </strong>'];
for (var i = 0; i < categories.length; i++) {
var categoryAttributes = getCategoryAttributes(categories[i])
labels.push(
'<i title="' + categoryAttributes.hint + '"style="opacity:' + map_opacity + ';background:' + categoryAttributes.color + '"></i> ' +
'<span title="' + categoryAttributes.hint + '">' + categories[i] + '</span>'
);
}
div.innerHTML = labels.join('<br>');
console.log(div)
console.log(labels)
return div;
};
legend.addTo(map);
// Scale
L.control.scale({imperial: false}).addTo(map)
// Add to Layers panel
L.control.layers(basemaps, overlaymaps, {collapsed: false}).addTo(map);
// Fit to overlay bounds (SW and NE points with (lat, lon))
map.fitBounds([[48.649153452415646, 24.984812859572443], [54.96797650876942, 13.51407014826535]]);