-
Notifications
You must be signed in to change notification settings - Fork 87
/
Copy pathleaflet-elevation_dynamic-runner.html
122 lines (105 loc) · 3.52 KB
/
leaflet-elevation_dynamic-runner.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
<!DOCTYPE html>
<html>
<head>
<title>leaflet-elevation.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="dns-prefetch" href="https://tile.openstreetmap.org">
<link rel="dns-prefetch preconnect" href="https://unpkg.com" />
<link rel="preload" href="https://unpkg.com/[email protected]/dist/leaflet.js" as="script">
<link rel="preload" href="https://unpkg.com/[email protected]/dist/leaflet-ui.js" as="script">
<style>@import '../libs/fullpage.css';</style>
<!-- leaflet-ui -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet-ui.js"></script>
<!-- leaflet-elevation -->
<link rel="stylesheet" href="https://unpkg.com/@raruto/[email protected]/dist/leaflet-elevation.min.css" />
<script src="https://unpkg.com/@raruto/[email protected]/dist/leaflet-elevation.min.js"></script>
<style>
.runner.height-focus {
stroke:#000;
fill:#fff
}
/** Get rid of mouse events over the chart */
.elevation-control svg * {
pointer-events: none;
}
/** Restore click on legend control */
.elevation-control svg .legend * {
pointer-events: all;
}
/** Get rid of mouse events over the layer */
.elevation-polyline.leaflet-interactive {
pointer-events: none !important;
}
</style>
</head>
<body>
<div id="map" class="leaflet-map"></div>
<!-- Override default translations -->
<script>
L.registerLocale('en', {
"You are here: ": "You are here: ",
"y: " : "y: ",
"x: " : "x: "
});
L.setLocale('en');
</script>
<!-- Initialize map and controls -->
<script>
let opts = {
map: {
center: [41.4583, 12.7059],
zoom: 5,
fullscreenControl: false,
resizerControl: true,
rotate: true,
// bearing: -25,
},
elevationControl: {
url: "https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx",
options: {
theme: "lightblue-theme",
collapsed: false,
detached: true,
summary: "multiline",
waypoints: false, // disable built-in checkpoint handling
hotline: false,
ruler: false,
distanceMarkers: false,
handlers: [
...L.Control.Elevation.prototype.options.handlers, // built-in handlers
'Runner', // same as: import('../src/handlers/runner.js')
],
runnerOptions: {
polyline: {
color: 'red',
attribution: '| Powered by: © <a href="https://github.com/Igor-Vladyka/leaflet.motion">Leaflet.Motion</a>',
},
motion: {
auto: true,
speed: 1500,
}
}
},
},
layersControl: {
options: {
collapsed: false,
},
},
};
let map = L.map('map', opts.map);
let controlElevation = L.control.elevation(opts.elevationControl.options);
controlElevation.on('eledata_loaded', ({ layer }) => {
// Dynamically generate chart markers
[50, 100, 150, 200, 250].forEach(d => controlElevation.addCheckpoint({ dist: d, label: d + ' km' }));
// Start "walking" animation
controlElevation.animate(layer, 1500);
});
controlElevation.load(opts.elevationControl.url);
controlElevation.addTo(map);
</script>
<a href="https://github.com/Raruto/leaflet-elevation" class="view-on-github" style="position: fixed;bottom: 30px;left: calc(50% - 81px);z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github" width="163"> </a>
</body>
</html>