@raruto/leaflet-elevation 2.2.7 → 2.3.0

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
 

package/dist/leaflet-elevation.js

@@ -166,39 +166,39 @@
 	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,
 		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 +215,7 @@
 		dragging: !L.Browser.mobile,
 		downloadLink: 'link',
 		elevationDiv: "#elevation-div",
+		edgeScale: { bar: true, icon: false, coords: false },
 		followMarker: true,
 		imperial: false,
 		legend: true,
@@ -280,7 +281,6 @@
 		decimalsY: 0,
 		forceAxisBounds: false,
 		interpolation: "curveLinear",
-		skipNullZCoords: false,
 		yAxisMax: undefined,
 		yAxisMin: undefined,
 	};
@@ -291,7 +291,7 @@
 	}
 
 	// 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 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({
 
@@ -306,6 +306,7 @@
 		__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',
@@ -457,7 +458,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();
@@ -502,6 +506,7 @@
 				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;
@@ -704,6 +709,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)
@@ -749,6 +764,7 @@
 					this._initHotLine(layer),
 					this._initAlmostOverHandler(map, layer),
 					this._initDistanceMarkers(),
+					this._initEdgeScale(map),
 				]).then(() => {
 					if	(this.options.polyline) {
 						layer.addTo(map);
@@ -1273,10 +1289,10 @@
 			}
 
 			// prevent excessive variabile instanstations
-			let i, curr, prev, attr;
+			let i, curr, prev, attr = props.attr || props.name;
 
 			// save here a reference to last used point
-			let lastValid = null; 
+			let lastValid = {};
 
 			// iteration
 			this.on("elepoint_added", ({index, point}) => {
@@ -1284,42 +1300,33 @@
 
 				prev = curr ?? this._data[i]; // same as: this._data[i > 0 ? i - 1 : i]
 				curr = this._data[i];
-				attr = props.attr || props.name;
+
+				// retrieve point value
+				curr[attr] = props.pointToAttr.call(this, point, i);
 
 				// check and fix missing data on last added point
-				if (props.skipNull === false) {
-					let curr = this._data[i][attr];
-					if(i > 0) {
-						let prev = this._data[i - 1][attr];
-						if (isNaN(prev)) {
-							if (!isNaN(lastValid) && !isNaN(curr)) {
-								prev   = (lastValid + curr) / 2;
-							} else if (!isNaN(lastValid)) {
-								prev   = lastValid;
-							} else if (!isNaN(curr)) {
-								prev   = curr;
-							}
-							if (!isNaN(prev)) return this._data.splice(i - 1, 1);
-							this._data[i - 1][attr] = prev;
-						}
+				if (i > 0 && isNaN(prev[attr])) {
+					if (!isNaN(lastValid[attr]) && !isNaN(curr[attr])) {
+						prev[attr]   = (lastValid[attr] + curr[attr]) / 2;
+					} else if (!isNaN(lastValid[attr])) {
+						prev[attr]   = lastValid[attr];
+					} else if (!isNaN(curr[attr])) {
+						prev[attr]   = curr[attr];
 					}
-					// update reference to last used point (ie. if it has data)
-					if (!isNaN(curr)) {
-						lastValid = curr;
+					// update "yAttr" and "xAttr"
+					if (props.meta) {
+						prev[props.meta] = prev[attr];
 					}
 				}
 
-				// retrieve point value
-				curr[attr] = props.pointToAttr.call(this, point, i);
-
-				// update "track_info" stats (min, max, avg, ...)
-				if (props.stats) {
-					for (const key in props.stats) {
-						let sname = (props.statsName || attr) + (key != '' ? '_' : '');
-						this.track_info[sname + key] = props.stats[key].call(this, curr[attr], this.track_info[sname + key], this._data.length);
-					}
+				// skip to next iteration for invalid or missing data (eg. i == 0)
+				if (isNaN(curr[attr])) {
+					return;
 				}
 
+				// update reference to last used point
+				lastValid[attr] = curr[attr];
+
 				// Limit "crazy" delta values.
 				if (props.deltaMax) {
 					curr[attr] =wrapDelta(curr[attr], prev[attr], props.deltaMax);
@@ -1335,8 +1342,16 @@
 					curr[attr] = round(curr[attr], props.decimals);
 				}
 
+				// update "track_info" stats (min, max, avg, ...)
+				if (props.stats) {
+					for (const key in props.stats) {
+						let sname = (props.statsName || attr) + (key != '' ? '_' : '');
+						this.track_info[sname + key] = props.stats[key].call(this, curr[attr], this.track_info[sname + key], this._data.length);
+					}
+				}
+
 				// update here some mixins (eg. complex "track_info" stuff)
-				if(props.onPointAdded) props.onPointAdded.call(this, curr[attr], i, point);
+				if (props.onPointAdded) props.onPointAdded.call(this, curr[attr], i, point);
 			});
 		},
 
@@ -1354,7 +1369,6 @@
 				name,
 				attr,
 				required,
-				skipNull,
 				deltaMax,
 				clampRange,
 				decimals,
@@ -1379,7 +1393,7 @@
 				this._registerDataAttribute({
 					name,
 					attr,
-					skipNull,
+					meta,
 					deltaMax,
 					clampRange,
 					decimals,