-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdata.html
More file actions
116 lines (98 loc) · 5.38 KB
/
data.html
File metadata and controls
116 lines (98 loc) · 5.38 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EUBUCCO Dissemination - Data</title>
<link rel="icon" type="image/svg+xml" href="Eubucco-icon.jpg" />
<link href="https://unpkg.com/maplibre-gl@^4.0.0/dist/maplibre-gl.css" rel="stylesheet" />
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.css" type="text/css" />
<link rel="stylesheet" href="resources/css/styles.css" />
<link rel="stylesheet" href="resources/css/download.css" />
<script src="resources/js/header.ts" type="module" defer></script>
<script src="resources/js/dataDownload.ts" type="module" defer></script>
</head>
<body>
<header-component></header-component>
<main class="content">
<h1>Download EUBUCCO data</h1>
<p>Choose from 27 European countries to download the whole dataset (both in GeoParquet and FlatGeobuf), or filter the data by custom bounding box (only in GeoParquet). </p>
<div class="download-card">
<div class="download-section">
<h3>OPTION 1: Country Download</h3>
<div class="input-group">
<label for="country-select"></label>
<select id="country-select">
<option value="">Select a country</option>
<option value="at">Austria</option>
<option value="be">Belgium</option>
<option value="bg">Bulgaria</option>
<option value="hr">Croatia</option>
<option value="cy">Cyprus</option>
<option value="cz">Czechia</option>
<option value="dk">Denmark</option>
<option value="ee">Estonia</option>
<option value="fi">Finland</option>
<option value="fr">France</option>
<option value="de">Germany</option>
<option value="el">Greece</option>
<option value="hu">Hungary</option>
<option value="ie">Ireland</option>
<option value="it">Italy</option>
<option value="lv">Latvia</option>
<option value="lt">Lithuania</option>
<option value="lu">Luxembourg</option>
<option value="nl">Netherlands</option>
<option value="pl">Poland</option>
<option value="pt">Portugal</option>
<option value="ro">Romania</option>
<option value="sk">Slovakia</option>
<option value="es">Spain</option>
<option value="se">Sweden</option>
<option value="ch">Switzerland</option>
</select>
</div>
</div>
<h3>OR</h3>
<div class="download-section">
<h3>OPTION 2: Bounding Box Download (EPSG:4326)</h3>
<div class="map-controls">
<button type="button" id="draw-bbox-btn" class="btn-map">Draw Bbox</button>
<button type="button" id="clear-bbox-btn" class="btn-map">Clear Bbox</button>
</div>
<div id="map"></div>
<div class="bbox-grid">
<div class="bbox-input">
<label>Min Lon</label>
<input type="number" id="min-lon" step="0.0001" placeholder="-5.0">
</div>
<div class="bbox-input">
<label>Min Lat</label>
<input type="number" id="min-lat" step="0.0001" placeholder="42.0">
</div>
<div class="bbox-input">
<label>Max Lon</label>
<input type="number" id="max-lon" step="0.0001" placeholder="8.0">
</div>
<div class="bbox-input">
<label>Max Lat</label>
<input type="number" id="max-lat" step="0.0001" placeholder="51.0">
</div>
</div>
</div>
<div class="download-section format-selection">
<h3> Choose download format</h3>
<div class="input-group">
<select id="format-select">
<option value="fgb">FlatGeobuf (.fgb)</option>
<option value="geoparquet">GeoParquet (.parquet)</option>
</select>
</div>
<button id="download-btn" class="main-download-btn">Download my selection</button>
<div id="status-message"></div>
</div>
<div class="download-section format-selection">
</div>
</main>
</body>
</html>