@raruto/leaflet-elevation 2.1.1 → 2.2.2

package/README.md

@@ -26,7 +26,7 @@ _For a working example see one of the following demos:_
 - [loading multiple maps](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_multiple-maps.html)
 - [translating plugin labels](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_i18n-strings.html)
 - [using custom colors](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
-- [using .gpx extensions (cadence + heart)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)
+- [using .gpx extensions (cadence, heart, pace)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)
 - [using .gpx waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_gpx-waypoints.html)
 - [using .geojson waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-waypoints.html)
 
@@ -63,7 +63,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.4/dist/leaflet-ui.js"></script>
+    <script src="https://unpkg.com/leaflet-ui@0.5.5/dist/leaflet-ui.js"></script>
 
     <!-- leaflet-elevation -->
     <link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.css" />
@@ -124,15 +124,15 @@ _For a working example see one of the following demos:_
         // Speed chart profile: true || "summary" || "disabled" || false
         speed: false,
 
+        // Altitude chart profile: true || "summary" || "disabled" || false
+        altitude: true,
+
         // Display time info: true || "summary" || false
-        time: false,
+        time: true,
 
-        // Display distance info: true || "summary"
+        // Display distance info: true || "summary" || false
         distance: true,
 
-        // Display altitude info: true || "summary"
-        altitude: true,
-
         // Summary track info style: "inline" || "multiline" || false
         summary: 'multiline',
 
@@ -196,7 +196,7 @@ git clone git@github.com:Raruto/leaflet-elevation.git
 cd ./leaflet-elevation
 
 npm i         # install dependencies
-npm run dev   # auto-generate "dist" files
+npm run watch # auto-generate "dist" files
 npm run build # generate "dist" files (once)
 npm run test  # test "spec" files (once)
 ```

package/dist/leaflet-elevation.js

@@ -218,7 +218,7 @@
 		followMarker: true,
 		imperial: false,
 		legend: true,
-		handlers: [],
+		handlers: ["Distance", "Time", "Altitude", "Slope", "Speed", "Acceleration"],
 		hotline: 'elevation',
 		marker: 'elevation-line',
 		markerIcon: L.divIcon({
@@ -247,7 +247,7 @@
 		summary: 'inline',
 		slope: false,
 		speed: false,
-		time: false,
+		time: true,
 		timeFactor: 3600,
 		timestamps: false,
 		trkStart: L.circleMarker([0,0], { className: 'start-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#00d800', fillOpacity: 1, interactive: false }),
@@ -314,10 +314,14 @@
 		addData: function(d, layer) {
 			this.import(this.__D3)
 				.then(() => {
-					layer = layer ?? (d.on && d);
-					this._addData(d);
-					this._addLayer(layer);
-					this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
+					if (this._modulesLoaded) {
+						layer = layer ?? (d.on && d);
+						this._addData(d);
+						this._addLayer(layer);
+						this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
+					} else {
+						this.once('modules_loaded', () => this.addData(d,layer));
+					}
 				});
 		},
 
@@ -516,22 +520,14 @@
 
 			if (!this.eleDiv) this.eleDiv = container;
 
-			let modules = [
-				"Distance",
-				"Time",
-				"Altitude",
-				"Slope",
-				"Speed",
-				"Acceleration",
-				...this.options.handlers
-			].filter(m => false !== this.options[typeof m == "string" && m.toLowerCase()]);
-
-			this._loadModules(modules).then(() => { // Inject here required modules (data handlers)
+			this._loadModules(this.options.handlers).then(() => { // Inject here required modules (data handlers)
 				this._initChart(container);
 				this._initButton(container);
 				this._initSummary(container);
 				this._initMarker(map);
 				this._initLayer(map);
+				this._modulesLoaded = true;
+				this.fire('modules_loaded');
 			});
 
 			this.fire('add');
@@ -600,7 +596,7 @@
 				if (geom) {
 					switch (geom.type) {
 						case 'LineString':		return this._addGeoJSONData(geom.coordinates, d.properties);
-						case 'MultiLineString': return each(geom.coordinates, (coords, i) => this._addGeoJSONData(coords, d.properties, i));
+						case 'MultiLineString':	return each(geom.coordinates, (coords, i) => this._addGeoJSONData(coords, d.properties, i));
 						case 'Point':
 						default:				return console.warn('Unsopperted GeoJSON feature geometry type:' + geom.type);
 					}
@@ -1014,14 +1010,12 @@
 			// 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'))
-			let modules = handlers
-				.filter(h => typeof h === 'string' || h instanceof Promise)
-				.map(file => file instanceof Promise ? file : this.import(this.__modulesFolder + file.toLowerCase() + '.js'));
+			let modules = handlers.map(file => (typeof file === 'string' && this.import(this.__modulesFolder + file.toLowerCase() + '.js')) || (file instanceof Promise && file) || Promise.resolve());
 			return Promise.all(modules).then((m) => {
-				each(m, (exported) => {
-					let fn = Object.keys(exported)[0];
+				each(m, (exported, i) => {
+					let fn = exported && Object.keys(exported)[0];
 					if (fn) {
-						handlers[fn] = Elevation[fn] = (Elevation[fn] ?? exported[fn]);
+						handlers[i] = Elevation[fn] = (Elevation[fn] ?? exported[fn]);
 					}
 				});
 				each(handlers, h => ["function", "object"].includes(typeof h) && this._registerHandler(h));
@@ -1314,7 +1308,7 @@
 				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], index);
+						this.track_info[sname + key] = props.stats[key].call(this, curr[attr], this.track_info[sname + key], this._data.length);
 					}
 				}