@raruto/leaflet-elevation 2.4.0 → 2.5.1

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(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(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(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() {
-		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() {
-		return this._latlng;
-	},
-
-	_registerTooltip(props) {
-		this._labels[props.name] = props;
-	}
-
-});
+import * as D3 from './d3.js';
+
+const _ = L.Control.Elevation.Utils;
+
+export var Marker = L.Class.extend({
+
+	initialize(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(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(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() {
+		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() {
+		return this._latlng;
+	},
+
+	_registerTooltip(props) {
+		this._labels[props.name] = props;
+	}
+
+});

package/src/control.js

@@ -14,7 +14,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__mileFactor:     0.621371, // 1 km = (0.621371 mi)
 	__footFactor:     3.28084,  // 1 m  = (3.28084 ft)
 	__D3:            'https://unpkg.com/d3@7.8.4/dist/d3.min.js',
-	__TOGEOJSON:     'https://unpkg.com/@tmcw/togeojson@5.6.0/dist/togeojson.umd.js',
+	__TOGEOJSON:     'https://unpkg.com/@tmcw/togeojson@5.6.2/dist/togeojson.umd.js',
 	__LGEOMUTIL:     'https://unpkg.com/leaflet-geometryutil@0.10.1/src/leaflet.geometryutil.js',
 	__LALMOSTOVER:   'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
 	__LHOTLINE:      '../libs/leaflet-hotline.min.js',
@@ -214,6 +214,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Javascript scripts downloader (lazy loader)
 	 */
 	import(src, condition) {
+		if (Array.isArray(src)) {
+			return Promise.all(src.map(m => this.import(m)));
+		}
 		switch(src) {
 			case this.__D3:          condition = typeof d3 !== 'object'; break;
 			case this.__TOGEOJSON:   condition = typeof toGeoJSON !== 'object'; break;
@@ -401,38 +404,36 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Initialize "L.AlmostOver" integration
 	 */
 	_initAlmostOverHandler(map, layer) {
-		return (map && this.options.almostOver && !L.Browser.mobile) ? Promise.all([
-			this.import(this.__LGEOMUTIL),
-			this.import(this.__LALMOSTOVER)
-		]).then(() => {
-			map.addHandler('almostOver', L.Handler.AlmostOver)
-			if (L.GeometryUtil && map.almostOver && map.almostOver.enabled()) {
-				map.almostOver.addLayer(layer);
-				map
-					.on('almost:move', this._onMouseMoveLayer, this)
-					.on('almost:out', this._onMouseOut, this);
-				this.once('eledata_clear', () => {
-					map.almostOver.removeLayer(layer);
+		return (map && this.options.almostOver && !L.Browser.mobile) ? this.import([this.__LGEOMUTIL, this.__LALMOSTOVER])
+			.then(() => {
+				map.addHandler('almostOver', L.Handler.AlmostOver)
+				if (L.GeometryUtil && map.almostOver && map.almostOver.enabled()) {
+					map.almostOver.addLayer(layer);
 					map
-					.off('almost:move', this._onMouseMoveLayer, this)
-					.off('almost:out', this._onMouseOut, this);
-				})
-			}
-		}) : Promise.resolve();
+						.on('almost:move', this._onMouseMoveLayer, this)
+						.on('almost:out', this._onMouseOut, this);
+					this.once('eledata_clear', () => {
+						map.almostOver.removeLayer(layer);
+						map
+						.off('almost:move', this._onMouseMoveLayer, this)
+						.off('almost:out', this._onMouseOut, this);
+					})
+				}
+			}) : Promise.resolve();
 	},
 
 	/**
 	 * Initialize "L.DistanceMarkers" integration
 	 */
 	_initDistanceMarkers() {
-		return this.options.distanceMarkers ? Promise.all([this.import(this.__LGEOMUTIL), this.import(this.__LDISTANCEM)]) : Promise.resolve();
+		return this.options.distanceMarkers ? this.import([this.__LGEOMUTIL, this.__LDISTANCEM]) : Promise.resolve();
 	},
 
 	/**
 	 * Initialize "L.Control.EdgeScale" integration
 	 */
 	_initEdgeScale(map) {
-		return this.options.edgeScale ? Promise.all([this.import(this.__LEDGESCALE)])
+		return this.options.edgeScale ? this.import(this.__LEDGESCALE)
 			.then(() => {
 				map.edgeScaleControl = map.edgeScaleControl || L.control.edgeScale('boolean' !== typeof this.options.edgeScale ? this.options.edgeScale : {}).addTo(map);
 			}) : Promise.resolve();
@@ -443,7 +444,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		return this.options.hotline ? this.import(this.__LHOTLINE)
 			.then(() => {
 				layer.eachLayer((trkseg) => {
-					if(trkseg.feature.geometry.type != "Point") {
+					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(),
@@ -618,10 +619,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			if (opts._maxWidth > clientWidth) opts.width = clientWidth - 30;
 		}
 
-		Promise.all([
-			this.import(this.__D3),
-			this.import(this.__LCHART)
-		]).then((m) => {
+		this
+			.import([this.__D3, this.__LCHART])
+			.then((m) => {
 
 			let chart = this._chart = new (m[1] || Elevation).Chart(opts, this);
 	
@@ -689,13 +689,11 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		if (this._renderer) this._renderer.remove()
 		this._renderer               = L.svg({ pane: "elevationPane" }).addTo(this._map); // default leaflet svg renderer
 
-		Promise.all([
-			this.import(this.__D3),
-			this.import(this.__LMARKER)
-		]).then((m) => {
-			this._marker             = new (m[1] || Elevation).Marker(this.options, this);
-			this.fire("elechart_marker");
-		});
+		this.import([this.__D3, this.__LMARKER])
+			.then((m) => {
+				this._marker             = new (m[1] || Elevation).Marker(this.options, this);
+				this.fire("elechart_marker");
+			});
 	},
 
 	/**
@@ -829,7 +827,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	},
 
 	_onKeyDown({key}) {
-		if(!this.options.detached && key === "Escape"){
+		if (!this.options.detached && key === "Escape"){
 			this._collapse()
 		};
 	},

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/labels.js

@@ -1,6 +1,6 @@
 /**
  * @see https://github.com/Raruto/leaflet-elevation/issues/211
- * 
+ *
  * @example
  * ```js
  * L.control.Elevation({ handlers: [ 'Labels' ], labelsRotation: 25, labelsAlign: 'start' })
@@ -8,7 +8,7 @@
  */
 export function Labels() {
 
-  this.on('elechart_init elechart_axis', function(e) {
+  this.on('elechart_updated', function(e) {
 
     const pointG = this._chart._chart.pane('point');
 
@@ -29,7 +29,7 @@ export function Labels() {
         .attr("stroke", '#000')
         .attr("stroke-width", '1.1');
 
-    } else if (!isNaN(textRotation)) { 
+    } else if (!isNaN(textRotation)) {
 
       pointG.selectAll('text')
         .attr("dx", "4px")

package/src/handlers/lineargradient.js

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

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