@raruto/leaflet-elevation 2.0.7 → 2.1.1

package/src/control.js

@@ -1,7 +1,11 @@
-import 'leaflet-i18n';
 import * as _      from './utils';
 import { Options } from './options';
 
+// "leaflet-i18n" fallback
+if (!L._ || !L.i18n) {
+	L._ = L.i18n = (string, data) => string;
+}
+
 export const Elevation = L.Control.Elevation = L.Control.extend({
 
 	includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,
@@ -55,7 +59,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		if (this._chart)         this._clearChart();
 		if (this._layers)        this._clearLayers(this._layers);
 		if (this._markers)       this._clearLayers(this._markers);
-		if (this._circleMarkers) this._clearLayers(this._circleMarkers);
+		if (this._circleMarkers) this._circleMarkers.remove();
+		if (this._hotline)       this._clearLayers(this._hotline);
 
 		this._data      = [];
 		this.track_info = {};
@@ -165,6 +170,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this._data           = [];
 		this._layers         = L.featureGroup();
 		this._markers        = L.featureGroup();
+		this._hotline        = L.featureGroup();
 		this._circleMarkers  = L.featureGroup();
 		this._markedSegments = L.polyline([]);
 		this._start          = (opts.trkStart || Options.trkStart);
@@ -236,12 +242,15 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			...this.options.handlers
 		].filter(m => false !== this.options[typeof m == "string" && m.toLowerCase()]);
 
-		this._loadModules(modules);	// Inject here required modules (data handlers)
-		this._initButton(container);
-		this._initChart(container);
-		this._initSummary(container);
-		this._initMarker(map);
-		this._initLayer(map);
+		this._loadModules(modules).then(() => { // Inject here required modules (data handlers)
+			this._initChart(container);
+			this._initButton(container);
+			this._initSummary(container);
+			this._initMarker(map);
+			this._initLayer(map);
+		});
+
+		this.fire('add');
 
 		return container;
 	},
@@ -266,6 +275,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this
 			.off('eledata_added eledata_loaded', this._updateChart,   this)
 			.off('eledata_added eledata_loaded', this._updateSummary, this);
+
+		this.fire('remove');
 	},
 
 	/**
@@ -386,8 +397,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Initialize "L.AlmostOver" integration
 	 */
 	_initAlmostOverHandler: function(map, layer) {
-		if(!map || !this.options.almostOver) return;
-		Promise.all([
+		return (map && this.options.almostOver && !L.Browser.mobile) ? Promise.all([
 			this.import(this.__LGEOMUTIL),
 			this.import(this.__LALMOSTOVER)
 		]).then(() => {
@@ -398,81 +408,72 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 					.on('almost:move', (e) => this._onMouseMoveLayer(e))
 					.on('almost:out',  (e) => this._onMouseOut(e));
 			}
-		});
+		}) : Promise.resolve();
 	},
 
 	/**
 	 * Initialize "L.DistanceMarkers" integration
 	 */
-	_initDistanceMarkers: function(map, layer) {
-		if (!map) return;
-		if (this.options.distanceMarkers) {
-			Promise.all([
-				this.import(this.__LGEOMUTIL),
-				this.import(this.__LDISTANCEM)
-			]).then(() => this.options.polyline && layer.addTo(map) && this._circleMarkers.bringToFront());
-		} else if (this.options.polyline) {
-			layer.addTo(map);
-		}
+	_initDistanceMarkers: function() {
+		return this.options.distanceMarkers ? Promise.all([this.import(this.__LGEOMUTIL), this.import(this.__LDISTANCEM)]) : Promise.resolve();
 	},
 
-	_initHotLine: function(map, layer) {
-		this._hotline = L.featureGroup();
-		if (this.options.hotline) {
-			layer.on('add', () => {
-				this._hotline.eachLayer(line => {
-					this._hotline.addTo(layer._map);
-					if (line._renderer)
-					line._renderer._container.parentElement.insertBefore(line._renderer._container, line._renderer._container.parentElement.firstChild);
+	_initHotLine: function(layer) {
+		let prop = typeof this.options.hotline == 'string' ? this.options.hotline : 'elevation';
+		return this.options.hotline ? this.import(this.__LHOTLINE)
+			.then(() => {
+				layer.eachLayer((trkseg) => {
+					if(trkseg.feature.geometry.type != "Point") {
+						let geo = L.geoJson(trkseg.toGeoJSON(), { coordsToLatLng: (coords) => L.latLng(coords[0], coords[1], coords[2])});
+						let line = L.hotline(geo.toGeoJSON().features[0].geometry.coordinates, {
+							min: isFinite(this.track_info[prop + '_min']) ? this.track_info[prop + '_min'] : 0,
+							max: isFinite(this.track_info[prop + '_max']) ? this.track_info[prop + '_max'] : 1,
+							palette: {
+								0.0: '#008800',
+								0.5: '#ffff00',
+								1.0: '#ff0000'
+							},
+							weight: 5,
+							outlineColor: '#000000',
+							outlineWidth: 1
+						}).addTo(this._hotline);
+						let alpha = trkseg.options.style && trkseg.options.style.opacity || 1;
+						trkseg.on('add remove', ({type}) => {
+							trkseg.setStyle({opacity: (type == 'add' ? 0 : alpha)});
+							line[(type == 'add' ? 'addTo' : 'removeFrom')](trkseg._map);
+							if (line._renderer) line._renderer._container.parentElement.insertBefore(line._renderer._container, line._renderer._container.parentElement.firstChild);
+						});
+					}
 				});
-			});
-			let prop = typeof this.options.hotline == 'string' ? this.options.hotline : 'elevation';
-			this.import(this.__LHOTLINE)
-				.then(() => {
-					layer.setStyle({opacity: 0});
-					layer.eachLayer((trkseg) => {
-						if(trkseg.feature.geometry.type != "Point") {
-							let geo = L.geoJson(trkseg.toGeoJSON(), { coordsToLatLng: (coords) => L.latLng(coords[0], coords[1], coords[2])});
-							let line = L.hotline(geo.toGeoJSON().features[0].geometry.coordinates, {
-								min: isFinite(this.track_info[prop + '_min']) ? this.track_info[prop + '_min'] : 0,
-								max: isFinite(this.track_info[prop + '_max']) ? this.track_info[prop + '_max'] : 1,
-								palette: {
-									0.0: '#008800',
-									0.5: '#ffff00',
-									1.0: '#ff0000'
-								},
-								weight: 5,
-								outlineColor: '#000000',
-								outlineWidth: 1
-							}).addTo(this._hotline);
-						}
-					});
-			});
-		}
+			}) : Promise.resolve();
 	},
 
 	/**
 	 * Initialize "L.AlmostOver" and "L.DistanceMarkers"
 	 */
-	_initMapIntegrations: function(control, layer) {
-		let map   = control._map;
-		if (control._data.length) {
-			control._start.setLatLng(control._data[0].latlng);
-			control._end.setLatLng(control._data[control._data.length -1].latlng);
-		}
+	_initMapIntegrations: function(layer) {
+		let map = this._map;
 		if (map) {
-			control._circleMarkers.addTo(map);
-			map.once('layeradd', (e) => control.options.autofitBounds && control.fitBounds(layer.getBounds()));
-			if (!L.Browser.mobile) {
-				control._initHotLine(map, layer);
-				control._initAlmostOverHandler(map, layer);
-				control._initDistanceMarkers(map, layer);
-			} else if (control.options.polyline) {
-				layer.addTo(map);
+			if (this._data.length) {
+				this._start.setLatLng(this._data[0].latlng);
+				this._end.setLatLng(this._data[this._data.length -1].latlng);
 			}
-			map.invalidateSize();
+			Promise.all([
+				this._initHotLine(layer),
+				this._initAlmostOverHandler(map, layer),
+				this._initDistanceMarkers(),
+			]).then(() => {
+				if	(this.options.polyline) {
+					layer.addTo(map);
+					this._circleMarkers.addTo(map);
+				}
+				if (this.options.autofitBounds) {
+					this.fitBounds(layer.getBounds());
+				}
+				map.invalidateSize();
+			});
 		} else {
-			console.warn("Undefined elevation map object");;
+			this.once('add', () => this._initMapIntegrations(layer));
 		}
 	},
 
@@ -581,14 +582,15 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Generate "svg" chart (DOM element).
 	 */
 	_initChart: function(container) {
-		let opts    = this.options;
+		let opts = this.options;
+		let map  = this._map;
 
 		if (opts.detached) {
 			let { offsetWidth, offsetHeight}             = this.eleDiv;
 			if (offsetWidth > 0)             opts.width  = offsetWidth;
 			if (offsetHeight > 20)           opts.height = offsetHeight - 20; // 20 = horizontal scrollbar size.
 		} else {
-			let { clientWidth }                          = this._map.getContainer();
+			let { clientWidth }                          = map.getContainer();
 			opts._maxWidth                               = opts._maxWidth > opts.width ? opts._maxWidth : opts.width;
 			this._container.style.maxWidth               = opts._maxWidth + 'px';
 			if (opts._maxWidth > clientWidth) opts.width = clientWidth - 30;
@@ -641,6 +643,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			this._updateSummary();
 		});
 
+
 	},
 
 	_initLayer: function() {
@@ -677,12 +680,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Inspired by L.Control.Layers
 	 */
 	_initButton: function(container) {
-
-		if (L.Browser.mobile || !this.options.detached) {
-			L.DomEvent
-				.disableClickPropagation(container)
-				.disableScrollPropagation(container);
-		}
+		L.DomEvent
+			.disableClickPropagation(container)
+			.disableScrollPropagation(container);
 
 		this.options.collapsed ? this._collapse() : this._expand();
 
@@ -730,22 +730,18 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		// First map known classnames (eg. "Altitude" --> L.Control.Elevation.Altitude)
 		handlers = handlers.map((h) => typeof h === 'string' && typeof Elevation[h] !== "undefined" ? Elevation[h] : h);
 		// Then load optional classes and custom imports (eg. "Cadence" --> import('../src/handlers/cadence.js'))
-		Promise.
-			all(
-				handlers
-					.filter(h => typeof h === 'string' || h instanceof Promise)
-					.map(file => file instanceof Promise ? file : this.import(this.__modulesFolder + file.toLowerCase() + '.js'))
-			)
-			.then((m) => {
-				_.each(m, (exported) => {
-					let fn = Object.keys(exported)[0];
-					if (fn && typeof Elevation[fn] === "undefined" ) {
-						handlers[fn] = Elevation[fn] = exported[fn];
-						
-					}
-				});
-				_.each(handlers, h => this._registerHandler(h));
+		let modules = handlers
+			.filter(h => typeof h === 'string' || h instanceof Promise)
+			.map(file => file instanceof Promise ? file : this.import(this.__modulesFolder + file.toLowerCase() + '.js'));
+		return Promise.all(modules).then((m) => {
+			_.each(m, (exported) => {
+				let fn = Object.keys(exported)[0];
+				if (fn) {
+					handlers[fn] = Elevation[fn] = (Elevation[fn] ?? exported[fn]);
+				}
 			});
+			_.each(handlers, h => ["function", "object"].includes(typeof h) && this._registerHandler(h));
+		});
 	},
 
 	/**
@@ -792,7 +788,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		});
 
 		this.import(this.__D3).then(() => {
-			this._initMapIntegrations(this, layer);
+			this._initMapIntegrations(layer);
 			this._fireEvt("eledata_loaded", { data: geojson, layer: layer, name: this.track_info.name, track_info: this.track_info });
 		});
 
@@ -1035,7 +1031,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			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.track_info[sname + key] = props.stats[key].call(this, curr[attr], this.track_info[sname + key], index);
 				}
 			}
 

package/src/handlers/heart.js

@@ -1,53 +1,53 @@
-export function Heart() {
-
-    const _ = L.Control.Elevation.Utils;
-
-    return {
-        name: 'heart',      // <-- Your custom option name (eg. "heart: true")
-        unit: 'bpm',
-        meta: 'hr',         // <-- point.meta.hr
-        coordinateProperties: ["heart", "heartRates", "heartRate"], // List of GPX Extensions ("coordinateProperties") to be handled by "@tmcw/toGeoJSON"
-        pointToAttr: (point, i) => (point.hr ?? point.meta.hr ?? point.prev('heart')) || 0,
-		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
-        scale: {
-            axis       : "y",
-            position   : "left",
-            scale      : { min: -1, max: +1 },
-            tickPadding: 25,
-            labelX     : -30,
-            labelY     : -8,
-        },
-        path: {
-            label        : 'ECG',
-            yAttr        : 'heart',
-            scaleX       : 'distance',
-            scaleY       : 'heart',
-            color        : 'white',
-            strokeColor  : 'red',
-            strokeOpacity: "0.85",
-            fillOpacity  : "0.1",
-        },
-        tooltip: {
-            chart: (item) => L._("hr: ") + item.heart + " " + 'bpm',
-            marker: (item) => Math.round(item.heart) + " " + 'bpm',
-            order: 1
-        },
-        summary: {
-            "minbpm": {
-                label: "Min BPM: ",
-                value: (track, unit) => Math.round(track.heart_min || 0) + '&nbsp;' + unit,
-                // order: 30
-            },
-            "maxbpm": {
-                label: "Max BPM: ",
-                value: (track, unit) => Math.round(track.heart_min || 0) + '&nbsp;' + unit,
-                // order: 30
-            },
-            "avgbpm": {
-                label: "Avg BPM: ",
-                value: (track, unit) => Math.round(track.heart_avg || 0) + '&nbsp;' + unit,
-                // order: 20
-            },
-        }
-    };
+export function Heart() {
+
+    const _ = L.Control.Elevation.Utils;
+
+    return {
+        name: 'heart',      // <-- Your custom option name (eg. "heart: true")
+        unit: 'bpm',
+        meta: 'hr',         // <-- point.meta.hr
+        coordinateProperties: ["heart", "heartRates", "heartRate"], // List of GPX Extensions ("coordinateProperties") to be handled by "@tmcw/toGeoJSON"
+        pointToAttr: (point, i) => (point.hr ?? point.meta.hr ?? point.prev('heart')) || 0,
+		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
+        scale: {
+            axis       : "y",
+            position   : "left",
+            scale      : { min: -1, max: +1 },
+            tickPadding: 25,
+            labelX     : -30,
+            labelY     : -8,
+        },
+        path: {
+            label        : 'ECG',
+            yAttr        : 'heart',
+            scaleX       : 'distance',
+            scaleY       : 'heart',
+            color        : 'white',
+            strokeColor  : 'red',
+            strokeOpacity: "0.85",
+            fillOpacity  : "0.1",
+        },
+        tooltip: {
+            chart: (item) => L._("hr: ") + item.heart + " " + 'bpm',
+            marker: (item) => Math.round(item.heart) + " " + 'bpm',
+            order: 1
+        },
+        summary: {
+            "minbpm": {
+                label: "Min BPM: ",
+                value: (track, unit) => Math.round(track.heart_min || 0) + '&nbsp;' + unit,
+                // order: 30
+            },
+            "maxbpm": {
+                label: "Max BPM: ",
+                value: (track, unit) => Math.round(track.heart_max || 0) + '&nbsp;' + unit,
+                // order: 30
+            },
+            "avgbpm": {
+                label: "Avg BPM: ",
+                value: (track, unit) => Math.round(track.heart_avg || 0) + '&nbsp;' + unit,
+                // order: 20
+            },
+        }
+    };
 };

package/src/index.js

@@ -34,21 +34,9 @@
  *     CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
  */
 
-import 'leaflet-i18n';
 import * as _ from './utils';
 import { Elevation } from './control';
 
 Elevation.Utils = _;
 
-/* Temporary fix for empty values evaluated as false (leaflet-i18n v0.3.1) */
-(function(){
-	let proto = L.i18n.bind({});
-	L.i18n = L._ = (string, data) => {
-		if (L.locale && L.locales[L.locale] && L.locales[L.locale][string] == "") {
-			L.locales[L.locale][string] = "\u200B";
-		}
-		return proto.call(null, string, data);
-	};
-})();
-
 L.control.elevation = (options) => new Elevation(options);

package/src/utils.js

@@ -92,7 +92,7 @@ export function coordPropsToMeta(coordProps, name, parser) {
 		if (props) {
 			for (const key of coordProps) {
 				if (key in props) {
-					point.meta[name] = (parser || parseInt).call(this, (isMulti ? props[key][isMulti] : props[key]), id);
+					point.meta[name] = (parser || parseNumeric).call(this, (isMulti ? props[key][isMulti] : props[key]), id);
 					break;
 				}
 			}
@@ -103,7 +103,7 @@ export function coordPropsToMeta(coordProps, name, parser) {
 /**
  * Extract numeric property (id) from GeoJSON object
  */
-export const parseInt  = (property, id) => window.parseInt((typeof property === 'object' ? property[id] : property));
+export const parseNumeric  = (property, id) => parseInt((typeof property === 'object' ? property[id] : property));
 
 /**
  * Extract datetime property (id) from GeoJSON object
@@ -131,10 +131,10 @@ export const randomId      = ()                   => Math.random().toString(36).
 /**
  * TODO: use generators instead? (ie. "yield")
  */
-export const iMax = (iVal, max) => (iVal > max ? iVal : max) || -Infinity; 
-export const iMin = (iVal, min) => (iVal < min ? iVal : min) || +Infinity;
-export const iAvg = (iVal, avg) => (iVal + (avg || 0)) / 2.0;
-export const iSum = (iVal, sum) => iVal + (sum || 0);
+export const iMax = (iVal, max = -Infinity) => (iVal > max ? iVal : max); 
+export const iMin = (iVal, min = +Infinity) => (iVal < min ? iVal : min);
+export const iAvg = (iVal, avg = 0, idx = 1) => (iVal + avg * (idx - 1)) / idx;
+export const iSum = (iVal, sum = 0) => iVal + sum;
 
 /**
  * Alias for some leaflet core functions