@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/src/handlers/altitude.js
CHANGED
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
export function Altitude() {
|
|
2
|
-
|
|
3
|
-
const _ = L.Control.Elevation.Utils;
|
|
4
|
-
|
|
5
|
-
let opts = this.options;
|
|
6
|
-
let altitude = {};
|
|
7
|
-
|
|
8
|
-
let theme = opts.theme.split(' ')[0].replace('-theme', '');
|
|
9
|
-
let color = _.Colors[theme] || {};
|
|
10
|
-
|
|
11
|
-
opts.altitudeFactor = opts.imperial ? this.__footFactor : (opts.altitudeFactor || 1); // 1 m = (1 m)
|
|
12
|
-
altitude.label = opts.imperial ? "ft" : opts.yLabel;
|
|
13
|
-
|
|
14
|
-
return {
|
|
15
|
-
name: 'altitude',
|
|
16
|
-
required: this.options.slope,
|
|
17
|
-
meta: 'z',
|
|
18
|
-
unit: altitude.label,
|
|
19
|
-
statsName: 'elevation',
|
|
20
|
-
skipNull: this.options.skipNullZCoords,
|
|
21
|
-
deltaMax: this.options.altitudeDeltaMax,
|
|
22
|
-
clampRange: this.options.altitudeRange,
|
|
23
|
-
// init: ({point}) => {
|
|
24
|
-
// // "alt" property is generated inside "leaflet"
|
|
25
|
-
// if ("alt" in point) point.meta.ele = point.alt;
|
|
26
|
-
// },
|
|
27
|
-
pointToAttr: (point, i) => {
|
|
28
|
-
if ("alt" in point) point.meta.ele = point.alt; // "alt" property is generated inside "leaflet"
|
|
29
|
-
return this._data[i].z
|
|
30
|
-
},
|
|
31
|
-
stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
|
|
32
|
-
grid: {
|
|
33
|
-
axis : "y",
|
|
34
|
-
position : "left",
|
|
35
|
-
scale : "y" // this._chart._y,
|
|
36
|
-
},
|
|
37
|
-
scale: {
|
|
38
|
-
axis : "y",
|
|
39
|
-
position: "left",
|
|
40
|
-
scale : "y", // this._chart._y,
|
|
41
|
-
labelX : -3,
|
|
42
|
-
labelY : -8,
|
|
43
|
-
},
|
|
44
|
-
path: {
|
|
45
|
-
label : 'Altitude',
|
|
46
|
-
scaleX : 'distance',
|
|
47
|
-
scaleY : 'altitude',
|
|
48
|
-
className : 'area',
|
|
49
|
-
color : color.area || theme,
|
|
50
|
-
strokeColor : opts.detached ? color.stroke : '#000',
|
|
51
|
-
strokeOpacity: "1",
|
|
52
|
-
fillOpacity : opts.detached ? (color.alpha || '0.8') : 1,
|
|
53
|
-
preferCanvas : opts.preferCanvas,
|
|
54
|
-
},
|
|
55
|
-
tooltip: {
|
|
56
|
-
name: 'y',
|
|
57
|
-
chart: (item) => L._("y: ") + _.round(item[opts.yAttr], opts.decimalsY) + " " + altitude.label,
|
|
58
|
-
marker: (item) => _.round(item[opts.yAttr], opts.decimalsY) + " " + altitude.label,
|
|
59
|
-
order: 10,
|
|
60
|
-
},
|
|
61
|
-
summary: {
|
|
62
|
-
"minele" : {
|
|
63
|
-
label: "Min Elevation: ",
|
|
64
|
-
value: (track, unit) => (track.elevation_min || 0).toFixed(2) + ' ' + unit,
|
|
65
|
-
order: 30,
|
|
66
|
-
},
|
|
67
|
-
"maxele" : {
|
|
68
|
-
label: "Max Elevation: ",
|
|
69
|
-
value: (track, unit) => (track.elevation_max || 0).toFixed(2) + ' ' + unit,
|
|
70
|
-
order: 31,
|
|
71
|
-
},
|
|
72
|
-
"avgele" : {
|
|
73
|
-
label: "Avg Elevation: ",
|
|
74
|
-
value: (track, unit) => (track.elevation_avg || 0).toFixed(2) + ' ' + unit,
|
|
75
|
-
order: 32,
|
|
76
|
-
},
|
|
77
|
-
}
|
|
78
|
-
};
|
|
79
|
-
}
|
|
1
|
+
export function Altitude() {
|
|
2
|
+
|
|
3
|
+
const _ = L.Control.Elevation.Utils;
|
|
4
|
+
|
|
5
|
+
let opts = this.options;
|
|
6
|
+
let altitude = {};
|
|
7
|
+
|
|
8
|
+
let theme = opts.theme.split(' ')[0].replace('-theme', '');
|
|
9
|
+
let color = _.Colors[theme] || {};
|
|
10
|
+
|
|
11
|
+
opts.altitudeFactor = opts.imperial ? this.__footFactor : (opts.altitudeFactor || 1); // 1 m = (1 m)
|
|
12
|
+
altitude.label = opts.imperial ? "ft" : opts.yLabel;
|
|
13
|
+
|
|
14
|
+
return {
|
|
15
|
+
name: 'altitude',
|
|
16
|
+
required: this.options.slope,
|
|
17
|
+
meta: 'z',
|
|
18
|
+
unit: altitude.label,
|
|
19
|
+
statsName: 'elevation',
|
|
20
|
+
skipNull: this.options.skipNullZCoords,
|
|
21
|
+
deltaMax: this.options.altitudeDeltaMax,
|
|
22
|
+
clampRange: this.options.altitudeRange,
|
|
23
|
+
// init: ({point}) => {
|
|
24
|
+
// // "alt" property is generated inside "leaflet"
|
|
25
|
+
// if ("alt" in point) point.meta.ele = point.alt;
|
|
26
|
+
// },
|
|
27
|
+
pointToAttr: (point, i) => {
|
|
28
|
+
if ("alt" in point) point.meta.ele = point.alt; // "alt" property is generated inside "leaflet"
|
|
29
|
+
return this._data[i].z *= opts.altitudeFactor;
|
|
30
|
+
},
|
|
31
|
+
stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
|
|
32
|
+
grid: {
|
|
33
|
+
axis : "y",
|
|
34
|
+
position : "left",
|
|
35
|
+
scale : "y" // this._chart._y,
|
|
36
|
+
},
|
|
37
|
+
scale: {
|
|
38
|
+
axis : "y",
|
|
39
|
+
position: "left",
|
|
40
|
+
scale : "y", // this._chart._y,
|
|
41
|
+
labelX : -3,
|
|
42
|
+
labelY : -8,
|
|
43
|
+
},
|
|
44
|
+
path: {
|
|
45
|
+
label : 'Altitude',
|
|
46
|
+
scaleX : 'distance',
|
|
47
|
+
scaleY : 'altitude',
|
|
48
|
+
className : 'area',
|
|
49
|
+
color : color.area || theme,
|
|
50
|
+
strokeColor : opts.detached ? color.stroke : '#000',
|
|
51
|
+
strokeOpacity: "1",
|
|
52
|
+
fillOpacity : opts.detached ? (color.alpha || '0.8') : 1,
|
|
53
|
+
preferCanvas : opts.preferCanvas,
|
|
54
|
+
},
|
|
55
|
+
tooltip: {
|
|
56
|
+
name: 'y',
|
|
57
|
+
chart: (item) => L._("y: ") + _.round(item[opts.yAttr], opts.decimalsY) + " " + altitude.label,
|
|
58
|
+
marker: (item) => _.round(item[opts.yAttr], opts.decimalsY) + " " + altitude.label,
|
|
59
|
+
order: 10,
|
|
60
|
+
},
|
|
61
|
+
summary: {
|
|
62
|
+
"minele" : {
|
|
63
|
+
label: "Min Elevation: ",
|
|
64
|
+
value: (track, unit) => (track.elevation_min || 0).toFixed(2) + ' ' + unit,
|
|
65
|
+
order: 30,
|
|
66
|
+
},
|
|
67
|
+
"maxele" : {
|
|
68
|
+
label: "Max Elevation: ",
|
|
69
|
+
value: (track, unit) => (track.elevation_max || 0).toFixed(2) + ' ' + unit,
|
|
70
|
+
order: 31,
|
|
71
|
+
},
|
|
72
|
+
"avgele" : {
|
|
73
|
+
label: "Avg Elevation: ",
|
|
74
|
+
value: (track, unit) => (track.elevation_avg || 0).toFixed(2) + ' ' + unit,
|
|
75
|
+
order: 32,
|
|
76
|
+
},
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
}
|
package/src/handlers/distance.js
CHANGED
|
@@ -1,45 +1,46 @@
|
|
|
1
|
-
export function Distance() {
|
|
2
|
-
|
|
3
|
-
const _ = L.Control.Elevation.Utils;
|
|
4
|
-
|
|
5
|
-
let opts = this.options;
|
|
6
|
-
let distance = {};
|
|
7
|
-
|
|
8
|
-
opts.distanceFactor = opts.imperial ? this.__mileFactor : (opts.distanceFactor || 1); // 1 km = (1000 m)
|
|
9
|
-
distance.label = opts.imperial ? "mi" : opts.xLabel;
|
|
10
|
-
|
|
11
|
-
return {
|
|
12
|
-
name: 'distance',
|
|
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
|
-
}
|
|
1
|
+
export function Distance() {
|
|
2
|
+
|
|
3
|
+
const _ = L.Control.Elevation.Utils;
|
|
4
|
+
|
|
5
|
+
let opts = this.options;
|
|
6
|
+
let distance = {};
|
|
7
|
+
|
|
8
|
+
opts.distanceFactor = opts.imperial ? this.__mileFactor : (opts.distanceFactor || 1); // 1 km = (1000 m)
|
|
9
|
+
distance.label = opts.imperial ? "mi" : opts.xLabel;
|
|
10
|
+
|
|
11
|
+
return {
|
|
12
|
+
name: 'distance',
|
|
13
|
+
required: true,
|
|
14
|
+
attr: 'dist',
|
|
15
|
+
unit: distance.label,
|
|
16
|
+
decimals: 5,
|
|
17
|
+
pointToAttr: (_, i) => (i > 0 ? this._data[i - 1].dist : 0) + (this._data[i].latlng.distanceTo(this._data[i > 0 ? i - 1 : i].latlng) * opts.distanceFactor) / 1000, // convert back km to meters
|
|
18
|
+
// stats: { total: _.iSum },
|
|
19
|
+
onPointAdded: (distance, i) => this.track_info.distance = distance,
|
|
20
|
+
scale: opts.distance && {
|
|
21
|
+
axis : "x",
|
|
22
|
+
position: "bottom",
|
|
23
|
+
scale : "x", // this._chart._x,
|
|
24
|
+
labelY : 25,
|
|
25
|
+
labelX : () => this._width() + 6,
|
|
26
|
+
ticks : () => _.clamp(this._chart._xTicks() / 2, [4, +Infinity]),
|
|
27
|
+
},
|
|
28
|
+
grid: opts.distance && {
|
|
29
|
+
axis : "x",
|
|
30
|
+
position : "bottom",
|
|
31
|
+
scale : "x" // this._chart._x,
|
|
32
|
+
},
|
|
33
|
+
tooltip: opts.distance && {
|
|
34
|
+
name: 'x',
|
|
35
|
+
chart: (item) => L._("x: ") + _.round(item[opts.xAttr], opts.decimalsX) + " " + distance.label,
|
|
36
|
+
order: 20
|
|
37
|
+
},
|
|
38
|
+
summary: opts.distance && {
|
|
39
|
+
"totlen" : {
|
|
40
|
+
label: "Total Length: ",
|
|
41
|
+
value: (track) => (track.distance || 0).toFixed(2) + ' ' + distance.label,
|
|
42
|
+
order: 10
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
}
|
package/src/index.css
CHANGED
|
@@ -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
|
}
|
|
@@ -270,8 +269,8 @@
|
|
|
270
269
|
--ele-area: #9CC222;
|
|
271
270
|
--ele-grid: #CCC;
|
|
272
271
|
--ele-brush: rgba(99, 126, 11, 0.4);
|
|
273
|
-
--ele-icon: url(../images/elevation-lime.svg);
|
|
274
272
|
--ele-poly: #566B13;
|
|
273
|
+
--ele-line: #70ab00;
|
|
275
274
|
}
|
|
276
275
|
|
|
277
276
|
/* STEELBLUE THEME //////////////////////////////////////////////// */
|
|
@@ -279,7 +278,7 @@
|
|
|
279
278
|
--ele-axis: #0D1821;
|
|
280
279
|
--ele-area: #4682B4;
|
|
281
280
|
--ele-brush: rgba(23, 74, 117, 0.4);
|
|
282
|
-
--ele-
|
|
281
|
+
--ele-line: #174A75;
|
|
283
282
|
}
|
|
284
283
|
|
|
285
284
|
/* PURPLE THEME /////////////////////////////////////////////////// */
|
|
@@ -287,7 +286,7 @@
|
|
|
287
286
|
--ele-bg: rgba(115, 44, 123, 0.2);
|
|
288
287
|
--ele-area: #732C7B;
|
|
289
288
|
--ele-brush: rgba(74, 14, 80, 0.4);
|
|
290
|
-
--ele-
|
|
289
|
+
--ele-line: #732c7b;
|
|
291
290
|
}
|
|
292
291
|
|
|
293
292
|
/* YELLOW THEME /////////////////////////////////////////////////// */
|
|
@@ -312,6 +311,7 @@
|
|
|
312
311
|
--ele-alpha: 0.45;
|
|
313
312
|
--ele-stroke: #4682B4;
|
|
314
313
|
--ele-circle: #fff;
|
|
314
|
+
--ele-line: #000;
|
|
315
315
|
}
|
|
316
316
|
|
|
317
317
|
.elevation-detached.lightblue-theme .area {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><defs/><path fill="#addb55" fill-opacity=".8" d="M23.1 20.8l-4.2-8-3.9-.2-2.7 1.8-2.4-5.5-5.2 6.2v5.7" opacity=".9"/><path fill="none" stroke="#70ab00" stroke-width="1.5" d="M4.7 14.8h1.1l4.3-6.2 2.5 5.6 2.5-2.3 3.7.2 4 8.3v.4"/><path fill="none" stroke="#737373" stroke-linecap="square" d="M3.4 5v19.8M24.7 22.4H.9"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><defs/><path fill="#b659c1" fill-opacity=".8" d="M23.1 20.8l-4.2-8-3.9-.2-2.7 1.8-2.4-5.5-5.2 6.2v5.7" opacity=".9"/><path fill="none" stroke="#732c7b" stroke-width="1.5" d="M4.7 14.8h1.1l4.3-6.2 2.5 5.6 2.5-2.3 3.7.2 4 8.3v.4"/><path fill="none" stroke="#737373" stroke-linecap="square" d="M3.4 5v19.8M24.7 22.4H.9"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><defs/><path fill="#4682b4" fill-opacity=".8" d="M23.1 20.8l-4.2-8-3.9-.2-2.7 1.8-2.4-5.5-5.2 6.2v5.7" opacity=".9"/><path fill="none" stroke="#174a75" stroke-width="1.5" d="M4.7 14.8h1.1l4.3-6.2 2.5 5.6 2.5-2.3 3.7.2 4 8.3v.4"/><path fill="none" stroke="#737373" stroke-linecap="square" d="M3.4 5v19.8M24.7 22.4H.9"/></svg>
|