@raruto/leaflet-elevation 2.0.4 → 2.0.7

package/dist/leaflet-elevation.js

@@ -261,6 +261,7 @@
     	imperial: false,
     	legend: true,
     	handlers: [],
+    	hotline: 'elevation',
     	marker: 'elevation-line',
     	markerIcon: L.divIcon({
     		className: 'elevation-position-marker',
@@ -337,6 +338,7 @@
     	__TOGEOJSON:     'https://unpkg.com/@tmcw/togeojson@4.6.0/dist/togeojson.umd.js',
     	__LGEOMUTIL:     'https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js',
     	__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',
     	__LCHART:        '../src/components/chart.js',
     	__LMARKER:       '../src/components/marker.js',
@@ -739,6 +741,41 @@
     		}
     	},
 
+    	_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);
+    				});
+    			});
+    			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])});
+    							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);
+    						}
+    					});
+    			});
+    		}
+    	},
+
     	/**
     	 * Initialize "L.AlmostOver" and "L.DistanceMarkers"
     	 */
@@ -752,6 +789,7 @@
     			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) {
@@ -767,6 +805,7 @@
     	 */
     	_collapse: function() {
     		replaceClass(this._container, 'elevation-expanded', 'elevation-collapsed');
+    		if (this._map) this._map.invalidateSize();
     	},
 
     	/*
@@ -774,6 +813,7 @@
     	 */
     	_expand: function() {
     		replaceClass(this._container, 'elevation-collapsed', 'elevation-expanded');
+    		if (this._map) this._map.invalidateSize();
     	},
 
     	/**
@@ -1562,8 +1602,8 @@
     			}
     			if (this.options.downloadLink && this._downloadURL) { // TODO: generate dynamically file content instead of using static file urls.
     				this._summary._container.innerHTML += '<span class="download"><a href="#">' + L._('Download') + '</a></span>';
-    				select('.download a', this._summary._container).onclick = ({preventDefault}) => {
-    					preventDefault();
+    				select('.download a', this._summary._container).onclick = (e) => {
+    					e.preventDefault();
     					let event = { downloadLink: this.options.downloadLink, confirm: saveFile.bind(this, this._downloadURL) };
     					if (this.options.downloadLink == 'modal' && typeof CustomEvent === "function") {
     						document.dispatchEvent(new CustomEvent("eletrack_download", { detail: event }));