@raruto/leaflet-elevation 2.2.0 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@raruto/leaflet-elevation",
-	"version": "2.2.0",
+	"version": "2.2.3",
 	"description": "A Leaflet plugin that allows to add elevation profiles using d3js",
 	"type": "module",
 	"main": "dist/leaflet-elevation.min.js",
@@ -23,9 +23,11 @@
 		"javascript",
 		"elevation",
 		"highchart",
+		"kml",
 		"altitude",
 		"gpx",
-		"gps-visualizer"
+		"gps-visualizer",
+		"tcx"
 	],
 	"author": {
 		"name": "Felix “MrMufflon” Bache",

package/src/control.js

@@ -23,6 +23,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__LMARKER:       '../src/components/marker.js',
 	__LSUMMARY:      '../src/components/summary.js',
 	__modulesFolder: '../src/handlers/',
+	__btnIcon:       '../images/elevation.svg',
 
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -30,10 +31,14 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	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));
+				}
 			});
 	},
 
@@ -238,6 +243,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			this._initSummary(container);
 			this._initMarker(map);
 			this._initLayer(map);
+			this._modulesLoaded = true;
+			this.fire('modules_loaded');
 		});
 
 		this.fire('add');
@@ -306,7 +313,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			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);
 				}
@@ -687,6 +694,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			_.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));
 		}
 	},
 
@@ -1019,7 +1027,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], index);
+					this.track_info[sname + key] = props.stats[key].call(this, curr[attr], this.track_info[sname + key], this._data.length);
 				}
 			}
 

package/src/index.css

@@ -146,7 +146,6 @@
 }
 
 .elevation-toggle-icon {
-  background: var(--ele-toggle-bg, var(--ele-icon, url(../images/elevation-lime.svg)) no-repeat center center);
   background-color: #fff;
   right: 5px;
   top: 5px;
@@ -246,7 +245,7 @@
 
 .elevation-expanded {
   --ele-close-btn: inline-block;
-  --ele-toggle-bg: transparent;
+  --ele-toggle-bg: none;
   --ele-toggle-pos: absolute;
   --ele-toggle-size: 20px;
 }
@@ -270,8 +269,8 @@
   --ele-area: #9CC222;
   --ele-grid: #CCC;
   --ele-brush: rgba(99, 126, 11, 0.4);
-  --ele-icon: url(../images/elevation-lime.svg);
   --ele-poly: #566B13;
+  --ele-line: #70ab00;
 }
 
 /* STEELBLUE THEME //////////////////////////////////////////////// */
@@ -279,7 +278,7 @@
   --ele-axis: #0D1821;
   --ele-area: #4682B4;
   --ele-brush: rgba(23, 74, 117, 0.4);
-  --ele-icon: url(../images/elevation-steelblue.svg);
+  --ele-line: #174A75;
 }
 
 /* PURPLE THEME /////////////////////////////////////////////////// */
@@ -287,7 +286,7 @@
   --ele-bg: rgba(115, 44, 123, 0.2);
   --ele-area: #732C7B;
   --ele-brush: rgba(74, 14, 80, 0.4);
-  --ele-icon: url(../images/elevation-purple.svg);
+  --ele-line: #732c7b;
 }
 
 /* YELLOW THEME /////////////////////////////////////////////////// */
@@ -312,6 +311,7 @@
   --ele-alpha: 0.45;
   --ele-stroke: #4682B4;
   --ele-circle: #fff;
+  --ele-line: #000;
 }
 
 .elevation-detached.lightblue-theme .area {

package/images/elevation-lime.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><defs/><path fill="#addb55" fill-opacity=".8" d="M23.1 20.8l-4.2-8-3.9-.2-2.7 1.8-2.4-5.5-5.2 6.2v5.7" opacity=".9"/><path fill="none" stroke="#70ab00" stroke-width="1.5" d="M4.7 14.8h1.1l4.3-6.2 2.5 5.6 2.5-2.3 3.7.2 4 8.3v.4"/><path fill="none" stroke="#737373" stroke-linecap="square" d="M3.4 5v19.8M24.7 22.4H.9"/></svg>

package/images/elevation-purple.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><defs/><path fill="#b659c1" fill-opacity=".8" d="M23.1 20.8l-4.2-8-3.9-.2-2.7 1.8-2.4-5.5-5.2 6.2v5.7" opacity=".9"/><path fill="none" stroke="#732c7b" stroke-width="1.5" d="M4.7 14.8h1.1l4.3-6.2 2.5 5.6 2.5-2.3 3.7.2 4 8.3v.4"/><path fill="none" stroke="#737373" stroke-linecap="square" d="M3.4 5v19.8M24.7 22.4H.9"/></svg>

package/images/elevation-steelblue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><defs/><path fill="#4682b4" fill-opacity=".8" d="M23.1 20.8l-4.2-8-3.9-.2-2.7 1.8-2.4-5.5-5.2 6.2v5.7" opacity=".9"/><path fill="none" stroke="#174a75" stroke-width="1.5" d="M4.7 14.8h1.1l4.3-6.2 2.5 5.6 2.5-2.3 3.7.2 4 8.3v.4"/><path fill="none" stroke="#737373" stroke-linecap="square" d="M3.4 5v19.8M24.7 22.4H.9"/></svg>