@raruto/leaflet-elevation 2.0.0 → 2.0.3

package/README.md

@@ -241,6 +241,7 @@ var map = L.map('map', {
 - https://wordpress.org/plugins/extensions-leaflet-map/
 - https://github.com/der-stefan/OpenTopoMap
 - https://gpx.n-peloton.fr/
+- https://walkaholic.me/map
 
 </details>
     
@@ -251,7 +252,7 @@ _Related: [Leaflet-UI presets](https://github.com/raruto/leaflet-ui), [QGIS Inte
 **Compatibile with:**
 [![Leaflet 1.x compatible!](https://img.shields.io/badge/Leaflet-1.7.0-1EB300.svg?style=flat)](http://leafletjs.com/reference.html)
 [![d3.js v6 compatibile!](https://img.shields.io/badge/d3.js-6.5-1EB300.svg?style=flat)](https://www.npmjs.com/package/d3)
-[![@tmcw/togeojson v4.6.0 compatibile!](https://img.shields.io/badge/@tmcw/togeojson-4.5-1EB300.svg?style=flat)](https://www.npmjs.com/package/@tmcw/togeojson)
+[![@tmcw/togeojson v4.6.0 compatibile!](https://img.shields.io/badge/@tmcw/togeojson-4.6-1EB300.svg?style=flat)](https://www.npmjs.com/package/@tmcw/togeojson)
 
 
 ---

package/dist/leaflet-elevation.css

@@ -60,6 +60,7 @@
 }
 
 .elevation-control.elevation .axis text,
+.elevation-control.elevation .legend text,
 .elevation-control.elevation .point text {
   fill: #000;
   font-weight: 700;
@@ -246,7 +247,7 @@
 .leaflet-elevation-pane .height-focus,
 .leaflet-overlay-pane .height-focus {
   stroke: #000;
-  fill: var(--ele-area, #FFF);
+  fill: var(--ele-circle, var(--ele-area, #FFF));
 }
 
 .leaflet-elevation-pane .height-focus.line,
@@ -341,6 +342,7 @@
   --ele-area: #3366CC;
   --ele-alpha: 0.45;
   --ele-stroke: #4682B4;
+  --ele-circle: #fff;
 }
 
 .elevation-detached .lightblue-theme.elevation-control.elevation .area {

package/dist/leaflet-elevation.js

@@ -135,11 +135,11 @@
      * Loop and extract GPX Extensions handled by "@tmcw/toGeoJSON" (eg. "coordinateProperties" > "times")
      */
     function coordPropsToMeta(coordProps, name, parser) {
-    	return coordProps && (({props, point, id}) => {
+    	return coordProps && (({props, point, id, isMulti }) => {
     		if (props) {
     			for (const key of coordProps) {
     				if (key in props) {
-    					point.meta[name] = (parser || parseInt).call(this, props[key], id);
+    					point.meta[name] = (parser || parseInt).call(this, (isMulti ? props[key][isMulti] : props[key]), id);
     					break;
     				}
     			}
@@ -186,9 +186,9 @@
     /**
      * Alias for some leaflet core functions
      */
-    const { on, off }  = L.DomEvent;
-    const { throttle } = L.Util;
-    const { hasClass } = L.DomUtil;
+    const { on, off }           = L.DomEvent;
+    const { throttle, wrapNum } = L.Util;
+    const { hasClass }          = L.DomUtil;
 
     /**
      * Limit floating point precision
@@ -236,6 +236,7 @@
         on: on,
         off: off,
         throttle: throttle,
+        wrapNum: wrapNum,
         hasClass: hasClass,
         round: round,
         clamp: clamp,
@@ -337,10 +338,10 @@
     	__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',
     	__LDISTANCEM:    '../libs/leaflet-distance-marker.min.js',
+    	__LCHART:        '../src/components/chart.js',
+    	__LMARKER:       '../src/components/marker.js',
+    	__LSUMMARY:      '../src/components/summary.js',
     	__modulesFolder: '../src/handlers/',
-    	__LCHART:        '../src/chart.js',
-    	__LMARKER:       '../src/marker.js',
-    	__LSUMMARY:      '../src/summary.js',
 
     	/*
     	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -348,9 +349,7 @@
     	addData: function(d, layer) {
     		this.import(this.__D3)
     			.then(() => {
-    				if (typeof layer === "undefined" && d.on) {
-    					layer = d;
-    				}
+    				layer = layer ?? (d.on && d);
     				this._addData(d);
     				this._addLayer(layer);
     				this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
@@ -619,51 +618,44 @@
     			return;
     		}
 
-    		/**
-    		 * Standard GeoJSON --> doesn't handle "time", "heart", …
-    		 */
-    		let geom = d.geometry;
-    		if (geom) {
-    			switch (geom.type) {
-    				case 'LineString':
-    					this._addGeoJSONData(geom.coordinates);
-    					break;
-
-    				case 'MultiLineString':
-    					each(geom.coordinates, coords => this._addGeoJSONData(coords));
-    					break;
-
-    				default:
-    					return console.warn('Unsopperted GeoJSON feature geometry type:' + geom.type);
+    		// Standard GeoJSON
+    		if (d.type === "FeatureCollection" ) {
+    			return each(d.features, feature => this._addData(feature));
+    		} else if (d.type === "Feature") {
+    			let geom = d.geometry;
+    			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 'Point':
+    					default:				return console.warn('Unsopperted GeoJSON feature geometry type:' + geom.type);
+    				}
     			}
     		}
-    		if (d.type === "FeatureCollection") {
-    			each(d.features, feature => this._addData(feature));
-    		}
 
-    		/**
-    		 * Extended GeoJSON --> rely on leaflet implementation
-    		 */
+    		// Fallback for leaflet layers (eg. L.Gpx)
     		if (d._latlngs) {
-    			this._addGeoJSONData(d._latlngs, d.feature && d.feature.properties);
+    			return this._addGeoJSONData(d._latlngs, d.feature && d.feature.properties);
     		}
+
     	},
 
     	/*
     	 * Parsing of GeoJSON data lines and their elevation in z-coordinate
     	 */
-    	_addGeoJSONData: function(coords, properties) {
+    	_addGeoJSONData: function(coords, properties, nestingLevel) {
+
+    		// "coordinateProperties" property is generated inside "@tmcw/toGeoJSON"
+    		let props  = (properties && properties.coordinateProperties) || properties;
+
     		coords.forEach((point, i) => {
 
     			// GARMIN_EXTENSIONS = ["hr", "cad", "atemp", "wtemp", "depth", "course", "bearing"];
     			point.meta = point.meta ?? { time: null, ele: null };
     			
-    			// "coordinateProperties" property is generated inside "@tmcw/toGeoJSON"
-    			let props  = (properties && properties.coordinateProperties) || properties;
-
     			point.prev = (attr) => (attr ? this._data[i > 0 ? i - 1 : 0][attr] : this._data[i > 0 ? i - 1 : 0]);
 
-    			this.fire("elepoint_init", { point: point, props: props, id: i });
+    			this.fire("elepoint_init", { point: point, props: props, id: i, isMulti: nestingLevel });
 
     			this._addPoint(
     				point.lat ?? point[1], 
@@ -703,10 +695,12 @@
     		if (layer && this.options.distanceMarkers && this.options.distanceMarkers.lazy) {
     			layer.on('add remove', ({target, type}) => L.DistanceMarkers && target instanceof L.Polyline && target[type + 'DistanceMarkers']());
     		}
+    		return layer;
     	},
 
     	_addMarker: function(marker) {
     		if (marker) this._markers.addLayer(marker);
+    		return marker;
     	},
 
     	/**
@@ -922,10 +916,6 @@
     				.on('margins_updated', this._resizeChart,    this);
     	
     	
-    			this.fire("elechart_axis");
-    	
-    			if (this.options.legend) this.fire("elechart_legend");
-    	
     			this.fire("elechart_init");
 
     			map
@@ -1038,7 +1028,7 @@
     	 */
     	_loadModules: function(handlers) {
     		// First map known classnames (eg. "Altitude" --> L.Control.Elevation.Altitude)
-    		handlers = handlers.map((h) => typeof h === 'string' && typeof L.Control.Elevation[h] !== "undefined" ? L.Control.Elevation[h] : h);
+    		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(
@@ -1049,8 +1039,8 @@
     			.then((m) => {
     				each(m, (exported) => {
     					let fn = Object.keys(exported)[0];
-    					if (fn && typeof L.Control.Elevation[fn] === "undefined" ) {
-    						handlers[fn] = L.Control.Elevation[fn] = exported[fn];
+    					if (fn && typeof Elevation[fn] === "undefined" ) {
+    						handlers[fn] = Elevation[fn] = exported[fn];
     						
     					}
     				});
@@ -1062,65 +1052,48 @@
     	 * Simple GeoJSON data loader (L.GeoJSON).
     	 */
     	_loadLayer: function(geojson) {
-    		let control = this;
+    		let { polyline, theme, waypoints, wptIcons, wptLabels, distanceMarkers } = this.options;
+    		let style = L.extend({}, polyline);
+
+    		if (theme) {
+    			style.className += ' ' + theme;
+    		}
 
-    		let { wptIcons, wptLabels } = control.options;
+    		if (geojson.name) {
+    			this.track_info.name = geojson.name;
+    		}
 
     		let layer = L.geoJson(geojson, {
-    			distanceMarkers: control.options.distanceMarkers,
-    			style: (feature) => {
-    				let style = L.extend({}, control.options.polyline);
-    				if (control.options.theme) {
-    					style.className += ' ' + control.options.theme;
-    				}
-    				return style;
-    			},
+    			distanceMarkers: distanceMarkers,
+    			style: style,
     			pointToLayer: (feature, latlng) => {
-    				if (!control.options.waypoints) return;
-
-    				let prop   = feature.properties;
-    				let desc   = prop.desc ?? '';
-    				let name   = prop.name ?? '';
-    				let sym    = (prop.sym ?? name).replace(' ', '-').replace('"', '').replace("'", '').toLowerCase();
-
-    				// Handle chart waypoints (dots)
-    				if ([true, 'dots'].includes(control.options.waypoints)) {
-    					control._registerCheckPoint({
-    						latlng: latlng,
-    						label: ([true, 'dots'].includes(wptLabels) ? name : '')
-    					});
-    				}
-
-    				// Handle map waypoints (markers)
-    				if ([true, 'markers'].includes(control.options.waypoints) && wptIcons != false) {
-    					// generate and cache appropriate icon symbol
-    					if (!wptIcons.hasOwnProperty(sym)) {
-    						wptIcons[sym] = L.divIcon(
-    							L.extend({}, wptIcons[""].options, { html: '<i class="elevation-waypoint-icon ' + sym + '"></i>' } )
-    						);
+    				if (waypoints) {
+    					let { desc, name, sym } = feature.properties;
+    					desc = desc || '';
+    					name = name || '';
+    					// Handle chart waypoints (dots)
+    					if ([true, 'dots'].includes(waypoints)) {
+    						this._registerCheckPoint({
+    							latlng: latlng,
+    							label : ([true, 'dots'].includes(wptLabels) ? name : '')
+    						});
     					}
-    					let marker = L.marker(latlng, { icon: wptIcons[sym] });
-    					if ([true, 'markers'].includes(wptLabels) && (name || desc)) {
-    						let content = decodeURI("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : ''));
-    						marker.bindPopup(content, { className: 'elevation-popup', keepInView: true }).openPopup();
-    						marker.bindTooltip(content, { className: 'elevation-tooltip', direction: 'auto', sticky: true, opacity: 1 }).openTooltip();
+    					// Handle map waypoints (markers)
+    					if ([true, 'markers'].includes(waypoints) && wptIcons != false) {
+    						return this._registerMarker({
+    							latlng : latlng,
+    							sym    : (sym ?? name).replace(' ', '-').replace('"', '').replace("'", '').toLowerCase(),
+    							content: [true, 'markers'].includes(wptLabels) && (name || desc) && decodeURI("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : ''))
+    						});
     					}
-    					control._addMarker(marker);
-    					control.fire('waypoint_added', { point: marker, element: latlng, properties: prop });
-    					return marker;
     				}
     			},
-    			onEachFeature: (feature, layer) => {
-    				if (feature.geometry && feature.geometry.type != 'Point') {
-    					control.addData(layer);
-    					control.track_info = L.extend({}, control.track_info, { name: geojson.name });
-    				} 
-    			},
+    			onEachFeature: (feature, layer) => feature.geometry && feature.geometry.type != 'Point' && this.addData(feature, layer),
     		});
 
-    		control.import(control.__D3).then(() => {
-    			control._initMapIntegrations(control, layer);
-    			control._fireEvt("eledata_loaded", { data: geojson, layer: layer, name: control.track_info.name, track_info: control.track_info });
+    		this.import(this.__D3).then(() => {
+    			this._initMapIntegrations(this, layer);
+    			this._fireEvt("eledata_loaded", { data: geojson, layer: layer, name: this.track_info.name, track_info: this.track_info });
     		});
 
     		return layer;
@@ -1250,8 +1223,7 @@
     					geojson = this._parseFromGeoJSONString(data.toString());
     				}
     				if (geojson) {
-    					geojson = this._prepareMultiLineStrings(geojson);
-    					geojson = this._prepareAdditionalProperties(geojson);
+    					geojson.name = geojson.name || (this._downloadURL || '').split('/').pop().split('#')[0].split('?')[0];
     				}
     				resolve(geojson);
     			})
@@ -1279,37 +1251,6 @@
     		return geojson;
     	},
 
-    	/**
-    	 * Extend GeoJSON properties (name, time, ...)
-    	 */
-    	 _prepareAdditionalProperties: function(geojson) {
-    		if (!geojson.name && this._downloadURL) {
-    			geojson.name = this._downloadURL.split('/').pop().split('#')[0].split('?')[0];
-    		}
-    		return geojson;
-    	},
-
-    	/**
-    	 * Just a temporary fix for MultiLineString data (trk > trkseg + trkseg),
-    	 * just split them into seperate LineStrings (trk > trkseg, trk > trkseg)
-    	 * 
-    	 * @link https://github.com/Raruto/leaflet-elevation/issues/56
-    	 */
-    	_prepareMultiLineStrings: function(geojson) {
-    		geojson.features.forEach(feauture => {
-    			if (feauture.geometry.type == "MultiLineString") {
-    				feauture.geometry.coordinates.forEach(coords => {
-    					geojson.features.push({
-    						geometry: { type: 'LineString', coordinates: coords },
-    						properties: feauture.properties,
-    						type: 'Feature'
-    					});
-    				});
-    			} 
-    		});
-    		return geojson.features.filter(feauture => feauture.geometry.type != "MultiLineString");
-    	},
-
     	/**
     	 * Add chart profile to diagram
     	 */
@@ -1427,60 +1368,79 @@
     			return this._registerHandler(props.call(this));
     		}
 
+    		let {
+    			name,
+    			attr,
+    			required,
+    			skipNull,
+    			deltaMax,
+    			clampRange,
+    			decimals,
+    			meta,
+    			unit,
+    			coordinateProperties,
+    			coordPropsToMeta: coordPropsToMeta$1,
+    			pointToAttr,
+    			onPointAdded,
+    			stats,
+    			statsName,
+    			grid,
+    			scale,
+    			path,
+    			tooltip,
+    			summary
+    		} = props;
+
     		// eg. "altitude" == true
-    		if (this.options[props.name] || props.required) {
+    		if (this.options[name] || required) {
 
     			this._registerDataAttribute({
-    				name: props.name,
-    				attr: props.attr,
-    				skipNull: props.skipNull,
-    				deltaMax: props.deltaMax,
-    				clampRange: props.clampRange,
-    				decimals: props.decimals,
-    				coordPropsToMeta: coordPropsToMeta(props.coordinateProperties, props.meta || props.name, props.coordPropsToMeta),
-    				pointToAttr: props.pointToAttr,
-    				onPointAdded: props.onPointAdded,
-    				stats: props.stats,
-    				statsName: props.statsName,
+    				name,
+    				attr,
+    				skipNull,
+    				deltaMax,
+    				clampRange,
+    				decimals,
+    				coordPropsToMeta: coordPropsToMeta(coordinateProperties, meta || name, coordPropsToMeta$1),
+    				pointToAttr,
+    				onPointAdded,
+    				stats,
+    				statsName,
     			});
 
-    			if (props.grid) {
-    				props.grid.name = props.grid.name || props.name;
-    				this._registerAxisGrid(props.grid);
+    			if (grid) {
+    				this._registerAxisGrid(L.extend({ name }, grid));
     			}
 
-    			if (this.options[props.name] !== "summary") {
-    				if (props.scale) {
-    					props.scale.name = props.scale.name || props.name;
-    					props.scale.label = props.scale.label || props.unit;
-    					this._registerAxisScale(props.scale);
-    				}
-    				if (props.path) {
-    					props.path.name = props.path.name || props.name;
-    					this._registerAreaPath(props.path);
-    				}
+    			if (this.options[name] !== "summary") {
+    				if (scale) this._registerAxisScale(L.extend({ name, label: unit }, scale));
+    				if (path)  this._registerAreaPath(L.extend({ name }, path));
     			}
 
-    			if (props.tooltips) {
-    				each(props.tooltips, t => {
-    					if (t) {
-    						t.name = t.name || props.name;
-    						this._registerTooltip(t);
-    					}
-    				});
-    			} else if (props.tooltip) {
-    				props.tooltip.name = props.tooltip.name || props.name;
-    				this._registerTooltip(props.tooltip);
+    			if (tooltip || props.tooltips) {
+    				each([tooltip, ...(props.tooltips || [])], t => t && this._registerTooltip(L.extend({ name }, t)));
     			}
 
-    			if (props.summary) {
-    				for (const key in props.summary) {
-    					props.summary[key].unit = props.summary[key].unit || props.unit;
-    				}
-    				this._registerSummary(props.summary);
+    			if (summary) {
+    				each(summary, (s, k) => summary[k] = L.extend({ unit }, s));
+    				this._registerSummary(summary);
     			}
     		}
     	},
+
+    	_registerMarker({latlng, sym, content}) {
+    		let { wptIcons } = this.options;
+    		// generate and cache appropriate icon symbol
+    		if (!wptIcons.hasOwnProperty(sym)) {
+    			wptIcons[sym] = L.divIcon(L.extend({}, wptIcons[""].options, { html: '<i class="elevation-waypoint-icon ' + sym + '"></i>' } ));
+    		}
+    		let marker = L.marker(latlng, { icon: wptIcons[sym] });
+    		if (content) {
+    			marker.bindPopup(content, { className: 'elevation-popup', keepInView: true }).openPopup();
+    			marker.bindTooltip(content, { className: 'elevation-tooltip', direction: 'auto', sticky: true, opacity: 1 }).openTooltip();
+    		}
+    		return this._addMarker(marker)
+    	},
     	
     	/**
     	 * Add chart or marker tooltip info
@@ -1563,7 +1523,6 @@
     	_updateChart: function() {
     		if (this._chart && this._container) {
     			this.fire("elechart_axis");
-    			this.fire("elechart_area");
     	
     			this._chart.update({ data: this._data, options: this.options });
     	
@@ -1611,27 +1570,27 @@
     	 * Update chart summary.
     	 */
     	_updateSummary: function() {
-    		if (!this._summary) return;
-
-    		this._summary.reset();
-
-    		if (this.options.summary) {
-    			this.fire("elechart_summary");
-    			this._summary.update();
+    		if (this._summary) {
+    			this._summary.reset();
+    			if (this.options.summary) {
+    				this.fire("elechart_summary");
+    				this._summary.update();
+    			}
+    			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();
+    					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 }));
+    					} else if (this.options.downloadLink == 'link' || this.options.downloadLink === true) {
+    						event.confirm();
+    					}
+    					this.fire('eletrack_download', event);
+    				};
+    			}
     		}
-    		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();
-    				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 }));
-    				} else if (this.options.downloadLink == 'link' || this.options.downloadLink === true) {
-    					event.confirm();
-    				}
-    				this.fire('eletrack_download', event);
-    			};
-    		}	},
+    	},
 
 
     	/**