@raruto/leaflet-elevation 2.2.0 → 2.2.3

package/README.md

@@ -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" />
@@ -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.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;
 }
@@ -271,8 +270,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 //////////////////////////////////////////////// */
@@ -281,7 +280,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 /////////////////////////////////////////////////// */
@@ -290,7 +289,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 /////////////////////////////////////////////////// */
@@ -319,6 +318,7 @@
   --ele-alpha: 0.45;
   --ele-stroke: #4682B4;
   --ele-circle: #fff;
+  --ele-line: #000;
 }
 
 .elevation-detached.lightblue-theme .area {

package/dist/leaflet-elevation.js

@@ -307,6 +307,7 @@
 		__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
@@ -314,10 +315,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));
+					}
 				});
 		},
 
@@ -522,6 +527,8 @@
 				this._initSummary(container);
 				this._initMarker(map);
 				this._initLayer(map);
+				this._modulesLoaded = true;
+				this.fire('modules_loaded');
 			});
 
 			this.fire('add');
@@ -590,7 +597,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);
 					}
@@ -971,6 +978,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));
 			}
 		},
 
@@ -1302,7 +1310,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);
 					}
 				}