fixes leaflet-elevation in build
This commit is contained in:
64
web/static/vendor/leaflet-elevation/src/handlers/acceleration.js
vendored
Normal file
64
web/static/vendor/leaflet-elevation/src/handlers/acceleration.js
vendored
Normal 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
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
78
web/static/vendor/leaflet-elevation/src/handlers/altitude.js
vendored
Normal file
78
web/static/vendor/leaflet-elevation/src/handlers/altitude.js
vendored
Normal 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,
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
54
web/static/vendor/leaflet-elevation/src/handlers/cadence.js
vendored
Normal file
54
web/static/vendor/leaflet-elevation/src/handlers/cadence.js
vendored
Normal 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) + ' ' + unit,
|
||||
// order: 30
|
||||
},
|
||||
"maxrpm": {
|
||||
label: "Max RPM: ",
|
||||
value: (track, unit) => Math.round(track.cadence_max || 0) + ' ' + unit,
|
||||
// order: 30
|
||||
},
|
||||
"avgrpm": {
|
||||
label: "Avg RPM: ",
|
||||
value: (track, unit) => Math.round(track.cadence_avg || 0) + ' ' + unit,
|
||||
// order: 20
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
46
web/static/vendor/leaflet-elevation/src/handlers/distance.js
vendored
Normal file
46
web/static/vendor/leaflet-elevation/src/handlers/distance.js
vendored
Normal 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) + ' ' + distance.label,
|
||||
order: 10
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
53
web/static/vendor/leaflet-elevation/src/handlers/heart.js
vendored
Normal file
53
web/static/vendor/leaflet-elevation/src/handlers/heart.js
vendored
Normal 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) + ' ' + unit,
|
||||
// order: 30
|
||||
},
|
||||
"maxbpm": {
|
||||
label: "Max BPM: ",
|
||||
value: (track, unit) => Math.round(track.heart_max || 0) + ' ' + unit,
|
||||
// order: 30
|
||||
},
|
||||
"avgbpm": {
|
||||
label: "Avg BPM: ",
|
||||
value: (track, unit) => Math.round(track.heart_avg || 0) + ' ' + unit,
|
||||
// order: 20
|
||||
},
|
||||
}
|
||||
};
|
||||
};
|
||||
45
web/static/vendor/leaflet-elevation/src/handlers/labels.js
vendored
Normal file
45
web/static/vendor/leaflet-elevation/src/handlers/labels.js
vendored
Normal 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 { };
|
||||
}
|
||||
122
web/static/vendor/leaflet-elevation/src/handlers/lineargradient.js
vendored
Normal file
122
web/static/vendor/leaflet-elevation/src/handlers/lineargradient.js
vendored
Normal 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 { };
|
||||
}
|
||||
65
web/static/vendor/leaflet-elevation/src/handlers/pace.js
vendored
Normal file
65
web/static/vendor/leaflet-elevation/src/handlers/pace.js
vendored
Normal 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) + ' ' + unit,
|
||||
order: 51
|
||||
},
|
||||
"maxpace" : {
|
||||
label: "Max Pace: ",
|
||||
value: (track, unit) => Math.round(track.pace_max || 0) + ' ' + unit,
|
||||
order: 51
|
||||
},
|
||||
"avgpace": {
|
||||
label: "Avg Pace: ",
|
||||
value: (track, unit) => Math.round(track.pace_avg || 0) + ' ' + unit,
|
||||
order: 52
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
109
web/static/vendor/leaflet-elevation/src/handlers/runner.js
vendored
Normal file
109
web/static/vendor/leaflet-elevation/src/handlers/runner.js
vendored
Normal 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 {};
|
||||
}
|
||||
79
web/static/vendor/leaflet-elevation/src/handlers/slope.js
vendored
Normal file
79
web/static/vendor/leaflet-elevation/src/handlers/slope.js
vendored
Normal 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) + ' ' + unit,
|
||||
order: 40
|
||||
},
|
||||
"maxslope": {
|
||||
label: "Max Slope: ",
|
||||
value: (track, unit) => Math.round(track.slope_max || 0) + ' ' + unit,
|
||||
order: 41
|
||||
},
|
||||
"avgslope": {
|
||||
label: "Avg Slope: ",
|
||||
value: (track, unit) => Math.round(track.slope_avg || 0) + ' ' + unit,
|
||||
order: 42
|
||||
},
|
||||
"ascent" : {
|
||||
label: "Total Ascent: ",
|
||||
value: (track, unit) => Math.round(track.ascent || 0) + ' ' + (this.options.imperial ? 'ft' : 'm'),
|
||||
order: 43
|
||||
},
|
||||
"descent" : {
|
||||
label: "Total Descent: ",
|
||||
value: (track, unit) => Math.round(track.descent || 0) + ' ' + (this.options.imperial ? 'ft' : 'm'),
|
||||
order: 45
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
66
web/static/vendor/leaflet-elevation/src/handlers/speed.js
vendored
Normal file
66
web/static/vendor/leaflet-elevation/src/handlers/speed.js
vendored
Normal 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) + ' ' + unit,
|
||||
order: 51
|
||||
},
|
||||
"maxspeed" : {
|
||||
label: "Max Speed: ",
|
||||
value: (track, unit) => Math.round(track.speed_max || 0) + ' ' + unit,
|
||||
order: 51
|
||||
},
|
||||
"avgspeed": {
|
||||
label: "Avg Speed: ",
|
||||
value: (track, unit) => Math.round(track.speed_avg || 0) + ' ' + unit,
|
||||
order: 52
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
62
web/static/vendor/leaflet-elevation/src/handlers/temperature.js
vendored
Normal file
62
web/static/vendor/leaflet-elevation/src/handlers/temperature.js
vendored
Normal 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) + ' ' + unit,
|
||||
},
|
||||
"maxtemp": {
|
||||
label: "Max Temp: ",
|
||||
value: (track, unit) => Math.round(track.temperature_max || 0) + ' ' + unit,
|
||||
},
|
||||
"avgtemp": {
|
||||
label: "Avg Temp: ",
|
||||
value: (track, unit) => Math.round(track.temperature_avg || 0) + ' ' + unit,
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
103
web/static/vendor/leaflet-elevation/src/handlers/time.js
vendored
Normal file
103
web/static/vendor/leaflet-elevation/src/handlers/time.js
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user