@raruto/leaflet-elevation 2.2.5 → 2.2.6

package/src/components/marker.js

@@ -1,96 +1,96 @@
-import * as D3 from './d3.js';
-
-const _ = L.Control.Elevation.Utils;
-
-export var Marker = L.Class.extend({
-
-	initialize: function(options, control) {
-		this.options = options;
-		this.control = control
-
-		switch(this.options.marker) {
-			case 'elevation-line':
-				// this._container = d3.create("g").attr("class", "height-focus-group");
-			break;
-			case 'position-marker':
-				// this._marker   = L.circleMarker([0, 0], { pane: 'overlayPane', radius: 6, fillColor: '#fff', fillOpacity:1, color: '#000', weight:1, interactive: false });
-				this._marker      = L.marker([0, 0], { icon: this.options.markerIcon, zIndexOffset: 1000000, interactive: false });
-			break;
-		}
-
-		this._labels = {};
-
-		return this;
-	},
-
-	addTo: function(map) {
-		this._map = map;
-		switch(this.options.marker) {
-			case 'elevation-line':  this._container = d3.select(map.getPane('elevationPane')).select("svg > g").call(D3.PositionMarker({})); break;
-			case 'position-marker': this._marker.addTo(map, { pane: 'overlayPane' }); break;
-		}
-		return this;
-	},
-
-	/**
-	 * Update position marker ("leaflet-marker").
-	 */
-	update: function(props) {
-		if (props) this._props = props;
-		else props = this._props;
-
-		if(!props) return;
-
-		if (props.options) this.options = props.options;
-		if (!this._map) this.addTo(props.map);
-
-		this._latlng = props.item.latlng;
-
-		switch(this.options.marker) {
-			case 'elevation-line':
-				if (this._container) {
-					let point = this._map.latLngToLayerPoint(this._latlng);
-					point     = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
-
-					let yMax = (this.control._height() / props.yCoordMax * point[this.options.yAttr]);
-
-					if(!isFinite(yMax) || isNaN(yMax)) yMax = 0;
-
-					this._container.classed("leaflet-hidden", false);
-					this._container.call(D3.PositionMarker({
-						theme : this.options.theme,
-						xCoord: point.x,
-						yCoord: point.y,
-						length: point.y - yMax, // normalized Y
-						labels: this._labels,
-						item: point,
-					}));
-				}
-			break;
-			case 'position-marker':
-				_.removeClass(this._marker.getElement(), 'leaflet-hidden');
-				this._marker.setLatLng(this._latlng);
-			break;
-		}
-	},
-
-	/*
-	 * Hides the position/height indicator marker drawn onto the map
-	 */
-	remove: function() {
-		this._props = null;
-		switch(this.options.marker) {
-			case 'elevation-line':  this._container && this._container.classed("leaflet-hidden", true); break;
-			case 'position-marker': _.addClass(this._marker.getElement(), 'leaflet-hidden');            break;
-		}
-	},
-
-	getLatLng: function() {
-		return this._latlng;
-	},
-
-	_registerTooltip: function(props) {
-		this._labels[props.name] = props;
-	}
-
-});
+import * as D3 from './d3.js';
+
+const _ = L.Control.Elevation.Utils;
+
+export var Marker = L.Class.extend({
+
+	initialize: function(options, control) {
+		this.options = options;
+		this.control = control
+
+		switch(this.options.marker) {
+			case 'elevation-line':
+				// this._container = d3.create("g").attr("class", "height-focus-group");
+			break;
+			case 'position-marker':
+				// this._marker   = L.circleMarker([0, 0], { pane: 'overlayPane', radius: 6, fillColor: '#fff', fillOpacity:1, color: '#000', weight:1, interactive: false });
+				this._marker      = L.marker([0, 0], { icon: this.options.markerIcon, zIndexOffset: 1000000, interactive: false });
+			break;
+		}
+
+		this._labels = {};
+
+		return this;
+	},
+
+	addTo: function(map) {
+		this._map = map;
+		switch(this.options.marker) {
+			case 'elevation-line':  this._container = d3.select(map.getPane('elevationPane')).select("svg > g").call(D3.PositionMarker({})); break;
+			case 'position-marker': this._marker.addTo(map, { pane: 'overlayPane' }); break;
+		}
+		return this;
+	},
+
+	/**
+	 * Update position marker ("leaflet-marker").
+	 */
+	update: function(props) {
+		if (props) this._props = props;
+		else props = this._props;
+
+		if(!props) return;
+
+		if (props.options) this.options = props.options;
+		if (!this._map) this.addTo(props.map);
+
+		this._latlng = props.item.latlng;
+
+		switch(this.options.marker) {
+			case 'elevation-line':
+				if (this._container) {
+					let point = this._map.latLngToLayerPoint(this._latlng);
+					point     = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
+
+					let yMax = (this.control._height() / props.yCoordMax * point[this.options.yAttr]);
+
+					if(!isFinite(yMax) || isNaN(yMax)) yMax = 0;
+
+					this._container.classed("leaflet-hidden", false);
+					this._container.call(D3.PositionMarker({
+						theme : this.options.theme,
+						xCoord: point.x,
+						yCoord: point.y,
+						length: point.y - yMax, // normalized Y
+						labels: this._labels,
+						item: point,
+					}));
+				}
+			break;
+			case 'position-marker':
+				_.removeClass(this._marker.getElement(), 'leaflet-hidden');
+				this._marker.setLatLng(this._latlng);
+			break;
+		}
+	},
+
+	/*
+	 * Hides the position/height indicator marker drawn onto the map
+	 */
+	remove: function() {
+		this._props = null;
+		switch(this.options.marker) {
+			case 'elevation-line':  this._container && this._container.classed("leaflet-hidden", true); break;
+			case 'position-marker': _.addClass(this._marker.getElement(), 'leaflet-hidden');            break;
+		}
+	},
+
+	getLatLng: function() {
+		return this._latlng;
+	},
+
+	_registerTooltip: function(props) {
+		this._labels[props.name] = props;
+	}
+
+});

package/src/components/summary.js

@@ -1,43 +1,43 @@
-const _ = L.Control.Elevation.Utils;
-
-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' : '');
-	},
-
-	render: function() {
-		return container => container.append(() => this._container);
-	},
-
-	reset: function() {
-		this._container.innerHTML = '';
-	},
-
-	append: function(className, label, value) {
-		this._container.innerHTML += `<span class="${className}"><span class="summarylabel">${label}</span><span class="summaryvalue">${value}</span></span>`;
-		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)=> {
-			let value = typeof this.labels[i].value !== "function" ? this.labels[i].value : this.labels[i].value(this.control.track_info, this.labels[i].unit || '');
-			this.append(i /*+ " order-" + this.labels[i].order*/, L._(this.labels[i].label), value, this.labels[i].order);
-		});
-	},
-
-	_registerSummary: function(data) {
-		for (let i in data) {
-			data[i].order = data[i].order ?? 1000;
-			this.labels[i] = data[i];
-		}
-	}
-
-});
+const _ = L.Control.Elevation.Utils;
+
+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' : '');
+	},
+
+	render: function() {
+		return container => container.append(() => this._container);
+	},
+
+	reset: function() {
+		this._container.innerHTML = '';
+	},
+
+	append: function(className, label, value) {
+		this._container.innerHTML += `<span class="${className}"><span class="summarylabel">${label}</span><span class="summaryvalue">${value}</span></span>`;
+		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)=> {
+			let value = typeof this.labels[i].value !== "function" ? this.labels[i].value : this.labels[i].value(this.control.track_info, this.labels[i].unit || '');
+			this.append(i /*+ " order-" + this.labels[i].order*/, L._(this.labels[i].label), value, this.labels[i].order);
+		});
+	},
+
+	_registerSummary: function(data) {
+		for (let i in data) {
+			data[i].order = data[i].order ?? 1000;
+			this.labels[i] = data[i];
+		}
+	}
+
+});

package/src/control.js

@@ -181,8 +181,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this._hotline        = L.featureGroup();
 		this._circleMarkers  = L.featureGroup();
 		this._markedSegments = L.polyline([]);
-		this._start          = (opts.trkStart || Options.trkStart);
-		this._end            = (opts.trkEnd || Options.trkEnd);
+		this._start          = L.circleMarker([0,0], (opts.trkStart || Options.trkStart));
+		this._end            = L.circleMarker([0,0], (opts.trkEnd || Options.trkEnd));
 		this._chartEnabled   = true;
 		this._yCoordMax      = -Infinity;
 		this.track_info      = {};
@@ -428,6 +428,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 					if(trkseg.feature.geometry.type != "Point") {
 						let geo = L.geoJson(trkseg.toGeoJSON(), { coordsToLatLng: (coords) => L.latLng(coords[0], coords[1], coords[2] * (this.options.altitudeFactor || 1))});
 						let line = L.hotline(geo.toGeoJSON().features[0].geometry.coordinates, {
+							renderer: L.Hotline.renderer(),
 							min: isFinite(this.track_info[prop + '_min']) ? this.track_info[prop + '_min'] : 0,
 							max: isFinite(this.track_info[prop + '_max']) ? this.track_info[prop + '_max'] : 1,
 							palette: {

package/src/handlers/acceleration.js

@@ -1,64 +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 : 0;
-		},
-		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
-			},
-		}
-	};
-}
+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 : 0;
+		},
+		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
+			},
+		}
+	};
+}

package/src/handlers/heart.js

@@ -1,53 +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
-            },
-        }
-    };
+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
+            },
+        }
+    };
 };

package/src/handlers/pace.js

@@ -1,65 +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) : 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
-			},
-		}
-	};
-}
+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
+			},
+		}
+	};
+}