@raruto/leaflet-elevation 2.2.8 → 2.3.1

package/README.md

@@ -35,8 +35,10 @@ _For a working example see one of the following demos:_
 
 - [autohide map](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-map.html)
 - [autohide chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-chart.html)
+- [clear button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_clear-button.html)
 - [collapsible button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_close-button.html)
 - [custom summary](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-summary.html)
+- [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)
 - [slope chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_slope-chart.html)
@@ -153,6 +155,9 @@ _For a working example see one of the following demos:_
 
         // Toggle "leaflet-distance-markers" integration
         distanceMarkers: false,
+
+        // Toggle "leaflet-edgescale" integration
+        edgeScale: false,
         
         // Toggle "leaflet-hotline" integration
         hotline: true,
@@ -195,19 +200,19 @@ _For a working example see one of the following demos:_
 
 ### Build Guide
 
-For those wishing to try cloning this repository into a local development folder (eg. /var/www):
+Within your local development environment:
 
 ```shell
 git clone git@github.com:Raruto/leaflet-elevation.git
 cd ./leaflet-elevation
 
 npm i         # install dependencies
-npm run watch # auto-generate "dist" files
+npm run dev   # start dev server at: http://localhost:8080
 npm run build # generate "dist" files (once)
-npm run test  # test "spec" files (once)
+npm run test  # test all "*.spec.js" files (once)
 ```
 
-After that you can start developing inside the `src` and `test` folders (eg. open "http://localhost/leaflet-elevation/test" in your browser to preview changes). Check also [CONTRIBUTING.md](.github/CONTRIBUTING.md) file for some information about it.
+After that you can start developing inside the `src` and `test` folders (eg. open "http://localhost:8080/test" in your browser to preview changes). Check also [CONTRIBUTING.md](.github/CONTRIBUTING.md) file for some information about it.
 
 ### FAQ
 
@@ -254,8 +259,34 @@ var map = L.map('map', {
 ```
 </details>
 
+<details> <summary>3. How can I import this library as ES module?</summary>
+
+Usually, when working with a js bundler like [Vite](https://vitest.dev/) or [Webpack](https://webpack.js.org/), you need to provide to this library the full path to some dynamically imported files from the [`srcFolder`](./src/):
+
+```js
+import './your-custom-style.css';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+import '@raruto/leaflet-elevation/src/index.js';
+import '@raruto/leaflet-elevation/src/index.css';
+
+const map = L.map('map', {
+    center: [35.681, 139.767],
+    zoom: 11,
+});
+
+const controlElevation = L.control.elevation({
+    srcFolder: 'http://unpkg.com/@raruto/leaflet-elevation/src/' // CHANGE ME: with your own http server custom "src" folder
+}).addTo(map);
+
+// Load track from url (allowed data types: "*.geojson", "*.gpx", "*.tcx")
+controlElevation.load("https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx");
+```
+
+</details>
+
 <details>
-  <summary>3. Some real world projects based on this plugin?</summary><br>
+  <summary>4. Some real world projects based on this plugin?</summary><br>
 
 - https://parcours.scasb.org/
 - https://velocat.ru/velo/phpBB3/map.php

package/dist/leaflet-elevation.js

@@ -21,6 +21,9 @@
 	const HOUR = MIN * 60;
 	const DAY  = HOUR * 24;
 
+	function resolveURL(src, baseUrl) {
+		return (new URL(src, (src.startsWith('../') || src.startsWith('./')) ? baseUrl : undefined)).toString()
+	}
 	/**
 	 * Convert a time (millis) to a human readable duration string (%Dd %H:%M'%S")
 	 */
@@ -166,39 +169,40 @@
 	var _ = /*#__PURE__*/Object.freeze({
 		__proto__: null,
 		Colors: Colors,
-		formatTime: formatTime,
-		formatDate: formatDate,
-		saveFile: saveFile,
-		drawCanvas: drawCanvas,
-		coordPropsToMeta: coordPropsToMeta,
-		parseNumeric: parseNumeric,
-		parseDate: parseDate,
 		addClass: addClass,
-		removeClass: removeClass,
-		toggleClass: toggleClass,
-		replaceClass: replaceClass,
-		style: style,
-		toggleStyle: toggleStyle,
-		setAttributes: setAttributes,
-		toggleEvent: toggleEvent,
-		create: create,
 		append: append,
-		insert: insert,
-		select: select,
+		clamp: clamp,
+		coordPropsToMeta: coordPropsToMeta,
+		create: create,
+		drawCanvas: drawCanvas,
 		each: each,
-		randomId: randomId,
+		formatDate: formatDate,
+		formatTime: formatTime,
+		hasClass: hasClass,
+		iAvg: iAvg,
 		iMax: iMax,
 		iMin: iMin,
-		iAvg: iAvg,
 		iSum: iSum,
-		on: on,
+		insert: insert,
 		off: off,
-		throttle: throttle,
-		wrapNum: wrapNum,
-		hasClass: hasClass,
+		on: on,
+		parseDate: parseDate,
+		parseNumeric: parseNumeric,
+		randomId: randomId,
+		removeClass: removeClass,
+		replaceClass: replaceClass,
+		resolveURL: resolveURL,
 		round: round,
-		clamp: clamp,
-		wrapDelta: wrapDelta
+		saveFile: saveFile,
+		select: select,
+		setAttributes: setAttributes,
+		style: style,
+		throttle: throttle,
+		toggleClass: toggleClass,
+		toggleEvent: toggleEvent,
+		toggleStyle: toggleStyle,
+		wrapDelta: wrapDelta,
+		wrapNum: wrapNum
 	});
 
 	var Options = {
@@ -215,6 +219,7 @@
 		dragging: !L.Browser.mobile,
 		downloadLink: 'link',
 		elevationDiv: "#elevation-div",
+		edgeScale: { bar: true, icon: false, coords: false },
 		followMarker: true,
 		imperial: false,
 		legend: true,
@@ -282,6 +287,9 @@
 		interpolation: "curveLinear",
 		yAxisMax: undefined,
 		yAxisMin: undefined,
+
+		// Prevent CORS issues for relative locations (dynamic import)
+		srcFolder: ((document.currentScript && document.currentScript.src) || (({ url: (typeof document === 'undefined' && typeof location === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : typeof document === 'undefined' ? location.href : (document.currentScript && document.currentScript.src || new URL('leaflet-elevation.js', document.baseURI).href)) }) && (typeof document === 'undefined' && typeof location === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : typeof document === 'undefined' ? location.href : (document.currentScript && document.currentScript.src || new URL('leaflet-elevation.js', document.baseURI).href)))).split("/").slice(0,-1).join("/") + '/',
 	};
 
 	// "leaflet-i18n" fallback
@@ -289,9 +297,6 @@
 		L._ = L.i18n = (string, data) => string;
 	}
 
-	// Prevent CORS issues for relative locations (dynamic import)
-	const baseURL = ((document.currentScript && document.currentScript.src) || (({ url: (typeof document === 'undefined' && typeof location === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : typeof document === 'undefined' ? location.href : (document.currentScript && document.currentScript.src || new URL('leaflet-elevation.js', document.baseURI).href)) }) && (typeof document === 'undefined' && typeof location === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : typeof document === 'undefined' ? location.href : (document.currentScript && document.currentScript.src || new URL('leaflet-elevation.js', document.baseURI).href)))).split("/").slice(0,-1).join("/") + '/';
-
 	const Elevation = L.Control.Elevation = L.Control.extend({
 
 		includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,
@@ -305,11 +310,12 @@
 		__LALMOSTOVER:   'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
 		__LHOTLINE:      '../libs/leaflet-hotline.min.js',
 		__LDISTANCEM:    '../libs/leaflet-distance-marker.min.js',
+		__LEDGESCALE:    '../libs/leaflet-edgescale.min.js',
 		__LCHART:        '../src/components/chart.js',
 		__LMARKER:       '../src/components/marker.js',
 		__LSUMMARY:      '../src/components/summary.js',
 		__modulesFolder: '../src/handlers/',
-		__btnIcon:       baseURL + '../images/elevation.svg',
+		__btnIcon:       '../images/elevation.svg',
 
 		/*
 		 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -456,7 +462,10 @@
 		 */
 		initialize: function(opts) {
 
-			opts = L.setOptions(this, opts);
+			// opts = L.setOptions(this, opts);
+
+			// Fixes: https://github.com/Raruto/leaflet-elevation/pull/240
+			opts = L.setOptions(this, L.extend({}, structuredClone(Options), opts)); // "deep copy" nested objects (multiple charts)
 
 			this._data           = [];
 			this._layers         = L.featureGroup();
@@ -501,10 +510,10 @@
 				case this.__LGEOMUTIL:   condition = typeof L.GeometryUtil !== 'object'; break;
 				case this.__LALMOSTOVER: condition = typeof L.Handler.AlmostOver  !== 'function'; break;
 				case this.__LDISTANCEM:  condition = typeof L.DistanceMarkers  !== 'function'; break;
+				case this.__LEDGESCALE:  condition = typeof L.Control.EdgeScale !== 'function'; break;
 				case this.__LHOTLINE:    condition = typeof L.Hotline  !== 'function'; break;
 			}
-			src = (src.startsWith('../') || src.startsWith('./') ? baseURL : '') + src;
-			return condition !== false ? import(src) : Promise.resolve();
+			return condition !== false ? import(resolveURL(src, this.options.srcFolder)) : Promise.resolve();
 		},
 
 		/**
@@ -703,6 +712,16 @@
 			return this.options.distanceMarkers ? Promise.all([this.import(this.__LGEOMUTIL), this.import(this.__LDISTANCEM)]) : Promise.resolve();
 		},
 
+		/**
+		 * Initialize "L.Control.EdgeScale" integration
+		 */
+		_initEdgeScale: function(map) {
+			return this.options.edgeScale ? Promise.all([this.import(this.__LEDGESCALE)])
+				.then(() => {
+					map.edgeScaleControl = map.edgeScaleControl || L.control.edgeScale('boolean' !== typeof this.options.edgeScale ? this.options.edgeScale : {}).addTo(map);
+				}) : Promise.resolve();
+		},
+
 		_initHotLine: function(layer) {
 			let prop = typeof this.options.hotline == 'string' ? this.options.hotline : 'elevation';
 			return this.options.hotline ? this.import(this.__LHOTLINE)
@@ -748,6 +767,7 @@
 					this._initHotLine(layer),
 					this._initAlmostOverHandler(map, layer),
 					this._initDistanceMarkers(),
+					this._initEdgeScale(map),
 				]).then(() => {
 					if	(this.options.polyline) {
 						layer.addTo(map);
@@ -983,7 +1003,7 @@
 				on(link, 'click', L.DomEvent.stop);
 				on(link, 'click', this._toggle, this);
 				on(link, 'focus', this._toggle, this);
-				fetch(this.__btnIcon).then(r => r.ok && r.text().then(img => link.innerHTML = img));
+				fetch(resolveURL(this.__btnIcon, this.options.srcFolder)).then(r => r.ok && r.text().then(img => link.innerHTML = img));
 			}
 		},