-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
40 lines (33 loc) · 1.99 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
<!DOCTYPE HTML>
<meta charset="UTF-8">
<title>Map of my backpacking trips</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=" anonymous">
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="anonymous"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js" integrity="sha512-qPGfHsmvlEDWKJf0G5kCGkuisDOyVmtaQplgsQs4S7urb/iXmIT9kw53flMn8eaEKNzZtcV6Zd6mQIbc4klcXg==" crossorigin="anonymous"></script>
<!--<script src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0" integrity="sha512-z4PhNX7vuL3xVChQ1m2AB9Yg5AULVxXcg/SpIdNs6c5H0NE8XYXysP+DGNKHfuwvY7kxvUdBeoGlODJ6+SfaPg==" crossorigin="anonymous"></script>--> <!-- not CORS enabled, so can't do integrity! -->
<script src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<style>
html, body, div#map { margin: 0; border: none; padding: 0; width: 100%; height: 100% }
</style>
<div id="map">
</div>
<script>
// I'd like to center in the Pacific, but leaflet doesn't wrap around 180/-180 correctly.
//let map = L.map("map").setView([10, -160], 3);
let map = L.map("map").setView([10, 0], 2);
// "terrain", "toner"
map.addLayer(new L.StamenTileLayer("terrain"));
fetch("gpx-files/list.txt").then(response => response.text()).then(text => {
let entries = text.split("\n");
entries.pop(); // "" at the end
for (let index in entries) {
let gpx = entries[index];
// gpxlayer is a https://leafletjs.com/reference-1.6.0.html#geojson
let gpxlayer = omnivore.gpx(`gpx-files/${gpx}`).addTo(map);
gpxlayer.on("ready", function() {
// Need to do this after the layer loads.
gpxlayer.setStyle(feature => ({ color: "#33f", weight: 4 }));
});
}
});
</script>