-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (156 loc) · 6.24 KB
/
index.html
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./assets/lib/leaflet/leaflet.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
</head>
<body style="margin: 0px;">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="map" style="height: 100vh; width: 100%;"></div>
<div class="attributionDiv" id="disclaimerText">
<span class="attributionText">The designations employed and the presentation of material on the map do not imply the
expression of any opinion whatsoever on the part of the European Union concerning the legal status of any country,
territory or area or of its authorities, or concerning the delimitation of its frontiers
or boundaries. Kosovo* - This designation is without prejudice to positions on status, and is in line with UNSCR
1244/1999 and the ICJ Opinion on the Kosovo declaration of independence.
<button type="button" class="close" aria-label="Close" onclick="hideDisclaimer()">
<span aria-hidden="true">×</span>
</button>
</span>
</div>
<div class="attributionDiv" id="sourcesText">
<span class="attributionText"><button type="button" class="close" aria-label="Close" onclick="hideSources()">
<span aria-hidden="true">×</span>
</button>
<a href="https://ec.europa.eu/eurostat/web/gisco/geodata/reference-data" id="referenceDataButton" target="_blank"
role="button">See reference data</a>
</span>
</div>
<table></table>
<script src="./assets/lib/leaflet/leaflet.js"></script>
<!-- <script src="./lib/leaflet.markercluster.js"></script> -->
<script src="./assets/lib/d3.min.js"></script>
<script src="./assets/lib/proj4-compressed.js"></script>
<script src="./assets/lib/proj4leaflet.js"></script>
<script>
let footprintColor = "blue";
let hoverColor = "yellow";
//get grid
let request = new XMLHttpRequest();
request.open("GET", "https://raw.githubusercontent.com/eurostat/Copernicus-DEM-viewer/master/assets/json/Raster_grid.json", true);
request.onload = () => {
if (request.status >= 200 && request.status < 400) {
let footprintsJson = JSON.parse(request.responseText);
//define basemap(s)
let tiles = L.tileLayer("https://gisco-services.ec.europa.eu/maps/tiles/OSMPositronBackground/EPSG4326/{z}/{x}/{y}.png", {
maxZoom: 18,
});
let labels = L.tileLayer("https://gisco-services.ec.europa.eu/maps/tiles/OSMPositronLabels/EPSG4326/{z}/{x}/{y}.png", {
maxZoom: 18,
});
tiles.layerClass = "basemap";
labels.layerClass = "basemap";
//define layers
let footprints = L.layerGroup();
let defaultRadius = 2000; //metres
let map = L.map("map", {
center: L.latLng(42, 5),
minZoom: 1,
maxZoom: 4,
zoom: 2,
layers: [tiles, labels, footprints],
renderer: L.canvas(),
// crs: crs3035,
crs: L.CRS.EPSG4326,
attributionControl: false,
});
map.fitWorld();
var myStyle = {
color: "#ff7800",
weight: 2,
opacity: 0.65,
};
function whenClicked(e) {
window.location = e.target.feature.properties.URL;
}
function whenMouseover(e) {
this.setStyle({
'fillColor': '#0000ff',
});
}
function whenMouseout(e) {
this.setStyle({
'fillColor': '#ff7800'
});
}
function onEachFeature(feature, layer) {
//bind click
layer.on({
click: whenClicked,
mouseover: whenMouseover,
mouseout: whenMouseout
});
}
geojson = L.geoJson(footprintsJson, {
style: myStyle,
onEachFeature: onEachFeature,
}).addTo(map);
addScaleToMap(map);
addAttributionToMap(map);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function () {
// There was a connection error of some sort
};
request.send();
function addScaleToMap(map) {
L.control.scale().addTo(map);
}
function addAttributionToMap(map) {
var attribution = L.control
.attribution({
prefix: '<a href="http://leafletjs.com/" title="A JS library for interactive maps" target"_blank">Leaflet</a>',
})
.addTo(map);
{
//add button
attribution.addAttribution('<a onclick="showSources()">Sources</a> | <a onclick="showDisclaimer()">Disclaimer</a>');
var sourcesText = document.getElementById("sourcesText");
sourcesText.innerHTML = ` <a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors </a> <a href="https://ec.europa.eu/eurostat/en/web/gisco" title="Eurostat - GISCO" target="_blank">, Eurostat - GISCO</a>` + sourcesText.innerHTML;
// add button click event
window.showDisclaimer = function () {
var popup = document.getElementById("disclaimerText");
popup.classList.toggle("show");
};
window.hideDisclaimer = function () {
var popup = document.getElementById("disclaimerText");
popup.classList.toggle("show");
};
// add button click event
window.showSources = function () {
var popup = document.getElementById("sourcesText");
popup.classList.toggle("show");
};
window.hideSources = function () {
var popup = document.getElementById("sourcesText");
popup.classList.toggle("show");
};
}
}
</script>
</body>
</html>