@raruto/leaflet-elevation 2.3.4 → 2.5.0

package/src/handlers/labels.js

@@ -0,0 +1,45 @@
+/**
+ * @see https://github.com/Raruto/leaflet-elevation/issues/211
+ *
+ * @example
+ * ```js
+ * L.control.Elevation({ handlers: [ 'Labels' ], labelsRotation: 25, labelsAlign: 'start' })
+ * ```
+ */
+export function Labels() {
+
+  this.on('elechart_updated', function(e) {
+
+    const pointG = this._chart._chart.pane('point');
+
+    const textRotation = this.options.labelsRotation ?? -90;
+    const textAnchor = this.options.labelsAlign;
+
+    if (90 == Math.abs(textRotation)) {
+
+      pointG.selectAll('text')
+        .attr('dy', '4px')
+        .attr("dx", (d, i, el) => Math.sign(textRotation) * (this._height() - d3.select(el[i].parentElement).datum().y - 8) + 'px')
+        .attr('text-anchor', textRotation > 0 ? 'end' : 'start')
+        .attr('transform', 'rotate(' + textRotation + ')')
+
+      pointG.selectAll('circle')
+        .attr('r', '2.5')
+        .attr('fill', '#fff')
+        .attr("stroke", '#000')
+        .attr("stroke-width", '1.1');
+
+    } else if (!isNaN(textRotation)) {
+
+      pointG.selectAll('text')
+        .attr("dx", "4px")
+        .attr("dy", "-9px")
+        .attr('text-anchor', textAnchor ?? (0 == textRotation ? 'start' : 'middle'))
+        .attr('transform', 'rotate('+ -textRotation +')')
+
+    }
+
+  });
+
+	return { };
+}

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

@@ -0,0 +1,109 @@
+/**
+ * @see https://github.com/Igor-Vladyka/leaflet.motion
+ * 
+ * @example
+ * ```js
+ * L.control.Elevation({ handlers: [ 'Runner' ], runnerOptions: { polyline: {..}, motion: {..}, marker {..} } })
+ * ```
+ */
+export async function Runner() {
+
+  await this.import(this.__LMOTION || 'https://unpkg.com/leaflet.motion@0.3.2/dist/leaflet.motion.min.js', typeof L.Motion !== 'object')
+
+  let { runnerOptions } = this.options;
+
+  runnerOptions = L.extend(
+    { polyline: {}, motion: {}, marker: undefined },
+    'object' === typeof runnerOptions ? runnerOptions : {}
+  );
+
+  // Custom tooltips
+  this._registerTooltip({
+    name: 'here',
+    marker: (item) => L._("You are here: "),
+    order: 1,
+  });
+
+  this._registerTooltip({
+    name: 'distance',
+    marker: (item) => Math.round(item.dist) + " " + this.options.xLabel,
+    order: 2,
+  });
+
+  this.addCheckpoint = function (checkpoint) {
+    return this._registerCheckPoint({ // <-- NB these are private functions use them at your own risk!
+      latlng: this._findItemForX(this._x(checkpoint.dist)).latlng,
+      label: checkpoint.label || ''
+    });
+  }
+
+  this.addRunner = function (runner) {
+    let x = this._x(runner.dist);
+    let y = this._y(this._findItemForX(x).z)
+    let g = d3.select(this._container)
+      .select('svg > g')
+      .append("svg:circle")
+      .attr("class", "runner " + this.options.theme + " height-focus circle-lower")
+      .attr("r", 6)
+      .attr("cx", x)
+      .attr("cy", y);
+    return g;
+  }
+
+  this.setPositionFromLatLng = function (latlng) {
+    this._onMouseMoveLayer({ latlng: latlng }); // Update map and chart "markers" from latlng
+  };
+
+  this.tick = function (runner, dist = 0, inc = 0.1) {
+    dist = (dist <= this.track_info.distance - inc) ? dist + inc : 0;
+    this.updateRunnerPos(runner, dist);
+    setTimeout(() => this.tick(runner, dist), 150);
+  };
+
+  this.updateRunnerPos = function (runner, pos) {
+    let curr, x;
+
+    if (pos instanceof L.LatLng) {
+      curr = this._findItemForLatLng(pos);
+      x = this._x(curr.dist);
+    } else {
+      x    = this._x(pos);
+      curr = this._findItemForX(x);
+    }
+
+    runner
+      .attr("cx", x)
+      .attr("cy", this._y(curr.z));
+    this.setPositionFromLatLng(curr.latlng);
+  };
+
+  this.animate = function (layer, speed = 1500) {
+
+    if (this._runner) {
+      this._runner.remove();
+    }
+
+    layer.setStyle({ opacity: 0.5 });
+
+    const geo = L.geoJson(layer.toGeoJSON(), { coordsToLatLng: (coords) => L.latLng(coords[0], coords[1], coords[2] * (this.options.altitudeFactor || 1)) });
+    this._runner = L.motion.polyline(
+      geo.toGeoJSON().features[0].geometry.coordinates, 
+      L.extend({}, { color: 'red', pane: 'elevationPane', attribution: '' }, runnerOptions.polyline), 
+      L.extend({}, { auto: true, speed: speed, }, runnerOptions.motion),
+      runnerOptions.marker || undefined
+    );
+
+    // Override default function behavior: `L.Motion.Polyline::_drawMarker()` 
+    this._runner._drawMarker = new Proxy(this._runner._drawMarker, {
+      apply: (target, thisArg, argArray) => {
+        thisArg._runner = thisArg._runner || this.addRunner({ dist: 0 });
+        this.updateRunnerPos(thisArg._runner, argArray[0]);
+        return target.apply(thisArg, argArray);
+      }
+    });
+
+    this._runner.addTo(this._map);
+  };
+
+  return {};
+}

package/src/handlers/time.js

@@ -1,103 +1,103 @@
-export function Time() {
-
-	const _ = L.Control.Elevation.Utils;
-
-	let opts = this.options;
-	let time = {};
-
-	time.label      = opts.timeLabel  || 't';
-	opts.timeFactor = opts.timeFactor || 3600;
-
-	/**
-	 * Common AVG speeds:
-	 * ----------------------
-	 *  slow walk = 1.8  km/h
-	 *  walking   = 3.6  km/h <-- default: 3.6
-	 *  running   = 10.8 km/h
-	 *  cycling   = 18   km/h
-	 *  driving   = 72   km/h
-	 * ----------------------
-	 */
-	this._timeAVGSpeed = (opts.timeAVGSpeed || 3.6) * (opts.speedFactor || 1);
-
-	if (!opts.timeFormat) {
-		opts.timeFormat = (time) => (new Date(time)).toLocaleString().replaceAll('/', '-').replaceAll(',', ' ');
-	} else if (opts.timeFormat == 'time') {
-		opts.timeFormat = (time) => (new Date(time)).toLocaleTimeString();
-	} else if (opts.timeFormat == 'date') {
-		opts.timeFormat = (time) => (new Date(time)).toLocaleDateString();
-	}
-
-	opts.xTimeFormat = opts.xTimeFormat || ((t) => _.formatTime(t).split("'")[0]);
-
-	return {
-		name: 'time',
-		required: (this.options.speed || this.options.acceleration || this.options.timestamps),
-		coordinateProperties: ["coordTimes", "times", "time"],
-		coordPropsToMeta: _.parseDate,
-		pointToAttr: function(point, i) {
-			// 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();
-					point.meta.time = new Date(t0 + ( dx / this._timeAVGSpeed) * this.options.timeFactor * 1000);
-				} else {
-					point.meta.time = new Date(Date.now())
-				}
-			}
-			// Handle timezone offset
-			let time = (point.meta.time.getTime() - point.meta.time.getTimezoneOffset() * 60 * 1000 !== 0) ? point.meta.time : 0;
-			// Update duration
-			this._data[i].duration = i > 0 ? (this._data[i - 1].duration || 0) + Math.abs(time - this._data[i - 1].time) : 0;
-			return time;
-		},
-		onPointAdded: (_, i) => this.track_info.time = this._data[i].duration,
-		scale: (opts.time && opts.time != "summary" && !L.Browser.mobile) && {
-			axis       : "x",
-			position   : "top",
-			scale      : {
-				attr       : "duration",
-				min        : 0,
-			},
-			label      : time.label,
-			labelY     : -10,
-			labelX     : () => this._width(),
-			name       : "time",
-			ticks      : () => _.clamp(this._chart._xTicks() / 2, [4, +Infinity]),
-			tickFormat : (d)  => (d == 0 ? '' : opts.xTimeFormat(d)),
-			onAxisMount: axis => {
-				axis.select(".domain")
-					.remove();
-				axis.selectAll("text")
-					.attr('opacity', 0.65)
-					.style('font-family', 'Monospace')
-					.style('font-size', '110%');
-				axis.selectAll(".tick line")
-					.attr('y2', this._height())
-					.attr('stroke-dasharray', 2)
-					.attr('opacity', 0.75);
-				}
-		},
-		tooltips: [
-			(this.options.time) && {
-				name: 'time',
-				chart: (item) => L._("T: ") + _.formatTime(item.duration || 0),
-				order: 20
-			},
-			(this.options.timestamps) && {
-				name: 'date',
-				chart: (item) => L._("t: ") + this.options.timeFormat(item.time),
-				order: 21,
-			}
-		],
-		summary: (this.options.time) && {
-			"tottime"  : {
-				label: "Total Time: ",
-				value: (track) => _.formatTime(track.time || 0),
-				order: 20
-			}
-		}
-	};
+export function Time() {
+
+	const _ = L.Control.Elevation.Utils;
+
+	let opts = this.options;
+	let time = {};
+
+	time.label      = opts.timeLabel  || 't';
+	opts.timeFactor = opts.timeFactor || 3600;
+
+	/**
+	 * Common AVG speeds:
+	 * ----------------------
+	 *  slow walk = 1.8  km/h
+	 *  walking   = 3.6  km/h <-- default: 3.6
+	 *  running   = 10.8 km/h
+	 *  cycling   = 18   km/h
+	 *  driving   = 72   km/h
+	 * ----------------------
+	 */
+	this._timeAVGSpeed = (opts.timeAVGSpeed || 3.6) * (opts.speedFactor || 1);
+
+	if (!opts.timeFormat) {
+		opts.timeFormat = (time) => (new Date(time)).toLocaleString().replaceAll('/', '-').replaceAll(',', ' ');
+	} else if (opts.timeFormat == 'time') {
+		opts.timeFormat = (time) => (new Date(time)).toLocaleTimeString();
+	} else if (opts.timeFormat == 'date') {
+		opts.timeFormat = (time) => (new Date(time)).toLocaleDateString();
+	}
+
+	opts.xTimeFormat = opts.xTimeFormat || ((t) => _.formatTime(t).split("'")[0]);
+
+	return {
+		name: 'time',
+		required: (this.options.speed || this.options.acceleration || this.options.timestamps),
+		coordinateProperties: ["coordTimes", "times", "time"],
+		coordPropsToMeta: _.parseDate,
+		pointToAttr: function(point, i) {
+			// 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();
+					point.meta.time = new Date(t0 + ( dx / this._timeAVGSpeed) * this.options.timeFactor * 1000);
+				} else {
+					point.meta.time = new Date(Date.now())
+				}
+			}
+			// Handle timezone offset
+			let time = (point.meta.time.getTime() - point.meta.time.getTimezoneOffset() * 60 * 1000 !== 0) ? point.meta.time : 0;
+			// Update duration
+			this._data[i].duration = i > 0 ? (this._data[i - 1].duration || 0) + Math.abs(time - this._data[i - 1].time) : 0;
+			return time;
+		},
+		onPointAdded: (_, i) => this.track_info.time = this._data[i].duration,
+		scale: (opts.time && opts.time != "summary" && !L.Browser.mobile) && {
+			axis       : "x",
+			position   : "top",
+			scale      : {
+				attr       : "duration",
+				min        : 0,
+			},
+			label      : time.label,
+			labelY     : -10,
+			labelX     : () => this._width(),
+			name       : "time",
+			ticks      : () => _.clamp(this._chart._xTicks() / 2, [4, +Infinity]),
+			tickFormat : (d)  => (d == 0 ? '' : opts.xTimeFormat(d)),
+			onAxisMount: axis => {
+				axis.select(".domain")
+					.remove();
+				axis.selectAll("text")
+					.attr('opacity', 0.65)
+					.style('font-family', 'Monospace')
+					.style('font-size', '110%');
+				axis.selectAll(".tick line")
+					.attr('y2', this._height())
+					.attr('stroke-dasharray', 2)
+					.attr('opacity', 0.75);
+				}
+		},
+		tooltips: [
+			(this.options.time) && {
+				name: 'time',
+				chart: (item) => L._("T: ") + _.formatTime(item.duration || 0),
+				order: 20
+			},
+			(this.options.timestamps) && {
+				name: 'date',
+				chart: (item) => L._("t: ") + this.options.timeFormat(item.time),
+				order: 21,
+			}
+		],
+		summary: (this.options.time) && {
+			"tottime"  : {
+				label: "Total Time: ",
+				value: (track) => _.formatTime(track.time || 0),
+				order: 20
+			}
+		}
+	};
 }

package/src/options.js

@@ -1,88 +1,88 @@
-import * as _ from './utils';
-
-export var Options = {
-	autofitBounds: true,
-	autohide: false,
-	autohideMarker: true,
-	almostover: true,
-	altitude: true,
-	closeBtn: true,
-	collapsed: false,
-	detached: true,
-	distance: true,
-	distanceMarkers: { lazy: true, distance: true, direction: true },
-	dragging: !L.Browser.mobile,
-	downloadLink: 'link',
-	elevationDiv: "#elevation-div",
-	edgeScale: { bar: true, icon: false, coords: false },
-	followMarker: true,
-	imperial: false,
-	legend: true,
-	handlers: ["Distance", "Time", "Altitude", "Slope", "Speed", "Acceleration"],
-	hotline: 'elevation',
-	marker: 'elevation-line',
-	markerIcon: L.divIcon({
-		className: 'elevation-position-marker',
-		html: '<i class="elevation-position-icon"></i>',
-		iconSize: [32, 32],
-		iconAnchor: [16, 16],
-	}),
-	position: "topright",
-	polyline: {
-		className: 'elevation-polyline',
-		color: '#000',
-		opacity: 0.75,
-		weight: 5,
-		lineCap: 'round'
-	},
-	polylineSegments: {
-		className: 'elevation-polyline-segments',
-		color: '#F00',
-		interactive: false,
-	},
-	preferCanvas: false,
-	reverseCoords: false,
-	ruler: true,
-	theme: "lightblue-theme",
-	summary: 'inline',
-	slope: false,
-	speed: false,
-	time: true,
-	timeFactor: 3600,
-	timestamps: false,
-	trkStart: { className: 'start-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#00d800', fillOpacity: 1, interactive: false },
-	trkEnd: { className: 'end-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#ff0606', fillOpacity: 1, interactive: false },
-	waypoints: true,
-	wptIcons: {
-		'': L.divIcon({
-			className: 'elevation-waypoint-marker',
-			html: '<i class="elevation-waypoint-icon default"></i>',
-			iconSize: [30, 30],
-			iconAnchor: [8, 30],
-		}),
-	},
-	wptLabels: true,
-	xAttr: "dist",
-	xLabel: "km",
-	yAttr: "z",
-	yLabel: "m",
-	zFollow: false,
-	zooming: !L.Browser.Mobile,
-
-	// Quite uncommon and undocumented options
-	margins: { top: 30, right: 30, bottom: 30, left: 40 },
-	height: (screen.height * 0.3) || 200,
-	width: (screen.width * 0.6) || 600,
-	xTicks: undefined,
-	yTicks: undefined,
-
-	decimalsX: 2,
-	decimalsY: 0,
-	forceAxisBounds: false,
-	interpolation: "curveLinear",
-	yAxisMax: undefined,
-	yAxisMin: undefined,
-
-	// Prevent CORS issues for relative locations (dynamic import)
-	srcFolder: ((document.currentScript && document.currentScript.src) || (import.meta && import.meta.url)).split("/").slice(0,-1).join("/") + '/',
-};
+import * as _ from './utils';
+
+export var Options = {
+	autofitBounds: true,
+	autohide: false,
+	autohideMarker: true,
+	almostover: true,
+	altitude: true,
+	closeBtn: true,
+	collapsed: false,
+	detached: true,
+	distance: true,
+	distanceMarkers: { lazy: true, distance: true, direction: true },
+	dragging: !L.Browser.mobile,
+	downloadLink: 'link',
+	elevationDiv: "#elevation-div",
+	edgeScale: { bar: true, icon: false, coords: false },
+	followMarker: true,
+	imperial: false,
+	legend: true,
+	handlers: ["Distance", "Time", "Altitude", "Slope", "Speed", "Acceleration"],
+	hotline: 'elevation',
+	marker: 'elevation-line',
+	markerIcon: L.divIcon({
+		className: 'elevation-position-marker',
+		html: '<i class="elevation-position-icon"></i>',
+		iconSize: [32, 32],
+		iconAnchor: [16, 16],
+	}),
+	position: "topright",
+	polyline: {
+		className: 'elevation-polyline',
+		color: '#000',
+		opacity: 0.75,
+		weight: 5,
+		lineCap: 'round'
+	},
+	polylineSegments: {
+		className: 'elevation-polyline-segments',
+		color: '#F00',
+		interactive: false,
+	},
+	preferCanvas: false,
+	reverseCoords: false,
+	ruler: true,
+	theme: "lightblue-theme",
+	summary: 'inline',
+	slope: false,
+	speed: false,
+	time: true,
+	timeFactor: 3600,
+	timestamps: false,
+	trkStart: { className: 'start-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#00d800', fillOpacity: 1, interactive: false },
+	trkEnd: { className: 'end-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#ff0606', fillOpacity: 1, interactive: false },
+	waypoints: true,
+	wptIcons: {
+		'': L.divIcon({
+			className: 'elevation-waypoint-marker',
+			html: '<i class="elevation-waypoint-icon default"></i>',
+			iconSize: [30, 30],
+			iconAnchor: [8, 30],
+		}),
+	},
+	wptLabels: true,
+	xAttr: "dist",
+	xLabel: "km",
+	yAttr: "z",
+	yLabel: "m",
+	zFollow: false,
+	zooming: !L.Browser.Mobile,
+
+	// Quite uncommon and undocumented options
+	margins: { top: 30, right: 30, bottom: 30, left: 40 },
+	height: (screen.height * 0.3) || 200,
+	width: (screen.width * 0.6) || 600,
+	xTicks: undefined,
+	yTicks: undefined,
+
+	decimalsX: 2,
+	decimalsY: 0,
+	forceAxisBounds: false,
+	interpolation: "curveLinear",
+	yAxisMax: undefined,
+	yAxisMin: undefined,
+
+	// Prevent CORS issues for relative locations (dynamic import)
+	srcFolder: ((document.currentScript && document.currentScript.src) || (import.meta && import.meta.url)).split("/").slice(0,-1).join("/") + '/',
+};