@raruto/leaflet-elevation 1.9.4 → 1.9.5

package/src/distance.js

@@ -16,62 +16,53 @@ Elevation.addInitHook(function() {
 		distance.label      = opts.xLabel;
 	}
 
-	this.on("eledata_updated", function(e) {
-		let data = this._data;
-		let i    = e.index;
-
-		let track = this.track_info;
-		let dist  = track.distance || 0;
-
-		let curr = data[i].latlng;
-		let prev = i > 0 ? data[i - 1].latlng : curr;
-
-		let delta = curr.distanceTo(prev) * opts.distanceFactor;
-
-		dist += Math.round(delta / 1000 * 100000) / 100000; // handles floating points calc
-
-		track.distance = dist;
-
-		data[i].dist = dist;
-	});
-
-	this.on("elechart_axis", function() {
-
-		this._chart._registerAxisGrid({
-			axis      : "x",
-			position  : "bottom",
-			scale     : this._chart._x,
-		});
-
+	this._registerDataAttribute({
+		name: 'dist',
+		init: () => {
+			// this.track_info.distance = 0;
+		},
+		fetch: (i) => {
+			let delta = this._data[i].latlng.distanceTo(this._data[i > 0 ? i - 1 : i].latlng) * opts.distanceFactor;
+			return Math.round(delta / 1000 * 100000) / 100000; // handles floating points calc
+		},
+		update: (distance) => {
+			this.track_info.distance = this.track_info.distance || 0;
+			this.track_info.distance += distance;
+			return this.track_info.distance;
+		}
 	});
 
 	if (this.options.distance != "summary") {
 
-		this.on("elechart_axis", function() {
-
-			this._chart._registerAxisScale({
-				axis    : "x",
-				position: "bottom",
-				scale   : this._chart._x,
-				label   : distance.label,
-				labelY  : 25,
-				labelX  : () => this._width() + 6,
-				name    : "distance",
-			});
-
+		this._registerAxisScale({
+			axis    : "x",
+			position: "bottom",
+			scale   : "x", // this._chart._x,
+			label   : distance.label,
+			labelY  : 25,
+			labelX  : () => this._width() + 6,
+			name    : "distance",
 		});
 
 	}
 
+	this._registerAxisGrid({
+		axis      : "x",
+		position  : "bottom",
+		scale     : "x" // this._chart._x,
+	});
+
 	this._registerTooltip({
 		name: 'x',
 		chart: (item) => L._("x: ") + d3.format("." + opts.decimalsX + "f")(item[opts.xAttr]) + " " + distance.label,
+		order: 20
 	});
 
 	this._registerSummary({
 		"totlen"  : {
 			label: "Total Length: ",
-			value: (track) => (track.distance || 0).toFixed(2) + ' ' + distance.label
+			value: (track) => (track.distance || 0).toFixed(2) + ' ' + distance.label,
+			order: 10
 		}
 	});
 

package/src/index.js

@@ -39,9 +39,9 @@ import * as _ from './utils';
 import * as D3 from './components';
 import { Chart } from './chart';
 import { Elevation } from './control';
-import './altitude';
 import './distance';
 import './time';
+import './altitude';
 import './slope';
 import './speed';
 import './acceleration';

package/src/options.js

@@ -12,7 +12,7 @@ export var Options = {
 	distanceMarkers: {
 		lazy: true,
 		distance: true,
-		arrow: false
+		direction: true
 	},
 	decimalsX: 2,
 	decimalsY: 0,
@@ -59,15 +59,15 @@ export var Options = {
 	theme: "lightblue-theme",
 	summary: 'inline',
 	slope: false,
+	slopeDeltaMax: undefined,
+	slopeRange: undefined,
 	speed: false,
-	sLimit: undefined,
+	speedDeltaMax: undefined,
+	speedRange: undefined,
 	time: false,
 	timeFactor: 3600,
 	timeFormat: false,
 	timestamps: false,
-	sDeltaMax: undefined,
-	sInterpolation: "curveStepAfter",
-	sRange: undefined,
 	width: 600,
 	waypoints: true,
 	wptIcons: {

package/src/slope.js

@@ -12,100 +12,116 @@ Elevation.addInitHook(function() {
 
 	slope.label          = opts.slopeLabel || '%';
 
-	if (this.options.slope != "summary") {
-
-		this._registerAxisScale({
-			axis       : "y",
-			position   : "right",
-			scale      : {
-				min        : -1,
-				max        : +1,
-			},
-			tickPadding: 16,
-			label      : slope.label,
-			labelX     : 25,
-			labelY     : -8,
-			name       : 'slope'
-		});
-
-		this._registerAreaPath({
-			name         : 'slope',
-			label        : 'Slope',
-			yAttr        : 'slope',
-			scaleX       : 'distance',
-			scaleY       : 'slope',
-			color        : '#F00',
-			strokeColor  : '#000',
-			strokeOpacity: "0.5",
-			fillOpacity  : "0.25",
-		});
-
-	}
-
-	this.on("eledata_updated", function(e) {
-		let data  = this._data;
-		let i     = e.index;
-		let z     = data[i].z;
-		let delta = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000;
-
-		// Slope / Gain
-		let track = this.track_info;
-		let tAsc  = track.ascent    || 0; // Total Ascent
-		let tDes  = track.descent   || 0; // Total Descent
-		let sMax  = track.slope_max || 0; // Slope Max
-		let sMin  = track.slope_min || 0; // Slope Min
-		let slope = 0;
-
-		if (!isNaN(z)) {
-			let deltaZ  = i > 0 ? z - data[i - 1].z : 0;
-			if (deltaZ > 0)      tAsc += deltaZ;
-			else if (deltaZ < 0) tDes -= deltaZ;
-			// slope in % = ( height / length ) * 100
-			if (delta !== 0)     slope = (deltaZ / delta) * 100;
-		}
-
-		// Try to smooth "crazy" slope values.
-		if (this.options.sDeltaMax) {
-			let deltaS    = i > 0 ? slope - data[i - 1].slope : 0;
-			let maxDeltaS = this.options.sDeltaMax;
-			if (Math.abs(deltaS) > maxDeltaS) {
-				slope       = data[i - 1].slope + maxDeltaS * Math.sign(deltaS);
+	this._registerDataAttribute({
+		name: 'slope',
+		// init: () => {
+		// 	// this.track_info.ascent    = 0;         // Total Ascent
+		// 	// this.track_info.descent   = 0;         // Total Descent
+		// 	// this.track_info.slope_max = -Infinity; // Slope Max
+		// 	// this.track_info.slope_min = +Infinity; // Slope Min
+		// 	// this.track_info.slope_avg = 0;         // Acceleration Avg
+		// },
+		fetch: (i) => {
+			let data  = this._data;
+			let dx    = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000;
+			let dz    = data[i].z - data[i > 0 ? i - 1 : i].z;
+			return (!isNaN(dz) && dx !== 0) ? (dz / dx) * 100 : 0; // slope in % = ( height / length ) * 100;
+		},
+		update: (slope, i) => {
+			this.track_info.ascent    = this.track_info.ascent    || 0;         // Total Ascent
+			this.track_info.descent   = this.track_info.descent   || 0;         // Total Descent
+			this.track_info.slope_max = this.track_info.slope_max || -Infinity; // Slope Max
+			this.track_info.slope_min = this.track_info.slope_min || +Infinity; // Slope Min
+			this.track_info.slope_avg = this.track_info.slope_avg || 0;         // Acceleration Avg
+
+			let track = this.track_info;
+			let data  = this._data;
+			let dz    = data[i].z - data[i > 0 ? i - 1 : i].z;
+
+			// Try to smooth "crazy" acceleration values.
+			if (this.options.slopeDeltaMax) {
+				let delta    = slop - data[i > 0 ? i - 1 : i].slope;
+				let deltaMax = this.options.slopeDeltaMax;
+				if (Math.abs(delta) > deltaMax) {
+					slope = data[i - 1].slope + deltaMax * Math.sign(delta);
+				}
 			}
-		}
 
-		// Range of acceptable slope values.
-		slope = _.clamp(slope, this.options.sRange);
+			// Range of acceptable slope values.
+			slope = _.clamp(slope, this.options.slopeRange);
+
+			if (dz > 0)      this.track_info.ascent += dz;
+			else if (dz < 0) this.track_info.descent -= dz;
+
+			if (slope > track.slope_max) track.slope_max = slope;
+			if (slope < track.slope_min) track.slope_min = slope;
 
-		track.ascent    = tAsc;
-		track.descent   = tDes;
-		track.slope_max = slope > sMax ? slope : sMax;
-		track.slope_min = slope < sMin ? slope : sMin;
+			track.slope_avg = (slope + track.slope_avg) / 2.0;
 
-		data[i].slope   = L.Util.formatNum(slope, 2);
+			return L.Util.formatNum(slope, 2);;
+		}
+	});
+
+	this._registerAxisScale({
+		axis       : "y",
+		position   : "right",
+		scale      : {
+			min        : -1,
+			max        : +1,
+		},
+		tickPadding: 16,
+		label      : slope.label,
+		labelX     : 25,
+		labelY     : -8,
+		name       : 'slope',
+		visbile    : this.options.slope != "summary"
+	});
+
+	this._registerAreaPath({
+		name         : 'slope',
+		label        : 'Slope',
+		yAttr        : 'slope',
+		scaleX       : 'distance',
+		scaleY       : 'slope',
+		color        : '#F00',
+		strokeColor  : '#000',
+		strokeOpacity: "0.5",
+		fillOpacity  : "0.25",
+		visbile      : this.options.slope != "summary"
 	});
 
 	this._registerTooltip({
 		name: 'slope',
 		chart: (item) => L._("m: ") + item.slope + slope.label,
-		marker: (item) => Math.round(item.slope) + slope.label
+		marker: (item) => Math.round(item.slope) + slope.label,
+		order: 40,
 	});
 
 	this._registerSummary({
 		"ascent"  : {
 			label: "Total Ascent: ",
-			value: (track) => Math.round(track.ascent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm')
+			value: (track) => Math.round(track.ascent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm'),
+			order: 40
 		},
 		"descent"  : {
 			label: "Total Descent: ",
-			value: (track) => Math.round(track.descent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm')
+			value: (track) => Math.round(track.descent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm'),
+			order: 40
 		},
 		"minslope": {
 			label: "Min Slope: ",
-			value: (track) => Math.round(track.slope_min || 0) + '&nbsp;' + slope.label
+			value: (track) => Math.round(track.slope_min || 0) + '&nbsp;' + slope.label,
+			order: 40
 		},
 		"maxslope": {
 			label: "Max Slope: ",
-			value: (track) => Math.round(track.slope_max || 0) + '&nbsp;' + slope.label
+			value: (track) => Math.round(track.slope_max || 0) + '&nbsp;' + slope.label,
+			order: 40
+		},
+		"avgslope": {
+			label: "Avg Slope: ",
+			value: (track) => Math.round(track.slope_avg || 0) + '&nbsp;' + slope.label,
+			order: 40
 		}
 	});
 

package/src/speed.js

@@ -13,6 +13,49 @@ Elevation.addInitHook(function() {
 	speed.label      = opts.speedLabel  || L._(opts.imperial ? 'mph' : 'km/h');
 	opts.speedFactor = opts.speedFactor || 1;
 
+
+	this._registerDataAttribute({
+		name: 'speed',
+		init: () => {
+			// this.track_info.speed_max = -Infinity; // Speed Max
+			// this.track_info.speed_min = +Infinity; // Speed Min
+			// this.track_info.speed_avg = 0;         // Speed Avg
+		},
+		fetch: (i) => {
+			let data = this._data;
+			let dx   = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000;
+			let dt   = data[i].time - data[ i > 0 ? i - 1 : i].time;
+			return dt > 0 ? Math.abs((dx / dt) * opts.timeFactor) * opts.speedFactor : 0;
+		},
+		update: (speed, i) => {
+			this.track_info.speed_max = this.track_info.speed_max || -Infinity; // Speed Max
+			this.track_info.speed_min = this.track_info.speed_min || +Infinity; // Speed Min
+			this.track_info.speed_avg = this.track_info.speed_avg || 0;         // Speed Avg
+
+			let data  = this._data;
+			let track = this.track_info;
+
+			// Try to smooth "crazy" speed values.
+			if (this.options.speedDeltaMax) {
+				let delta    = speed - data[i > 0 ? i - 1 : i].speed;
+				let deltaMax = this.options.speedDeltaMax;
+				if (Math.abs(delta) > deltaMax) {
+					speed       = data[i - 1].speed + deltaMax * Math.sign(delta);
+				}
+			}
+	
+			// Range of acceptable speed values.
+			speed = _.clamp(speed, this.options.speedRange);
+
+			if (speed > track.speed_max) track.speed_max = speed;
+			if (speed < track.speed_min) track.speed_min = speed;
+
+			track.speed_avg = (speed + track.speed_avg) / 2.0;
+
+			return L.Util.formatNum(speed, 2);
+		},
+	});
+
 	if (this.options.speed && this.options.speed != "summary") {
 
 		this._registerAxisScale({
@@ -26,16 +69,16 @@ Elevation.addInitHook(function() {
 			label      : speed.label,
 			labelX     : 25,
 			labelY     : -8,
-			name       : "speed"
+			name       : "speed",
 		});
 
 		this._registerAreaPath({
-			name       : 'speed',
-			label      : 'Speed',
-			yAttr      : "speed",
-			scaleX     : 'distance',
-			scaleY     : 'speed',
-			color      : '#03ffff',
+			name         : 'speed',
+			label        : 'Speed',
+			yAttr        : "speed",
+			scaleX       : 'distance',
+			scaleY       : 'speed',
+			color        : '#03ffff',
 			strokeColor  : '#000',
 			strokeOpacity: "0.5",
 			fillOpacity  : "0.25",
@@ -43,65 +86,30 @@ Elevation.addInitHook(function() {
 
 	}
 
-	this.on('elepoint_added', function(e) {
-		let data   = this._data;
-		let i      = e.index;
-
-		let currT  = data[i].time;
-		let prevT  = i > 0 ? data[i - 1].time : currT;
-
-		let deltaT = currT - prevT;
-
-		let track  = this.track_info;
-		let sMax   = track.speed_max || -Infinity; // Speed Max
-		let sMin   = track.speed_min || +Infinity; // Speed Min
-		let sAvg   = track.speed_avg || 0;         // Speed Avg
-		let speed  = 0;
-
-		if (deltaT > 0) {
-			let delta = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000;
-			speed = Math.abs((delta / deltaT) * opts.timeFactor) * opts.speedFactor;
-		}
-
-		// Try to smooth "crazy" speed values.
-		if (this.options.speedDeltaMax) {
-			let deltaS    = i > 0 ? speed - data[i - 1].speed : 0;
-			let maxDeltaS = this.options.speedDeltaMax;
-			if (Math.abs(deltaS) > maxDeltaS) {
-				speed       = data[i - 1].speed + maxDeltaS * Math.sign(deltaS);
-			}
-		}
-
-		// Range of acceptable speed values.
-		speed = _.clamp(speed, this.options.speedRange);
-
-		track.speed_max = speed > sMax ? speed : sMax;
-		track.speed_min = speed < sMin ? speed : sMin;
-		track.speed_avg = (speed + sAvg) / 2.0;
-
-		data[i].speed = L.Util.formatNum(speed, 2);
-	});
-
 	if (this.options.speed) {
 
 		this._registerTooltip({
 			name: 'speed',
 			chart: (item) => L._('v: ') + item.speed + " " + speed.label,
 			marker: (item) => Math.round(item.speed) + " " + speed.label,
+			order: 50,
 		});
 
 		this._registerSummary({
 			"minspeed"  : {
 				label: "Min Speed: ",
-				value: (track) => Math.round(track.speed_min || 0) + '&nbsp;' + speed.label
+				value: (track) => Math.round(track.speed_min || 0) + '&nbsp;' + speed.label,
+				order: 50
 			},
 			"maxspeed"  : {
 				label: "Max Speed: ",
-				value: (track) => Math.round(track.speed_max || 0) + '&nbsp;' + speed.label
+				value: (track) => Math.round(track.speed_max || 0) + '&nbsp;' + speed.label,
+				order: 50
 			},
 			"avgspeed": {
 				label: "Avg Speed: ",
-				value: (track) => Math.round(track.speed_avg || 0) + '&nbsp;' + speed.label
+				value: (track) => Math.round(track.speed_avg || 0) + '&nbsp;' + speed.label,
+				order: 50
 			}
 		});
 

package/src/summary.js

@@ -6,6 +6,7 @@ export var Summary = L.Class.extend({
 	initialize: function(opts, control) {
 		this.options = opts;
 		this.control = control;
+		this.labels = {};
 
 		let summary = this._container = _.create("div", "elevation-summary " + (opts.summary ? opts.summary + "-summary" : ''));
 		_.style(summary, 'max-width', opts.width ? opts.width + 'px' : '');
@@ -24,9 +25,19 @@ export var Summary = L.Class.extend({
 		return this;
 	},
 
+	update: function() {
+		Object
+		.keys(this.labels)
+		.sort((a, b) => this.labels[a].order - this.labels[b].order) // TODO: any performance issues?
+		.forEach((i)=> {
+			this.append(i, L._(this.labels[i].label), typeof this.labels[i].value !== "function" ? this.labels[i].value : this.labels[i].value(this.control.track_info));
+		});
+	},
+
 	_registerSummary: function(data) {
 		for (let i in data) {
-			this.append(i, L._(data[i].label), typeof data[i].value !== "function" ? data[i].value : data[i].value(this.control.track_info));
+			data[i].order = data[i].order ?? 100;
+			this.labels[i] = data[i];
 		}
 	}
 

package/src/time.js

@@ -15,7 +15,7 @@ Elevation.addInitHook(function() {
 	 * Common AVG speeds:
 	 * ----------------------
 	 *  slow walk = 1.8  km/h
-	 *  walking   = 3.6  km/h
+	 *  walking   = 3.6  km/h <-- default: 3.6
 	 *  running   = 10.8 km/h
 	 *  cycling   = 18   km/h
 	 *  driving   = 72   km/h
@@ -33,6 +33,42 @@ Elevation.addInitHook(function() {
 
 	opts.xTimeFormat = opts.xTimeFormat || ((t) => _.formatTime(t).split("'")[0]);
 
+	this._registerDataAttribute({
+		name: 'time',
+		init: function({ point, props, id }) {
+			// "coordinateProperties" property is generated inside "@tmcw/toGeoJSON"
+			if (props) {
+				if("coordTimes" in props)     point.meta.time = new Date(Date.parse(props.coordTimes[id]));
+				else if("times" in props)     point.meta.time = new Date(Date.parse(props.times[id]));
+				else if("time" in props)      point.meta.time = new Date(Date.parse((typeof props.time === 'object' ? props.time[id] : props.time)));
+			}
+		},
+		fetch: function(i, point) {
+			// 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();
+					let dt = ( dx / this._timeAVGSpeed) * this.options.timeFactor * 1000;
+					point.meta.time = new Date(t0 + dt);
+				} else {
+					point.meta.time = new Date(Date.now())
+				}
+			}
+			// Handle timezone offset
+			if (point.meta.time.getTime() - point.meta.time.getTimezoneOffset() * 60 * 1000 === 0) {
+				point.meta.time = 0;
+			}
+			return point.meta.time.getTime();
+		},
+		update: function(time, i) {
+			this.track_info.time   = (this.track_info.time || 0) + Math.abs(this._data[i].time - this._data[i > 0 ? i - 1 : i].time);
+			this._data[i].duration = this.track_info.time;
+			return new Date(time);
+		}
+	});
+
 	if (opts.time && opts.time != "summary" && !L.Browser.mobile) {
 
 		this._registerAxisScale({
@@ -63,60 +99,25 @@ Elevation.addInitHook(function() {
 
 	}
 
-	this.on('elepoint_added', function(e) {
-		let data = this._data;
-		let i    = e.index;
-
-		// Add missing timestamps (see: options.timeAVGSpeed)
-		if (!e.point.meta || !e.point.meta.time) {
-			e.point.meta = e.point.meta || {};
-			let delta = (data[i].dist - data[i > 0 ? i - 1 : i].dist);
-			let speed = this._timeAVGSpeed;
-			e.point.meta.time = new Date(
-				(
-					i > 0
-						? data[i - 1].time.getTime() + ((( delta / speed) * opts.timeFactor) * 1000)
-						: Date.now()
-				)
-			);
-		}
-
-		let time = e.point.meta.time;
-
-		// Handle timezone offset
-		if (time.getTime() - time.getTimezoneOffset() * 60 * 1000 === 0) {
-			time = 0;
-		}
-
-		let currT    = time;
-		let prevT    = i > 0 ? data[i - 1].time : currT;
-
-		let deltaT   = Math.abs(currT - prevT);
-		let duration = (this.track_info.time || 0) + deltaT;
-
-		this.track_info.time = duration;
-
-		data[i].time         = time;
-		data[i].duration     = duration;
-	});
-
-
 	if (this.options.timestamps) {
 		this._registerTooltip({
 			name: 'date',
-			chart: (item) => L._("t: ") + this.options.timeFormat(item.time)
+			chart: (item) => L._("t: ") + this.options.timeFormat(item.time),
+			order: 20,
 		});
 	}
 
 	if (this.options.time) {
 		this._registerTooltip({
 			name: 'time',
-			chart: (item) => L._("T: ") + _.formatTime(item.duration || 0)
+			chart: (item) => L._("T: ") + _.formatTime(item.duration || 0),
+			order: 20
 		});
 		this._registerSummary({
 			"tottime"  : {
 				label: "Total Time: ",
-				value: (track) => _.formatTime(track.time || 0)
+				value: (track) => _.formatTime(track.time || 0),
+				order: 20
 			}
 		});
 	}