Speed in min / km (running pace)

[hupe13]

Hi Raruto,

someone in my forum asks:
There is no option to show the PACE (in min/km) instead of SPEED (in km/h). For runners, an information 12 km/h is nearly useless, we’ll measure with 6:12 min/km. Is it possible, to provide an option for this?
Another question is:
The distance (in elevation chart) is every 2 km. Is it possible to change this? If I can configure this, please give me a hint.

Thank you very much.

[Raruto]

Hi hupe,

There is no option to show the PACE (in min/km) instead of SPEED (in km/h). For runners, an information 12 km/h is nearly useless, we’ll measure with 6:12 min/km. Is it possible, to provide an option for this?

Currently no, but starting from version 2.0.0 I tried to standardize the process that should allow the use of custom extensions (you can check out src/handlers and leaflet-elevation_extended-ui.html for an initial approach). In addition to this, I warn you that from this version only the really necessary components are loaded (as needed, if classes are not found in the global scope), if you don't like it you can always create a your own static bundle that exposes the "class" definitions that you really intend to use (maybe it's not very clear, but you can check here and here to better understand the actual process of code injection, anyway, you can understand how it works in detail, through the same example above leaflet-elevation_extended-ui.html). As usual, do not hesitate to make a pull request if you can produce something concrete (and useful for others too).

The distance (in elevation chart) is every 2 km. Is it possible to change this? If I can configure this, please give me a hint.

The tick size issue is a bit tricky because first you have to understand how d3 works (which is a fairly low level library), however, I would like to point out some of these options that allow you to alter the total number of ticks to show (probably it is also possible to set a predefined width, but I'm not so much versed in this library). For more information you can also start from here:

• https://github.com/d3/d3-axis
• https://github.com/Raruto/leaflet-elevation/blob/master/src/components/d3.js#L40-L94
• Excessive approximation of time ticks (large tracks) #170

Have a nice day,
Raruto

[hupe13]

Thanks very much. I'll take a look at it.

[Raruto]

In version 2.2.0 i added some sample code within the leaflet-elevation_extended-ui.html demo.

leaflet-elevation/examples/leaflet-elevation_extended-ui.html

Line 262 in 46918ce

// 'Pace', // <-- same as: import("../src/handlers/pace.js")

leaflet-elevation/examples/leaflet-elevation_extended-ui.html

Line 270 in 46918ce

L.Control.Elevation.MyPace, // <-- see custom functions declared above

leaflet-elevation/examples/leaflet-elevation_extended-ui.html

Lines 156 to 219 in 46918ce

	L.Control.Elevation.MyPace = function() {
	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,
	decimals: 2,
	pointToAttr: (point, 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) : 0;
	},
	stats: {
	max: (pace, max = -Infinity) => (pace > max ? pace : max),
	min: (pace, min = +Infinity) => (pace < min ? pace : min),
	avg: (pace, avg = 0, idx = 1) => (pace + avg * (idx - 1)) / idx,
	},
	scale : {
	axis : "y",
	position : "right",
	scale : { min : 0, max : +1 },
	tickPadding: 16,
	labelX : 25,
	labelY : -8,
	},
	path: {
	// name : 'pace',
	label : 'Pace',
	yAttr : "pace",
	scaleX : 'distance',
	scaleY : 'pace',
	color : '#03ffff',
	strokeColor : '#000',
	strokeOpacity: "0.5",
	fillOpacity : "0.25",
	},
	tooltip: {
	chart: (item) => L._('pace: ') + item.pace + " " + pace.label,
	marker: (item) => Math.round(item.pace) + " " + pace.label,
	order: 55,
	},
	summary: {
	"minpace" : {
	label: "Min Pace: ",
	value: (track, unit) => Math.round(track.pace_min || 0) + '&nbsp;' + unit,
	order: 55
	},
	"maxpace" : {
	label: "Max Pace: ",
	value: (track, unit) => Math.round(track.pace_max || 0) + '&nbsp;' + unit,
	order: 56
	},
	"avgpace": {
	label: "Avg Pace: ",
	value: (track, unit) => Math.round(track.pace_avg || 0) + '&nbsp;' + unit,
	order: 57
	},
	}
	};
	}

---

However, that function is also present among the built-in handlers (the example is purely demonstrative on how to use your own custom handler), as usual, improved edits and pull requests are always welcome:

leaflet-elevation/src/handlers/pace.js

Lines 1 to 65 in 46918ce

	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) : 0;
	},
	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
	},
	}
	};
	}

Have a nice day,
Raruto