@raruto/leaflet-elevation 2.2.2 → 2.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +291 -285
- package/dist/leaflet-elevation.css +5 -5
- package/dist/leaflet-elevation.js +1307 -1300
- package/dist/leaflet-elevation.js.map +1 -1
- package/dist/leaflet-elevation.min.css +1 -1
- package/dist/leaflet-elevation.min.js +1 -1
- package/dist/leaflet-elevation.min.js.map +1 -1
- package/images/elevation.svg +1 -1
- package/package.json +1 -1
- package/src/control.js +1312 -1305
- package/src/handlers/altitude.js +79 -79
- package/src/handlers/distance.js +46 -45
- package/src/index.css +5 -5
- package/images/elevation-lime.svg +0 -1
- package/images/elevation-purple.svg +0 -1
- package/images/elevation-steelblue.svg +0 -1
package/README.md
CHANGED
|
@@ -1,285 +1,291 @@
|
|
|
1
|
-
# leaflet-elevation.js
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@raruto/leaflet-elevation)
|
|
4
|
-
[](LICENSE)
|
|
5
|
-
|
|
6
|
-
A Leaflet plugin that allows to add elevation profiles using d3js
|
|
7
|
-
|
|
8
|
-
<p align="center">
|
|
9
|
-
<a href="https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html"><img src="https://raruto.github.io/img/leaflet-elevation.png" alt="Leaflet elevation viewer" /></a>
|
|
10
|
-
</p>
|
|
11
|
-
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
_For a working example see one of the following demos:_
|
|
15
|
-
|
|
16
|
-
- [loading .gpx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation.html)
|
|
17
|
-
- [loading .geojson file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-data.html)
|
|
18
|
-
- [loading .kml file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_kml-data.html)
|
|
19
|
-
- [loading .tcx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_tcx-data.html)
|
|
20
|
-
- [loading a local .gpx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_upload-gpx.html)
|
|
21
|
-
- [loading data from a textarea](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_string-data.html)
|
|
22
|
-
- [loading individual .geojson tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-group.html)
|
|
23
|
-
- [loading individual .gpx tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-tracks.html)
|
|
24
|
-
- [loading multiple .gpx tracks (hover to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html)
|
|
25
|
-
- [loading multiple .gpx tracks (click to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-charts.html)
|
|
26
|
-
- [loading multiple maps](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_multiple-maps.html)
|
|
27
|
-
- [translating plugin labels](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_i18n-strings.html)
|
|
28
|
-
- [using custom colors](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
|
|
29
|
-
- [using .gpx extensions (cadence, heart, pace)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)
|
|
30
|
-
- [using .gpx waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_gpx-waypoints.html)
|
|
31
|
-
- [using .geojson waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-waypoints.html)
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
<br/>
|
|
35
|
-
|
|
36
|
-
- [autohide map](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-map.html)
|
|
37
|
-
- [autohide chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-chart.html)
|
|
38
|
-
- [collapsible button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_close-button.html)
|
|
39
|
-
- [custom summary](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-summary.html)
|
|
40
|
-
- [follow marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_follow-marker.html)
|
|
41
|
-
- [layer almostover](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_almost-over.html)
|
|
42
|
-
- [slope chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_slope-chart.html)
|
|
43
|
-
- [speed chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_speed-chart.html)
|
|
44
|
-
- [walking marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_dynamic-runner.html)
|
|
45
|
-
|
|
46
|
-
---
|
|
47
|
-
|
|
48
|
-
<blockquote>
|
|
49
|
-
<p align="center">
|
|
50
|
-
<em>Initially based on the <a href="http://mrmufflon.github.io/Leaflet.Elevation/">work</a> of <strong>Felix “MrMufflon” Bache</strong></em>
|
|
51
|
-
</p>
|
|
52
|
-
</blockquote>
|
|
53
|
-
|
|
54
|
-
---
|
|
55
|
-
|
|
56
|
-
## How to use
|
|
57
|
-
|
|
58
|
-
1. **include CSS & JavaScript**
|
|
59
|
-
```html
|
|
60
|
-
<head>
|
|
61
|
-
...
|
|
62
|
-
<style> html, body, #map, #elevation-div { height: 100%; width: 100%; padding: 0; margin: 0; } #map { height: 75%; } #elevation-div { height: 25%; font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; } </style>
|
|
63
|
-
|
|
64
|
-
<!-- leaflet-ui -->
|
|
65
|
-
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
|
66
|
-
<script src="https://unpkg.com/leaflet-ui@0.5.
|
|
67
|
-
|
|
68
|
-
<!-- leaflet-elevation -->
|
|
69
|
-
<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.css" />
|
|
70
|
-
<script src="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.js"></script>
|
|
71
|
-
...
|
|
72
|
-
</head>
|
|
73
|
-
```
|
|
74
|
-
2. **choose the div container used for the slippy map**
|
|
75
|
-
```html
|
|
76
|
-
<body>
|
|
77
|
-
...
|
|
78
|
-
<div id="map"></div>
|
|
79
|
-
...
|
|
80
|
-
</body>
|
|
81
|
-
```
|
|
82
|
-
3. **create your first simple “leaflet-elevation” slippy map**
|
|
83
|
-
```html
|
|
84
|
-
<script>
|
|
85
|
-
// Full list options at "leaflet-elevation.js"
|
|
86
|
-
var elevation_options = {
|
|
87
|
-
|
|
88
|
-
// Default chart colors: theme lime-theme, magenta-theme, ...
|
|
89
|
-
theme: "lightblue-theme",
|
|
90
|
-
|
|
91
|
-
// Chart container outside/inside map container
|
|
92
|
-
detached: true,
|
|
93
|
-
|
|
94
|
-
// if (detached), the elevation chart container
|
|
95
|
-
elevationDiv: "#elevation-div",
|
|
96
|
-
|
|
97
|
-
// if (!detached) autohide chart profile on chart mouseleave
|
|
98
|
-
autohide: false,
|
|
99
|
-
|
|
100
|
-
// if (!detached) initial state of chart profile control
|
|
101
|
-
collapsed: false,
|
|
102
|
-
|
|
103
|
-
// if (!detached) control position on one of map corners
|
|
104
|
-
position: "topright",
|
|
105
|
-
|
|
106
|
-
//
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
// Autoupdate map
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
//
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
//
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
//
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
//
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
//
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
//
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
//
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
// Display
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
//
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
//
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
//
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
// Toggle chart
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
// Toggle
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
// Toggle "leaflet-
|
|
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
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
.elevation-
|
|
221
|
-
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
- https://
|
|
261
|
-
- https://
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
1
|
+
# leaflet-elevation.js
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@raruto/leaflet-elevation)
|
|
4
|
+
[](LICENSE)
|
|
5
|
+
|
|
6
|
+
A Leaflet plugin that allows to add elevation profiles using d3js
|
|
7
|
+
|
|
8
|
+
<p align="center">
|
|
9
|
+
<a href="https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html"><img src="https://raruto.github.io/img/leaflet-elevation.png" alt="Leaflet elevation viewer" /></a>
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
_For a working example see one of the following demos:_
|
|
15
|
+
|
|
16
|
+
- [loading .gpx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation.html)
|
|
17
|
+
- [loading .geojson file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-data.html)
|
|
18
|
+
- [loading .kml file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_kml-data.html)
|
|
19
|
+
- [loading .tcx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_tcx-data.html)
|
|
20
|
+
- [loading a local .gpx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_upload-gpx.html)
|
|
21
|
+
- [loading data from a textarea](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_string-data.html)
|
|
22
|
+
- [loading individual .geojson tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-group.html)
|
|
23
|
+
- [loading individual .gpx tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-tracks.html)
|
|
24
|
+
- [loading multiple .gpx tracks (hover to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html)
|
|
25
|
+
- [loading multiple .gpx tracks (click to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-charts.html)
|
|
26
|
+
- [loading multiple maps](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_multiple-maps.html)
|
|
27
|
+
- [translating plugin labels](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_i18n-strings.html)
|
|
28
|
+
- [using custom colors](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
|
|
29
|
+
- [using .gpx extensions (cadence, heart, pace)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)
|
|
30
|
+
- [using .gpx waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_gpx-waypoints.html)
|
|
31
|
+
- [using .geojson waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-waypoints.html)
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
<br/>
|
|
35
|
+
|
|
36
|
+
- [autohide map](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-map.html)
|
|
37
|
+
- [autohide chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-chart.html)
|
|
38
|
+
- [collapsible button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_close-button.html)
|
|
39
|
+
- [custom summary](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-summary.html)
|
|
40
|
+
- [follow marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_follow-marker.html)
|
|
41
|
+
- [layer almostover](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_almost-over.html)
|
|
42
|
+
- [slope chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_slope-chart.html)
|
|
43
|
+
- [speed chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_speed-chart.html)
|
|
44
|
+
- [walking marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_dynamic-runner.html)
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
<blockquote>
|
|
49
|
+
<p align="center">
|
|
50
|
+
<em>Initially based on the <a href="http://mrmufflon.github.io/Leaflet.Elevation/">work</a> of <strong>Felix “MrMufflon” Bache</strong></em>
|
|
51
|
+
</p>
|
|
52
|
+
</blockquote>
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## How to use
|
|
57
|
+
|
|
58
|
+
1. **include CSS & JavaScript**
|
|
59
|
+
```html
|
|
60
|
+
<head>
|
|
61
|
+
...
|
|
62
|
+
<style> html, body, #map, #elevation-div { height: 100%; width: 100%; padding: 0; margin: 0; } #map { height: 75%; } #elevation-div { height: 25%; font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; } </style>
|
|
63
|
+
|
|
64
|
+
<!-- leaflet-ui -->
|
|
65
|
+
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
|
66
|
+
<script src="https://unpkg.com/leaflet-ui@0.5.6/dist/leaflet-ui.js"></script>
|
|
67
|
+
|
|
68
|
+
<!-- leaflet-elevation -->
|
|
69
|
+
<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.css" />
|
|
70
|
+
<script src="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.js"></script>
|
|
71
|
+
...
|
|
72
|
+
</head>
|
|
73
|
+
```
|
|
74
|
+
2. **choose the div container used for the slippy map**
|
|
75
|
+
```html
|
|
76
|
+
<body>
|
|
77
|
+
...
|
|
78
|
+
<div id="map"></div>
|
|
79
|
+
...
|
|
80
|
+
</body>
|
|
81
|
+
```
|
|
82
|
+
3. **create your first simple “leaflet-elevation” slippy map**
|
|
83
|
+
```html
|
|
84
|
+
<script>
|
|
85
|
+
// Full list options at "leaflet-elevation.js"
|
|
86
|
+
var elevation_options = {
|
|
87
|
+
|
|
88
|
+
// Default chart colors: theme lime-theme, magenta-theme, ...
|
|
89
|
+
theme: "lightblue-theme",
|
|
90
|
+
|
|
91
|
+
// Chart container outside/inside map container
|
|
92
|
+
detached: true,
|
|
93
|
+
|
|
94
|
+
// if (detached), the elevation chart container
|
|
95
|
+
elevationDiv: "#elevation-div",
|
|
96
|
+
|
|
97
|
+
// if (!detached) autohide chart profile on chart mouseleave
|
|
98
|
+
autohide: false,
|
|
99
|
+
|
|
100
|
+
// if (!detached) initial state of chart profile control
|
|
101
|
+
collapsed: false,
|
|
102
|
+
|
|
103
|
+
// if (!detached) control position on one of map corners
|
|
104
|
+
position: "topright",
|
|
105
|
+
|
|
106
|
+
// Toggle close icon visibility
|
|
107
|
+
closeBtn: true,
|
|
108
|
+
|
|
109
|
+
// Autoupdate map center on chart mouseover.
|
|
110
|
+
followMarker: true,
|
|
111
|
+
|
|
112
|
+
// Autoupdate map bounds on chart update.
|
|
113
|
+
autofitBounds: true,
|
|
114
|
+
|
|
115
|
+
// Chart distance/elevation units.
|
|
116
|
+
imperial: false,
|
|
117
|
+
|
|
118
|
+
// [Lat, Long] vs [Long, Lat] points. (leaflet default: [Lat, Long])
|
|
119
|
+
reverseCoords: false,
|
|
120
|
+
|
|
121
|
+
// Acceleration chart profile: true || "summary" || "disabled" || false
|
|
122
|
+
acceleration: false,
|
|
123
|
+
|
|
124
|
+
// Slope chart profile: true || "summary" || "disabled" || false
|
|
125
|
+
slope: false,
|
|
126
|
+
|
|
127
|
+
// Speed chart profile: true || "summary" || "disabled" || false
|
|
128
|
+
speed: false,
|
|
129
|
+
|
|
130
|
+
// Altitude chart profile: true || "summary" || "disabled" || false
|
|
131
|
+
altitude: true,
|
|
132
|
+
|
|
133
|
+
// Display time info: true || "summary" || false
|
|
134
|
+
time: true,
|
|
135
|
+
|
|
136
|
+
// Display distance info: true || "summary" || false
|
|
137
|
+
distance: true,
|
|
138
|
+
|
|
139
|
+
// Summary track info style: "inline" || "multiline" || false
|
|
140
|
+
summary: 'multiline',
|
|
141
|
+
|
|
142
|
+
// Download link: "link" || false || "modal"
|
|
143
|
+
downloadLink: 'link',
|
|
144
|
+
|
|
145
|
+
// Toggle chart ruler filter
|
|
146
|
+
ruler: true,
|
|
147
|
+
|
|
148
|
+
// Toggle chart legend filter
|
|
149
|
+
legend: true,
|
|
150
|
+
|
|
151
|
+
// Toggle "leaflet-almostover" integration
|
|
152
|
+
almostOver: true,
|
|
153
|
+
|
|
154
|
+
// Toggle "leaflet-distance-markers" integration
|
|
155
|
+
distanceMarkers: false,
|
|
156
|
+
|
|
157
|
+
// Toggle "leaflet-hotline" integration
|
|
158
|
+
hotline: true,
|
|
159
|
+
|
|
160
|
+
// Display track datetimes: true || false
|
|
161
|
+
timestamps: false,
|
|
162
|
+
|
|
163
|
+
// Display track waypoints: true || "markers" || "dots" || false
|
|
164
|
+
waypoints: true,
|
|
165
|
+
|
|
166
|
+
// Toggle custom waypoint icons: true || { associative array of <sym> tags } || false
|
|
167
|
+
wptIcons: {
|
|
168
|
+
'': L.divIcon({
|
|
169
|
+
className: 'elevation-waypoint-marker',
|
|
170
|
+
html: '<i class="elevation-waypoint-icon"></i>',
|
|
171
|
+
iconSize: [30, 30],
|
|
172
|
+
iconAnchor: [8, 30],
|
|
173
|
+
}),
|
|
174
|
+
},
|
|
175
|
+
|
|
176
|
+
// Toggle waypoint labels: true || "markers" || "dots" || false
|
|
177
|
+
wptLabels: true,
|
|
178
|
+
|
|
179
|
+
// Render chart profiles as Canvas or SVG Paths
|
|
180
|
+
preferCanvas: true,
|
|
181
|
+
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
// Instantiate map (leaflet-ui).
|
|
185
|
+
var map = L.map('map', { mapTypeId: 'terrain', center: [41.4583, 12.7059], zoom: 5 });
|
|
186
|
+
|
|
187
|
+
// Instantiate elevation control.
|
|
188
|
+
var controlElevation = L.control.elevation(elevation_options).addTo(map);
|
|
189
|
+
|
|
190
|
+
// Load track from url (allowed data types: "*.geojson", "*.gpx", "*.tcx")
|
|
191
|
+
controlElevation.load("https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx");
|
|
192
|
+
|
|
193
|
+
</script>
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
### Build Guide
|
|
197
|
+
|
|
198
|
+
For those wishing to try cloning this repository into a local development folder (eg. /var/www):
|
|
199
|
+
|
|
200
|
+
```shell
|
|
201
|
+
git clone git@github.com:Raruto/leaflet-elevation.git
|
|
202
|
+
cd ./leaflet-elevation
|
|
203
|
+
|
|
204
|
+
npm i # install dependencies
|
|
205
|
+
npm run watch # auto-generate "dist" files
|
|
206
|
+
npm run build # generate "dist" files (once)
|
|
207
|
+
npm run test # test "spec" files (once)
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
After that you can start developing inside the `src` and `test` folders (eg. open "http://localhost/leaflet-elevation/test" in your browser to preview changes). Check also [CONTRIBUTING.md](.github/CONTRIBUTING.md) file for some information about it.
|
|
211
|
+
|
|
212
|
+
### FAQ
|
|
213
|
+
|
|
214
|
+
<details>
|
|
215
|
+
<summary>1. How can I change the color of the elevation plot?</summary><br>
|
|
216
|
+
|
|
217
|
+
There are multiple options to achieve this:
|
|
218
|
+
|
|
219
|
+
* You could either use some default presets (see: theme: "lightblue-theme" option in readme file and the following file `leaflet-elevation.css` for some other default "*-theme" names).
|
|
220
|
+
* check out [this example](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
|
|
221
|
+
* Or add the following lines for custom colors.
|
|
222
|
+
```css
|
|
223
|
+
.elevation-control .area {
|
|
224
|
+
fill: red;
|
|
225
|
+
}
|
|
226
|
+
.elevation-control .background {
|
|
227
|
+
background-color: white;
|
|
228
|
+
```
|
|
229
|
+
</details>
|
|
230
|
+
|
|
231
|
+
<details>
|
|
232
|
+
<summary>2. How to enable/disable the leaflet user interface customizations?</summary><br>
|
|
233
|
+
|
|
234
|
+
These customizations are actually part of the [leaflet-ui](https://github.com/Raruto/leaflet-ui) and can be toggled on/off using e.g. the following options:
|
|
235
|
+
```js
|
|
236
|
+
var map = L.map('map', {
|
|
237
|
+
center: [41.4583, 12.7059], // needs value to initialize
|
|
238
|
+
zoom: 5, // needs value to initialize
|
|
239
|
+
mapTypeId: 'topo',
|
|
240
|
+
mapTypeIds: ['osm', 'terrain', 'satellite', 'topo'],
|
|
241
|
+
gestureHandling: false, // zoom with Cmd + Scroll
|
|
242
|
+
zoomControl: true, // plus minus buttons
|
|
243
|
+
pegmanControl: false,
|
|
244
|
+
locateControl: false,
|
|
245
|
+
fullscreenControl: true,
|
|
246
|
+
layersControl: true,
|
|
247
|
+
minimapControl: false,
|
|
248
|
+
editInOSMControl: false,
|
|
249
|
+
loadingControl: false,
|
|
250
|
+
searchControl: false,
|
|
251
|
+
disableDefaultUI: false,
|
|
252
|
+
printControl: false,
|
|
253
|
+
});
|
|
254
|
+
```
|
|
255
|
+
</details>
|
|
256
|
+
|
|
257
|
+
<details>
|
|
258
|
+
<summary>3. Some real world projects based on this plugin?</summary><br>
|
|
259
|
+
|
|
260
|
+
- https://parcours.scasb.org/
|
|
261
|
+
- https://velocat.ru/velo/phpBB3/map.php
|
|
262
|
+
- https://plugins.qgis.org/plugins/track_profile_2_web/
|
|
263
|
+
- https://wordpress.org/plugins/os-datahub-maps/
|
|
264
|
+
- https://wordpress.org/plugins/extensions-leaflet-map/
|
|
265
|
+
- https://github.com/der-stefan/OpenTopoMap
|
|
266
|
+
- https://gpx.n-peloton.fr/
|
|
267
|
+
- https://walkaholic.me/map
|
|
268
|
+
|
|
269
|
+
</details>
|
|
270
|
+
|
|
271
|
+
_Related: [Leaflet-UI presets](https://github.com/raruto/leaflet-ui), [QGIS Integration](https://github.com/faunalia/trackprofile2web)_
|
|
272
|
+
|
|
273
|
+
### Changelog
|
|
274
|
+
|
|
275
|
+
All notable changes to this project are documented in the [releases](https://github.com/Raruto/leaflet-elevation/releases) page.
|
|
276
|
+
|
|
277
|
+
---
|
|
278
|
+
|
|
279
|
+
**Compatibile with:**
|
|
280
|
+
[](http://leafletjs.com/reference.html)
|
|
281
|
+
[](https://www.npmjs.com/package/d3)
|
|
282
|
+
[](https://www.npmjs.com/package/@tmcw/togeojson)
|
|
283
|
+
|
|
284
|
+
|
|
285
|
+
---
|
|
286
|
+
|
|
287
|
+
**Contributors:** [MrMufflon](https://github.com/MrMufflon/Leaflet.Elevation), [HostedDinner](https://github.com/HostedDinner/Leaflet.Elevation), [ADoroszlai](http://ADoroszlai.github.io/joebed/), [Raruto](https://github.com/Raruto/leaflet-elevation)
|
|
288
|
+
|
|
289
|
+
---
|
|
290
|
+
|
|
291
|
+
**License:** GPL-3.0+
|
|
@@ -146,7 +146,6 @@
|
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
.elevation-toggle-icon {
|
|
149
|
-
background: var(--ele-toggle-bg, var(--ele-icon, url(../images/elevation-lime.svg)) no-repeat center center);
|
|
150
149
|
background-color: #fff;
|
|
151
150
|
right: 5px;
|
|
152
151
|
top: 5px;
|
|
@@ -246,7 +245,7 @@
|
|
|
246
245
|
|
|
247
246
|
.elevation-expanded {
|
|
248
247
|
--ele-close-btn: inline-block;
|
|
249
|
-
--ele-toggle-bg:
|
|
248
|
+
--ele-toggle-bg: none;
|
|
250
249
|
--ele-toggle-pos: absolute;
|
|
251
250
|
--ele-toggle-size: 20px;
|
|
252
251
|
}
|
|
@@ -271,8 +270,8 @@
|
|
|
271
270
|
--ele-area: #9CC222;
|
|
272
271
|
--ele-grid: #CCC;
|
|
273
272
|
--ele-brush: rgba(99, 126, 11, 0.4);
|
|
274
|
-
--ele-icon: url(../images/elevation-lime.svg);
|
|
275
273
|
--ele-poly: #566B13;
|
|
274
|
+
--ele-line: #70ab00;
|
|
276
275
|
}
|
|
277
276
|
|
|
278
277
|
/* STEELBLUE THEME //////////////////////////////////////////////// */
|
|
@@ -281,7 +280,7 @@
|
|
|
281
280
|
--ele-axis: #0D1821;
|
|
282
281
|
--ele-area: #4682B4;
|
|
283
282
|
--ele-brush: rgba(23, 74, 117, 0.4);
|
|
284
|
-
--ele-
|
|
283
|
+
--ele-line: #174A75;
|
|
285
284
|
}
|
|
286
285
|
|
|
287
286
|
/* PURPLE THEME /////////////////////////////////////////////////// */
|
|
@@ -290,7 +289,7 @@
|
|
|
290
289
|
--ele-bg: rgba(115, 44, 123, 0.2);
|
|
291
290
|
--ele-area: #732C7B;
|
|
292
291
|
--ele-brush: rgba(74, 14, 80, 0.4);
|
|
293
|
-
--ele-
|
|
292
|
+
--ele-line: #732c7b;
|
|
294
293
|
}
|
|
295
294
|
|
|
296
295
|
/* YELLOW THEME /////////////////////////////////////////////////// */
|
|
@@ -319,6 +318,7 @@
|
|
|
319
318
|
--ele-alpha: 0.45;
|
|
320
319
|
--ele-stroke: #4682B4;
|
|
321
320
|
--ele-circle: #fff;
|
|
321
|
+
--ele-line: #000;
|
|
322
322
|
}
|
|
323
323
|
|
|
324
324
|
.elevation-detached.lightblue-theme .area {
|