@raruto/leaflet-elevation 2.3.0 → 2.3.2

package/README.md

@@ -65,7 +65,7 @@ _For a working example see one of the following demos:_
 
     <!-- leaflet-ui -->
     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
-    <script src="https://unpkg.com/leaflet-ui@0.5.9/dist/leaflet-ui.js"></script>
+    <script src="https://unpkg.com/leaflet-ui@0.6.0/dist/leaflet-ui.js"></script>
 
     <!-- leaflet-elevation -->
     <link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.css" />
@@ -209,7 +209,7 @@ cd ./leaflet-elevation
 npm i         # install dependencies
 npm run dev   # start dev server at: http://localhost:8080
 npm run build # generate "dist" files (once)
-npm run test  # test all ".*spec.js" 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:8080/test" in your browser to preview changes). Check also [CONTRIBUTING.md](.github/CONTRIBUTING.md) file for some information about it.
@@ -259,8 +259,35 @@ 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: [41.4583, 12.7059]
+    zoom: 5,
+});
+
+const controlElevation = L.control.elevation({
+    // CHANGE ME: with your own http server folder (eg. "http://custom-server/public/path/to/leaflet-elevation/src/")
+    srcFolder: 'http://unpkg.com/@raruto/leaflet-elevation/src/'
+}).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")
 	 */
@@ -188,6 +191,7 @@
 		randomId: randomId,
 		removeClass: removeClass,
 		replaceClass: replaceClass,
+		resolveURL: resolveURL,
 		round: round,
 		saveFile: saveFile,
 		select: select,
@@ -283,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
@@ -290,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' ? 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("/") + '/';
-
 	const Elevation = L.Control.Elevation = L.Control.extend({
 
 		includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,
@@ -300,9 +304,9 @@
 		options: Options,
 		__mileFactor:     0.621371, // 1 km = (0.621371 mi)
 		__footFactor:     3.28084,  // 1 m  = (3.28084 ft)
-		__D3:            'https://unpkg.com/d3@6.5.0/dist/d3.min.js',
-		__TOGEOJSON:     'https://unpkg.com/@tmcw/togeojson@4.6.0/dist/togeojson.umd.js',
-		__LGEOMUTIL:     'https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js',
+		__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',
+		__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',
 		__LDISTANCEM:    '../libs/leaflet-distance-marker.min.js',
@@ -311,7 +315,7 @@
 		__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
@@ -509,8 +513,7 @@
 				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();
 		},
 
 		/**
@@ -1000,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));
 			}
 		},