@raruto/leaflet-elevation 2.3.3 → 2.4.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_init elechart_axis', 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/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/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("/") + '/',
+};