-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
209 lines (187 loc) · 8.11 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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Web Map</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MapLibre GL CSS -->
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css">
<!-- Custom Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<style>
:root {
/* Override Bootstrap colors */
--bs-primary: #6384aa;
--bs-primary-rgb: 99, 132, 170;
/* Primary color */
--bs-secondary: #6c757d;
--bs-secondary-rgb: 108, 117, 125;
/* Secondary color */
--bs-success: #28a745;
--bs-success-rgb: 40, 167, 69;
/* Success color */
--bs-danger: #dc3545;
--bs-danger-rgb: 220, 53, 69;
/* Danger color */
--bs-warning: #ffc107;
--bs-warning-rgb: 255, 193, 7;
/* Warning color */
--bs-info: #17a2b8;
--bs-info-rgb: 23, 162, 184;
/* Info color */
--bs-light: #f8f9fa;
--bs-light-rgb: 248, 249, 250;
/* Light color */
--bs-dark: #343a40;
--bs-dark-rgb: 52, 58, 64;
/* Dark color */
--bs-font-sans-serif: "Inter", sans-serif;
/* Override default font */
}
#map {
width: 100%;
height: 60vh;
/* Adjust height as needed */
}
</style>
</head>
<body>
<div class="header bg-primary text-white text-center p-5">
<h1 class="">Interactive Web Map</h1>
<a href="https://github.com/PhilipMathieu/interactive-web-map/">
<img src="https://img.shields.io/badge/GitHub-Repository-black?logo=github" alt="GitHub Repository">
</a>
</div>
<div id="map" class=""></div>
<div class="content-section p-5">
<div class="row justify-content-center">
<div class="col-md-10">
<h2>About</h2>
<p>This project demonstrates how to create an interactive web map for sharing geospatial projects. The
web map consists of a single HTML file that uses Bootstrap to simplify styling. The map itself is
rendered by MapLibre GL JS. Data is stored in the PMTiles format, a single-file format that simple
to use and easy to deploy, making it a great choice for small to medium-sized datasets. Together,
these packages make it possible to serve a fully-featured web map with static hosting services such
as GitHub Pages.</p>
</div>
<div class="col-md-10">
<h2>Contact</h2>
<p>For more information or to contribute to this project, see our <a
href="https://github.com/PhilipMathieu/interactive-web-map/">GitHub
repository</a>.</p>
</div>
</div>
</div>
<div class="row footer bg-light p-5 pb-0">
<div class="col-md-6">
<h2>License</h2>
<p>For information about licensing and reuse, please see the LICENSE file in the
<a href="https://github.com/PhilipMathieu/interactive-web-map/">GitHub
repository</a>.
</p>
</div>
<div class="col-md-6">
<h2>Acknowledgements</h2>
<p>Built on <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a> and <a
href="https://maplibre.org/" target="_blank">MapLibre GL JS</a>. Basemap by <a
href="https://docs.carto.com/carto-for-developers/carto-for-react/guides/basemaps"
target="_blank">CARTO</a>. Ski areas layer obtained from <a href="https://www.nohrsc.noaa.gov/"
target="_blank">NOAA NWS National Operational Hydrologic Remote SensingCenter</a> and loaded with <a
href="https://protomaps.com/" target="_blank">Protomaps'</a> <a
href="https://github.com/protomaps/pmtiles" target="_blank">PMTiles specification</a>.
</p>
</div>
</div>
<!-- Bootstrap Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- MapLibre GL JS -->
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<!-- PMTiles JS -->
<script src="https://unpkg.com/[email protected]/dist/pmtiles.js"></script>
<!-- Map JS -->
<script type="module">
// Setup PMTiles protocol with your map instance
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles", protocol.tile);
// Initialize the map
const map = new maplibregl.Map({
container: 'map', // container ID
// style URL, replace with your own style if desired
style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
center: [-95, 40], // starting position [lng, lat]
zoom: 4 // starting zoom
});
// Add zoom and rotation controls to the map.
map.addControl(new maplibregl.NavigationControl());
// disable map zoom when using scroll
map.scrollZoom.disable();
// Example of adding a PMTiles source and layer to your map
map.on('load', function () {
map.addSource('skiAreas', {
'type': 'vector',
'url': 'pmtiles://tiles/ski_areas_all.pmtiles' // path to tiles
});
map.addLayer({
'id': 'skiAreasCircles',
'type': 'circle',
'source': 'skiAreas',
'source-layer': 'ski_areas_all',
'paint': {
'circle-radius': 6,
'circle-color': 'rgba(255,255,255,0.5)'
}
});
let popup = null;
map.on('mouseenter', 'skiAreasCircles', function (e) {
// Change the cursor style as a UI indicator
map.getCanvas().style.cursor = 'pointer';
// Get the ski area name and coordinates from the feature properties
const skiAreaName = e.features[0].properties.NAME;
const lnglat = e.features[0].geometry.coordinates;
// Create a new popup if it doesn't exist
if (!popup) {
popup = new maplibregl.Popup(
{
closeButton: false,
closeOnClick: false
}
);
}
// Set the popup's coordinates and content
popup.setLngLat(lnglat).setHTML(skiAreaName).addTo(map);
});
map.on('mouseleave', 'skiAreasCircles', function () {
// Reset the cursor style
map.getCanvas().style.cursor = '';
// Remove the popup if it exists
if (popup) {
popup.remove();
popup = null;
}
});
});
// Example of adding a PMTiles source and layer to your map
map.on('load', function () {
map.addSource('skiAreas', {
'type': 'vector',
'url': 'pmtiles://tiles/ski_areas_all.pmtiles' // path to tiles
});
map.addLayer({
'id': 'skiAreasCircles',
'type': 'circle',
'source': 'skiAreas',
'source-layer': 'ski_areas_all',
'paint': {
'circle-radius': 6,
'circle-color': 'rgba(255,255,255,0.5)'
}
});
});
</script>
</body>
</html>