fixes leaflet-elevation in build

This commit is contained in:
Christian Beutel
2024-03-16 19:26:26 +01:00
parent 3dd963c6f4
commit eae455112b
48 changed files with 941 additions and 136 deletions

View File

@@ -0,0 +1,64 @@
export function Acceleration() {
const _ = L.Control.Elevation.Utils;
let opts = this.options;
let acceleration = {};
acceleration.label = opts.accelerationLabel || L._(opts.imperial ? 'ft/s²' : 'm/s²');
opts.accelerationFactor = opts.accelerationFactor || 1;
return {
name: 'acceleration',
unit: acceleration.label,
deltaMax: this.options.accelerationDeltaMax,
clampRange: this.options.accelerationRange,
decimals: 2,
pointToAttr: (_, i) => {
let dv = (this._data[i].speed - this._data[i > 0 ? i - 1 : i].speed) * (1000 / opts.timeFactor);
let dt = (this._data[i].time - this._data[i > 0 ? i - 1 : i].time) / 1000;
return dt > 0 ? Math.abs((dv / dt)) * opts.accelerationFactor : NaN;
},
stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
scale: {
axis : "y",
position : "right",
scale : { min: 0, max: +1 },
tickPadding: 16,
labelX : 25,
labelY : -8,
},
path: {
label : 'Acceleration',
yAttr : 'acceleration',
scaleX : 'distance',
scaleY : 'acceleration',
color : '#050402',
strokeColor : '#000',
strokeOpacity: "0.5",
fillOpacity : "0.25",
},
tooltip: {
chart: (item) => L._("a: ") + item.acceleration + " " + acceleration.label,
marker: (item) => Math.round(item.acceleration) + " " + acceleration.label,
order: 60,
},
summary: {
"minacceleration" : {
label: "Min Acceleration: ",
value: (track, unit) => Math.round(track.acceleration_min || 0) + ' ' + unit,
order: 60
},
"maxacceleration" : {
label: "Max Acceleration: ",
value: (track, unit) => Math.round(track.acceleration_max || 0) + ' ' + unit,
order: 61
},
"avgacceleration": {
label: "Avg Acceleration: ",
value: (track, unit) => Math.round(track.acceleration_avg || 0) + ' ' + unit,
order: 62
},
}
};
}

View File

@@ -0,0 +1,78 @@
export function Altitude() {
const _ = L.Control.Elevation.Utils;
let opts = this.options;
let altitude = {};
let theme = opts.theme.split(' ')[0].replace('-theme', '');
let color = _.Colors[theme] || {};
opts.altitudeFactor = opts.imperial ? this.__footFactor : (opts.altitudeFactor || 1); // 1 m = (1 m)
altitude.label = opts.imperial ? "ft" : opts.yLabel;
return {
name: 'altitude',
required: this.options.slope,
meta: 'z',
unit: altitude.label,
statsName: 'elevation',
deltaMax: this.options.altitudeDeltaMax,
clampRange: this.options.altitudeRange,
// init: ({point}) => {
// // "alt" property is generated inside "leaflet"
// if ("alt" in point) point.meta.ele = point.alt;
// },
pointToAttr: (point, i) => {
if ("alt" in point) point.meta.ele = point.alt; // "alt" property is generated inside "leaflet"
return this._data[i].z *= opts.altitudeFactor;
},
stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
grid: {
axis : "y",
position : "left",
scale : "y" // this._chart._y,
},
scale: {
axis : "y",
position: "left",
scale : "y", // this._chart._y,
labelX : -3,
labelY : -8,
},
path: {
label : 'Altitude',
scaleX : 'distance',
scaleY : 'altitude',
className : 'area',
color : color.area || theme,
strokeColor : opts.detached ? color.stroke : '#000',
strokeOpacity: "1",
fillOpacity : opts.detached ? (color.alpha || '0.8') : 1,
preferCanvas : opts.preferCanvas,
},
tooltip: {
name: 'y',
chart: (item) => L._("y: ") + _.round(item[opts.yAttr], opts.decimalsY) + " " + altitude.label,
marker: (item) => _.round(item[opts.yAttr], opts.decimalsY) + " " + altitude.label,
order: 10,
},
summary: {
"minele" : {
label: "Min Elevation: ",
value: (track, unit) => (track.elevation_min || 0).toFixed(2) + ' ' + unit,
order: 30,
},
"maxele" : {
label: "Max Elevation: ",
value: (track, unit) => (track.elevation_max || 0).toFixed(2) + ' ' + unit,
order: 31,
},
"avgele" : {
label: "Avg Elevation: ",
value: (track, unit) => (track.elevation_avg || 0).toFixed(2) + ' ' + unit,
order: 32,
},
}
};
}

View File

@@ -0,0 +1,54 @@
export function Cadence() {
const _ = L.Control.Elevation.Utils;
return {
name: 'cadence', // <-- Your custom option name (eg. "cadence: true")
unit: 'rpm',
meta: 'cad', // <-- point.meta.cad
coordinateProperties: ["cads", "cadences", "cad", "cadence"], // List of GPX Extensions ("coordinateProperties") to be handled by "@tmcw/toGeoJSON"
pointToAttr: (point, i) => (point.cad ?? point.meta.cad ?? point.prev('cadence')) || 0,
stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
scale: {
axis : "y",
position : "right",
scale : { min: -1, max: +1 },
tickPadding: 16,
labelX : 25,
labelY : -8,
},
path: {
label : 'RPM',
yAttr : 'cadence',
scaleX : 'distance',
scaleY : 'cadence',
color : '#FFF',
strokeColor : 'blue',
strokeOpacity: "0.85",
fillOpacity : "0.1",
},
tooltip: {
name: 'cadence',
chart: (item) => L._("cad: ") + item.cadence + " " + 'rpm',
marker: (item) => Math.round(item.cadence) + " " + 'rpm',
order: 1
},
summary: {
"minrpm": {
label: "Min RPM: ",
value: (track, unit) => Math.round(track.cadence_min || 0) + '&nbsp;' + unit,
// order: 30
},
"maxrpm": {
label: "Max RPM: ",
value: (track, unit) => Math.round(track.cadence_max || 0) + '&nbsp;' + unit,
// order: 30
},
"avgrpm": {
label: "Avg RPM: ",
value: (track, unit) => Math.round(track.cadence_avg || 0) + '&nbsp;' + unit,
// order: 20
},
}
};
}

View File

@@ -0,0 +1,46 @@
export function Distance() {
const _ = L.Control.Elevation.Utils;
let opts = this.options;
let distance = {};
opts.distanceFactor = opts.imperial ? this.__mileFactor : (opts.distanceFactor || 1); // 1 km = (1000 m)
distance.label = opts.imperial ? "mi" : opts.xLabel;
return {
name: 'distance',
required: true,
attr: 'dist',
unit: distance.label,
decimals: 5,
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
// stats: { total: _.iSum },
onPointAdded: (distance, i) => this.track_info.distance = distance,
scale: opts.distance && {
axis : "x",
position: "bottom",
scale : "x", // this._chart._x,
labelY : 25,
labelX : () => this._width() + 6,
ticks : () => _.clamp(this._chart._xTicks() / 2, [4, +Infinity]),
},
grid: opts.distance && {
axis : "x",
position : "bottom",
scale : "x" // this._chart._x,
},
tooltip: opts.distance && {
name: 'x',
chart: (item) => L._("x: ") + _.round(item[opts.xAttr], opts.decimalsX) + " " + distance.label,
order: 20
},
summary: opts.distance && {
"totlen" : {
label: "Total Length: ",
value: (track) => (track.distance || 0).toFixed(2) + '&nbsp;' + distance.label,
order: 10
}
}
};
}

View File

@@ -0,0 +1,53 @@
export function Heart() {
const _ = L.Control.Elevation.Utils;
return {
name: 'heart', // <-- Your custom option name (eg. "heart: true")
unit: 'bpm',
meta: 'hr', // <-- point.meta.hr
coordinateProperties: ["heart", "heartRates", "heartRate"], // List of GPX Extensions ("coordinateProperties") to be handled by "@tmcw/toGeoJSON"
pointToAttr: (point, i) => (point.hr ?? point.meta.hr ?? point.prev('heart')) || 0,
stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
scale: {
axis : "y",
position : "left",
scale : { min: -1, max: +1 },
tickPadding: 25,
labelX : -30,
labelY : -8,
},
path: {
label : 'ECG',
yAttr : 'heart',
scaleX : 'distance',
scaleY : 'heart',
color : 'white',
strokeColor : 'red',
strokeOpacity: "0.85",
fillOpacity : "0.1",
},
tooltip: {
chart: (item) => L._("hr: ") + item.heart + " " + 'bpm',
marker: (item) => Math.round(item.heart) + " " + 'bpm',
order: 1
},
summary: {
"minbpm": {
label: "Min BPM: ",
value: (track, unit) => Math.round(track.heart_min || 0) + '&nbsp;' + unit,
// order: 30
},
"maxbpm": {
label: "Max BPM: ",
value: (track, unit) => Math.round(track.heart_max || 0) + '&nbsp;' + unit,
// order: 30
},
"avgbpm": {
label: "Avg BPM: ",
value: (track, unit) => Math.round(track.heart_avg || 0) + '&nbsp;' + unit,
// order: 20
},
}
};
};

View File

@@ -0,0 +1,45 @@
/**
* @see https://github.com/Raruto/leaflet-elevation/issues/211
*
* @example
* ```js
* L.control.Elevation({ handlers: [ 'Labels' ], labelsRotation: 25, labelsAlign: 'start' })
* ```
*/
export function Labels() {
this.on('elechart_updated', function(e) {
const pointG = this._chart._chart.pane('point');
const textRotation = this.options.labelsRotation ?? -90;
const textAnchor = this.options.labelsAlign;
if (90 == Math.abs(textRotation)) {
pointG.selectAll('text')
.attr('dy', '4px')
.attr("dx", (d, i, el) => Math.sign(textRotation) * (this._height() - d3.select(el[i].parentElement).datum().y - 8) + 'px')
.attr('text-anchor', textRotation > 0 ? 'end' : 'start')
.attr('transform', 'rotate(' + textRotation + ')')
pointG.selectAll('circle')
.attr('r', '2.5')
.attr('fill', '#fff')
.attr("stroke", '#000')
.attr("stroke-width", '1.1');
} else if (!isNaN(textRotation)) {
pointG.selectAll('text')
.attr("dx", "4px")
.attr("dy", "-9px")
.attr('text-anchor', textAnchor ?? (0 == textRotation ? 'start' : 'middle'))
.attr('transform', 'rotate('+ -textRotation +')')
}
});
return { };
}

View File

@@ -0,0 +1,122 @@
/**
* @see https://github.com/Raruto/leaflet-elevation/issues/251
*
* @example
* ```js
* L.control.Elevation({
* altitude: true,
* distance: true,
* handlers: [ 'Altitude', 'Distance', 'LinearGradient', ],
* linearGradient: {
* attr: 'z',
* path: 'altitude',
* range: { 0.0: '#008800', 0.5: '#ffff00', 1.0: '#ff0000' },
* min: 'elevation_min',
* max: 'elevation_max',
* },
* })
* ```
*/
export function LinearGradient() {
if (!this.options.linearGradient) {
return {};
}
const _ = L.Control.Elevation.Utils;
/**
* Initialize gradient color palette.
*/
const get_palette = function ({range, min, max, depth = 256}) {
const canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(0, 0, 0, depth);
canvas.width = 1;
canvas.height = depth;
for (let i in range) {
gradient.addColorStop(i, range[i]);
}
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 1, depth);
const { data } = ctx.getImageData(0, 0, 1, depth);
return {
/**
* Gets the RGB values of a given z value of the current palette.
*
* @param {number} value - Value to get the color for, should be between min and max.
* @returns {string} The RGB values as `rgb(r, g, b)` string
*/
getRGBColor(value) {
const idx = Math.floor(Math.min(Math.max((value - min) / (max - min), 0), 0.999) * depth) * 4;
return 'rgb(' + [data[idx], data[idx + 1], data[idx + 2]].join(',') + ')';
}
};
};
const { preferCanvas } = this.options;
const { attr, path: path_name, range, min, max } = L.extend({
attr: 'z',
path: 'altitude',
range: { 0.0: '#008800', 0.5: '#ffff00', 1.0: '#ff0000' },
min: 'elevation_min',
max: 'elevation_max',
}, (true === this.options.linearGradient) ? {} : this.options.linearGradient);
const gradient_id = path_name + '-gradient-' + _.randomId();
const legend_id = 'legend-' + gradient_id;
// Charte profile gradient
this.on('elechart_axis', () => {
if (!this._data.length) return;
const chart = this._chart;
const path = chart._paths[path_name];
const { defs } = chart._chart.utils;
const palette = get_palette({
min: isFinite(this.track_info[min]) ? this.track_info[min] : 0,
max: isFinite(this.track_info[max]) ? this.track_info[max] : 1,
range,
});
let gradient;
if (preferCanvas) {
/** ref: `path.__fillStyle` within L.Control.Elevation.Utils::drawCanvas(ctx, path) */
path.__fillStyle = gradient = chart._context.createLinearGradient(0, 0, chart._width(), 0);
} else {
defs.select('#' + gradient_id).remove();
gradient = defs.append('svg:linearGradient').attr('id', gradient_id);
gradient.addColorStop = function(offset, color) { gradient.append('svg:stop').attr('offset', offset).attr('stop-color', color) };
path.attr('fill', 'url(#' + gradient_id + ')').classed('area', false);
}
// Generate gradient for each segment picking colors from palette
for (let i = 0, data = this._data; i < data.length; i++) {
gradient.addColorStop((i) / data.length, palette.getRGBColor(data[i][attr]));
}
});
// Legend item gradient
this.on('elechart_updated', () => {
const chart = this._chart;
const { defs } = chart._chart.utils;
defs.select('#' + legend_id).remove();
const legendGradient = defs.append('svg:linearGradient').attr('id', legend_id);
Object.keys(range).sort().forEach(i => legendGradient.append('svg:stop').attr('offset', i).attr('stop-color', range[i]));
chart._container
.select('.legend-' + path_name + ' > rect')
.attr('fill', 'url(#' + legend_id + ')')
.classed('area', false);
});
return { };
}

View File

@@ -0,0 +1,65 @@
export function Pace() {
const _ = L.Control.Elevation.Utils;
let opts = this.options;
let pace = {};
pace.label = opts.paceLabel || L._(opts.imperial ? 'min/mi' : 'min/km');
opts.paceFactor = opts.paceFactor || 60; // 1 min = 60 sec
return {
name: 'pace',
unit: pace.label,
deltaMax: this.options.paceDeltaMax,
clampRange: this.options.paceRange,
decimals: 2,
pointToAttr: (_, i) => {
let dx = (this._data[i].dist - this._data[i > 0 ? i - 1 : i].dist) * 1000;
let dt = this._data[i].time - this._data[ i > 0 ? i - 1 : i].time;
return dx > 0 ? Math.abs((dt / dx) / opts.paceFactor) : NaN;
},
stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
scale : (this.options.pace && this.options.pace != "summary") && {
axis : "y",
position : "right",
scale : { min : 0, max : +1 },
tickPadding: 16,
labelX : 25,
labelY : -8,
},
path: (this.options.pace && this.options.pace != "summary") && {
// name : 'pace',
label : 'Pace',
yAttr : "pace",
scaleX : 'distance',
scaleY : 'pace',
color : '#03ffff',
strokeColor : '#000',
strokeOpacity: "0.5",
fillOpacity : "0.25",
},
tooltip: (this.options.pace) && {
chart: (item) => L._('pace: ') + item.pace + " " + pace.label,
marker: (item) => Math.round(item.pace) + " " + pace.label,
order: 50,
},
summary: (this.options.pace) && {
"minpace" : {
label: "Min Pace: ",
value: (track, unit) => Math.round(track.pace_min || 0) + '&nbsp;' + unit,
order: 51
},
"maxpace" : {
label: "Max Pace: ",
value: (track, unit) => Math.round(track.pace_max || 0) + '&nbsp;' + unit,
order: 51
},
"avgpace": {
label: "Avg Pace: ",
value: (track, unit) => Math.round(track.pace_avg || 0) + '&nbsp;' + unit,
order: 52
},
}
};
}

View File

@@ -0,0 +1,109 @@
/**
* @see https://github.com/Igor-Vladyka/leaflet.motion
*
* @example
* ```js
* L.control.Elevation({ handlers: [ 'Runner' ], runnerOptions: { polyline: {..}, motion: {..}, marker {..} } })
* ```
*/
export async function Runner() {
await this.import(this.__LMOTION || 'https://unpkg.com/leaflet.motion@0.3.2/dist/leaflet.motion.min.js', typeof L.Motion !== 'object')
let { runnerOptions } = this.options;
runnerOptions = L.extend(
{ polyline: {}, motion: {}, marker: undefined },
'object' === typeof runnerOptions ? runnerOptions : {}
);
// Custom tooltips
this._registerTooltip({
name: 'here',
marker: (item) => L._("You are here: "),
order: 1,
});
this._registerTooltip({
name: 'distance',
marker: (item) => Math.round(item.dist) + " " + this.options.xLabel,
order: 2,
});
this.addCheckpoint = function (checkpoint) {
return this._registerCheckPoint({ // <-- NB these are private functions use them at your own risk!
latlng: this._findItemForX(this._x(checkpoint.dist)).latlng,
label: checkpoint.label || ''
});
}
this.addRunner = function (runner) {
let x = this._x(runner.dist);
let y = this._y(this._findItemForX(x).z)
let g = d3.select(this._container)
.select('svg > g')
.append("svg:circle")
.attr("class", "runner " + this.options.theme + " height-focus circle-lower")
.attr("r", 6)
.attr("cx", x)
.attr("cy", y);
return g;
}
this.setPositionFromLatLng = function (latlng) {
this._onMouseMoveLayer({ latlng: latlng }); // Update map and chart "markers" from latlng
};
this.tick = function (runner, dist = 0, inc = 0.1) {
dist = (dist <= this.track_info.distance - inc) ? dist + inc : 0;
this.updateRunnerPos(runner, dist);
setTimeout(() => this.tick(runner, dist), 150);
};
this.updateRunnerPos = function (runner, pos) {
let curr, x;
if (pos instanceof L.LatLng) {
curr = this._findItemForLatLng(pos);
x = this._x(curr.dist);
} else {
x = this._x(pos);
curr = this._findItemForX(x);
}
runner
.attr("cx", x)
.attr("cy", this._y(curr.z));
this.setPositionFromLatLng(curr.latlng);
};
this.animate = function (layer, speed = 1500) {
if (this._runner) {
this._runner.remove();
}
layer.setStyle({ opacity: 0.5 });
const geo = L.geoJson(layer.toGeoJSON(), { coordsToLatLng: (coords) => L.latLng(coords[0], coords[1], coords[2] * (this.options.altitudeFactor || 1)) });
this._runner = L.motion.polyline(
geo.toGeoJSON().features[0].geometry.coordinates,
L.extend({}, { color: 'red', pane: 'elevationPane', attribution: '' }, runnerOptions.polyline),
L.extend({}, { auto: true, speed: speed, }, runnerOptions.motion),
runnerOptions.marker || undefined
);
// Override default function behavior: `L.Motion.Polyline::_drawMarker()`
this._runner._drawMarker = new Proxy(this._runner._drawMarker, {
apply: (target, thisArg, argArray) => {
thisArg._runner = thisArg._runner || this.addRunner({ dist: 0 });
this.updateRunnerPos(thisArg._runner, argArray[0]);
return target.apply(thisArg, argArray);
}
});
this._runner.addTo(this._map);
};
return {};
}

View File

@@ -0,0 +1,79 @@
export function Slope() {
const _ = L.Control.Elevation.Utils;
let opts = this.options;
let slope = {};
slope.label = opts.slopeLabel || '%';
return {
name: 'slope',
meta: 'slope',
unit: slope.label,
deltaMax: this.options.slopedDeltaMax,
clampRange: this.options.slopeRange,
decimals: 2,
pointToAttr: (_, i) => { // slope in % = ( dy / dx ) * 100;
let dx = (this._data[i].dist - this._data[i > 0 ? i - 1 : i].dist) * 1000;
let dy = this._data[i][this.options.yAttr] - this._data[i > 0 ? i - 1 : i][this.options.yAttr];
return dx !== 0 ? (dy / dx) * 100 : NaN;
},
onPointAdded: (_, i) => {
let dz = this._data[i][this.options.yAttr] - this._data[i > 0 ? i - 1 : i][this.options.yAttr];
if (dz > 0) this.track_info.ascent = (this.track_info.ascent || 0) + dz; // Total Ascent
else if (dz < 0) this.track_info.descent = (this.track_info.descent || 0) - dz; // Total Descent
},
stats: { max: _.iMax, min: _.iMin, avg: _.iAvg, },
scale: {
axis : "y",
position : "right",
scale : { min: -1, max: +1 },
tickPadding: 16,
labelX : 25,
labelY : -8,
},
path: {
label : 'Slope',
yAttr : 'slope',
scaleX : 'distance',
scaleY : 'slope',
color : '#F00',
strokeColor : '#000',
strokeOpacity: "0.5",
fillOpacity : "0.25",
},
tooltip: {
chart: (item) => L._("m: ") + item.slope + slope.label,
marker: (item) => Math.round(item.slope) + slope.label,
order: 40,
},
summary: {
"minslope": {
label: "Min Slope: ",
value: (track, unit) => Math.round(track.slope_min || 0) + '&nbsp;' + unit,
order: 40
},
"maxslope": {
label: "Max Slope: ",
value: (track, unit) => Math.round(track.slope_max || 0) + '&nbsp;' + unit,
order: 41
},
"avgslope": {
label: "Avg Slope: ",
value: (track, unit) => Math.round(track.slope_avg || 0) + '&nbsp;' + unit,
order: 42
},
"ascent" : {
label: "Total Ascent: ",
value: (track, unit) => Math.round(track.ascent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm'),
order: 43
},
"descent" : {
label: "Total Descent: ",
value: (track, unit) => Math.round(track.descent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm'),
order: 45
},
}
};
}

View File

@@ -0,0 +1,66 @@
export function Speed() {
const _ = L.Control.Elevation.Utils;
let opts = this.options;
let speed = {};
speed.label = opts.speedLabel || L._(opts.imperial ? 'mph' : 'km/h');
opts.speedFactor = opts.speedFactor || 1;
return {
name: 'speed',
required: (this.options.acceleration),
unit: speed.label,
deltaMax: this.options.speedDeltaMax,
clampRange: this.options.speedRange,
decimals: 2,
pointToAttr: (_, i) => {
let dx = (this._data[i].dist - this._data[i > 0 ? i - 1 : i].dist) * 1000;
let dt = this._data[i].time - this._data[ i > 0 ? i - 1 : i].time;
return dt > 0 ? Math.abs((dx / dt) * opts.timeFactor) * opts.speedFactor : NaN;
},
stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
scale : (this.options.speed && this.options.speed != "summary") && {
axis : "y",
position : "right",
scale : { min : 0, max : +1 },
tickPadding: 16,
labelX : 25,
labelY : -8,
},
path: (this.options.speed && this.options.speed != "summary") && {
// name : 'speed',
label : 'Speed',
yAttr : "speed",
scaleX : 'distance',
scaleY : 'speed',
color : '#03ffff',
strokeColor : '#000',
strokeOpacity: "0.5",
fillOpacity : "0.25",
},
tooltip: (this.options.speed) && {
chart: (item) => L._('v: ') + item.speed + " " + speed.label,
marker: (item) => Math.round(item.speed) + " " + speed.label,
order: 50,
},
summary: (this.options.speed) && {
"minspeed" : {
label: "Min Speed: ",
value: (track, unit) => Math.round(track.speed_min || 0) + '&nbsp;' + unit,
order: 51
},
"maxspeed" : {
label: "Max Speed: ",
value: (track, unit) => Math.round(track.speed_max || 0) + '&nbsp;' + unit,
order: 51
},
"avgspeed": {
label: "Avg Speed: ",
value: (track, unit) => Math.round(track.speed_avg || 0) + '&nbsp;' + unit,
order: 52
},
}
};
}

View File

@@ -0,0 +1,62 @@
export function Temperature() {
const _ = L.Control.Elevation.Utils;
let temperature = {};
let opts = this.options;
temperature.label = opts.label || L._(opts.imperial ? '°F' : '°C');
// Fahrenheit = (Celsius * 9/5) + 32
opts.temperatureFactor1 = opts.temperatureFactor1 ?? (opts.imperial ? 1.8 : 1);
opts.temperatureFactor2 = opts.temperatureFactor2 ?? (opts.imperial ? 32 : 0);
return {
name: 'temperature', // <-- Your custom option name (eg. "temperature: true")
unit: temperature.label,
meta: 'atemps', // <-- point.meta.atemps
coordinateProperties: ["atemps"], // List of GPX Extensions ("coordinateProperties") to be handled by "@tmcw/toGeoJSON"
deltaMax: this.options.temperatureDeltaMax,
clampRange: this.options.temperatureRange,
decimals: 2,
pointToAttr: (point, i) => (point.meta.atemps ?? point.meta.atemps ?? point.prev('temperature')) * opts.temperatureFactor1 + opts.temperatureFactor2,
stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
scale: {
axis : "y",
position : "right",
scale : { min: -1, max: +1 },
tickPadding: 16,
labelX : +18,
labelY : -8,
},
path: {
label : temperature.label,
yAttr : 'temperature',
scaleX : 'distance',
scaleY : 'temperature',
color : 'transparent',
strokeColor : '#000',
strokeOpacity: "0.85",
// fillOpacity : "0.1",
},
tooltip: {
name: 'temperature',
chart: (item) => L._("Temp: ") + Math.round(item.temperature).toLocaleString() + " " + temperature.label,
marker: (item) => Math.round(item.temperature).toLocaleString() + " " + temperature.label,
order: 1
},
summary: {
"mintemp": {
label: "Min Temp: ",
value: (track, unit) => Math.round(track.temperature_min || 0) + '&nbsp;' + unit,
},
"maxtemp": {
label: "Max Temp: ",
value: (track, unit) => Math.round(track.temperature_max || 0) + '&nbsp;' + unit,
},
"avgtemp": {
label: "Avg Temp: ",
value: (track, unit) => Math.round(track.temperature_avg || 0) + '&nbsp;' + unit,
},
}
};
}

View File

@@ -0,0 +1,103 @@
export function Time() {
const _ = L.Control.Elevation.Utils;
let opts = this.options;
let time = {};
time.label = opts.timeLabel || 't';
opts.timeFactor = opts.timeFactor || 3600;
/**
* Common AVG speeds:
* ----------------------
* slow walk = 1.8 km/h
* walking = 3.6 km/h <-- default: 3.6
* running = 10.8 km/h
* cycling = 18 km/h
* driving = 72 km/h
* ----------------------
*/
this._timeAVGSpeed = (opts.timeAVGSpeed || 3.6) * (opts.speedFactor || 1);
if (!opts.timeFormat) {
opts.timeFormat = (time) => (new Date(time)).toLocaleString().replaceAll('/', '-').replaceAll(',', ' ');
} else if (opts.timeFormat == 'time') {
opts.timeFormat = (time) => (new Date(time)).toLocaleTimeString();
} else if (opts.timeFormat == 'date') {
opts.timeFormat = (time) => (new Date(time)).toLocaleDateString();
}
opts.xTimeFormat = opts.xTimeFormat || ((t) => _.formatTime(t).split("'")[0]);
return {
name: 'time',
required: (this.options.speed || this.options.acceleration || this.options.timestamps),
coordinateProperties: ["coordTimes", "times", "time"],
coordPropsToMeta: _.parseDate,
pointToAttr: function(point, i) {
// Add missing timestamps (see: options.timeAVGSpeed)
if (!point.meta || !point.meta.time) {
point.meta = point.meta || {};
if (i > 0) {
let dx = (this._data[i].dist - this._data[i - 1].dist);
let t0 = this._data[i - 1].time.getTime();
point.meta.time = new Date(t0 + ( dx / this._timeAVGSpeed) * this.options.timeFactor * 1000);
} else {
point.meta.time = new Date(Date.now())
}
}
// Handle timezone offset
let time = (point.meta.time.getTime() - point.meta.time.getTimezoneOffset() * 60 * 1000 !== 0) ? point.meta.time : 0;
// Update duration
this._data[i].duration = i > 0 ? (this._data[i - 1].duration || 0) + Math.abs(time - this._data[i - 1].time) : 0;
return time;
},
onPointAdded: (_, i) => this.track_info.time = this._data[i].duration,
scale: (opts.time && opts.time != "summary" && !L.Browser.mobile) && {
axis : "x",
position : "top",
scale : {
attr : "duration",
min : 0,
},
label : time.label,
labelY : -10,
labelX : () => this._width(),
name : "time",
ticks : () => _.clamp(this._chart._xTicks() / 2, [4, +Infinity]),
tickFormat : (d) => (d == 0 ? '' : opts.xTimeFormat(d)),
onAxisMount: axis => {
axis.select(".domain")
.remove();
axis.selectAll("text")
.attr('opacity', 0.65)
.style('font-family', 'Monospace')
.style('font-size', '110%');
axis.selectAll(".tick line")
.attr('y2', this._height())
.attr('stroke-dasharray', 2)
.attr('opacity', 0.75);
}
},
tooltips: [
(this.options.time) && {
name: 'time',
chart: (item) => L._("T: ") + _.formatTime(item.duration || 0),
order: 20
},
(this.options.timestamps) && {
name: 'date',
chart: (item) => L._("t: ") + this.options.timeFormat(item.time),
order: 21,
}
],
summary: (this.options.time) && {
"tottime" : {
label: "Total Time: ",
value: (track) => _.formatTime(track.time || 0),
order: 20
}
}
};
}