@raruto/leaflet-elevation 2.5.0 → 2.5.2

package/README.md

@@ -24,6 +24,7 @@ _For a working example see one of the following demos:_
 - [loading multiple .gpx tracks (hover to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html)
 - [loading multiple .gpx tracks (click to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-charts.html)
 - [loading multiple maps](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_multiple-maps.html)
+- [stacking multiple charts (elevation, slope, speed)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_multiple-charts.html)
 - [translating plugin labels](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_i18n-strings.html)
 - [rotating chart labels](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_chart_labels.html)
 - [using custom colors](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
@@ -42,9 +43,10 @@ _For a working example see one of the following demos:_
 - [edge scale control](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_edge-scale.html)
 - [follow marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_follow-marker.html)
 - [layer almostover](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_almost-over.html)
-- [linear gradient](https://raruto.github.io/leaflet-elevation/examples/leaflet-linear-gradient.html)
+- [linear gradient](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_linear-gradient.html)
 - [slope chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_slope-chart.html)
 - [speed chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_speed-chart.html)
+- [temperature chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_temperature-chart.html)
 - [walking marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_dynamic-runner.html)
 
 ---

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@raruto/leaflet-elevation",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "A Leaflet plugin that allows to add elevation profiles using d3js",
   "type": "module",
   "main": "dist/leaflet-elevation.min.js",
   "browser": "dist/leaflet-elevation.min.js",
   "module": "src/index.js",
   "scripts": {
-    "test": "uvu . ^(examples)?(src)?\\.*\\.spec\\.js$",
+    "test": "uvu . \"(examples|src)[\\\\/].*\\.spec\\.js$\"",
     "build": "rollup -c build/rollup.config.js",
     "watch": "rollup -c build/rollup.config.js --watch",
     "dev": "npm-run-all --print-label --parallel serve watch",

package/src/components/chart.js

@@ -158,7 +158,7 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 			if (this._data.length && (e.type != 'brush' /*|| e.sourceEvent*/)) {
 				let rect    = this._chart.panes.brush.select('.overlay').node();
 				let coords  = d3.pointers(e, rect)[0];
-				let xCoord  = coords[0];
+				let xCoord  = _.clamp(coords[0], [0, this._width()]); // Clamps cursor position to chart's bounds (see issues: #270, #301)
 				let item    = this._data[this._findIndexForXCoord(xCoord)];
 
 				this.fire("mouse_move", { item: item, xCoord: xCoord });

package/src/handlers/distance.js

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

package/src/handlers/temperature.js

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