@raruto/leaflet-elevation 1.8.5 → 1.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@raruto/leaflet-elevation",
-	"version": "1.8.5",
+	"version": "1.8.8",
 	"description": "A Leaflet plugin that allows to add elevation profiles using d3js",
 	"main": "dist/leaflet-elevation.min.js",
 	"module": "src/index.js",

package/src/components.js

@@ -496,8 +496,8 @@ export const Chart = ({
 	const panes = {
 		grid   : g.append("g").attr("class", "grid"),
 		area   : g.append('g').attr("class", "area"),
-		point  : g.append('g').attr("class", "point"),
 		axis   : g.append('g').attr("class", "axis"),
+		point  : g.append('g').attr("class", "point"),
 		brush  : g.append("g").attr("class", "brush"),
 		tooltip: g.append("g").attr("class", "tooltip").attr('display', 'none'),
 		ruler  : g.append('g').attr('class', 'ruler'),

package/src/control.js

@@ -14,10 +14,10 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__mileFactor: 0.621371,
 	__footFactor: 3.28084,
 	__D3:          'https://unpkg.com/d3@6.5.0/dist/d3.min.js',
-	__TOGEOJSON:   'https://unpkg.com/@tmcw/togeojson@4.3.0/dist/togeojson.umd.js',
+	__TOGEOJSON:   'https://unpkg.com/@tmcw/togeojson@4.5.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',
-	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.8.5/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.8.8/libs/leaflet-distance-marker.min.js',
 
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -304,6 +304,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			return;
 		}
 
+		/**
+		 * Standard GeoJSON --> doesn't handle "time", "heart", …
+		 */
 		let geom = d.geometry;
 		if (geom) {
 			switch (geom.type) {
@@ -319,35 +322,47 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 					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
+		 */
 		if (d._latlngs) {
-			this._addGPXData(d._latlngs);
+			this._addGeoJSONData(d._latlngs, d.feature && d.feature.properties);
 		}
 	},
 
 	/*
 	 * Parsing of GeoJSON data lines and their elevation in z-coordinate
 	 */
-	_addGeoJSONData: function(coords) {
-		_.each(coords, point => {
-			this._addPoint(point[1], point[0], point[2]);
-			this._fireEvt("elepoint_added", { point: point, index: this._data.length - 1 });
-		});
-		this._fireEvt("eletrack_added", { coords: coords, index: this._data.length - 1 });
-	},
+	_addGeoJSONData: function(coords, properties) {
+		coords.forEach((point, i) => {
+
+			// Inspired by L.GPX layer properties
+			point.meta = point.meta ?? { time: null, ele: null, hr: null, cad: null, atemp: null };
+			
+			// "alt" property is generated inside "leaflet"
+			if ("alt" in point) point.meta.ele = point.alt;
+			
+			// "coordinateProperties" property is generated inside "@tmcw/toGeoJSON"
+			if (properties.coordinateProperties) {
+				let props = properties.coordinateProperties;
+				if("times" in props) point.meta.time = new Date(Date.parse(props.times[i]));
+				if("heart" in props) point.meta.hr = parseInt(props.heart[i]);
+				// TODO: ask to "@tmcw/toGeoJSON" for "cadence" and "temperature" implementation
+			}
+
+			this._addPoint(
+				point.lat ?? point[1], 
+				point.lng ?? point[0],
+				point.alt ?? point.meta.ele ?? point[2]
+			);
 
-	/*
-	 * Parsing function for GPX data and their elevation in z-coordinate
-	 */
-	_addGPXData: function(coords) {
-		_.each(coords, point => {
-			this._addPoint(point.lat, point.lng, point.alt ?? point.meta.ele);
 			this._fireEvt("elepoint_added", { point: point, index: this._data.length - 1 });
 		});
+
 		this._fireEvt("eletrack_added", { coords: coords, index: this._data.length - 1 });
 	},
 
@@ -392,6 +407,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		}
 	},
 
+	/**
+	 * Initialize "L.AlmostOver" integration
+	 */
 	_initAlmostOverHandler: function(map, layer) {
 		if(!map || !this.options.almostOver) return;
 		this.lazyLoad(this.__LGEOMUTIL)
@@ -407,6 +425,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			});
 	},
 
+	/**
+	 * Initialize "L.DistanceMarkers" integration
+	 */
 	_initDistanceMarkers: function(map, layer) {
 		if (!map) return;
 		if (this.options.distanceMarkers) {
@@ -433,6 +454,24 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		return this.eleDiv = eleDiv;
 	},
 
+	/**
+	 * Initialize "L.AlmostOver" and "L.DistanceMarkers"
+	 */
+	_initMapIntegrations: function(control, layer) {
+		let map   = control._map;
+		if (control._map) {
+			map.once('layeradd', (e) => control.options.autofitBounds && control.fitBounds(layer.getBounds()));
+			if (!L.Browser.mobile) {
+				control._initAlmostOverHandler(map, layer);
+				control._initDistanceMarkers(map, layer);
+			} else if (control.options.polyline) {
+				layer.addTo(map);
+			}
+		} else {
+			console.warn("Undefined elevation map object");;
+		}
+	},
+
 	/*
 	 * Collapse current chart control.
 	 */
@@ -663,9 +702,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			.then((response) => response.text())
 			.then((data)     => {
 				this._downloadURL = url; // TODO: handle multiple urls?
-				this.load(data);
-			})
-			.catch((err) => console.warn(err));
+				this._parseFromString(data)
+					.then( geojson => geojson && this._loadLayer(geojson));
+			}).catch((err) => console.warn(err));
 	},
 
 	/**
@@ -720,46 +759,15 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 				}
 			},
 			onEachFeature: (feature, layer) => {
-				if (feature.geometry && feature.geometry.type == 'Point') return;
-
-				// Standard GeoJSON --> doesn't handle "time"
-				// control.addData(feature, layer);  // NB make use of "_addGeoJSONData"
-				
-				// Extended GeoJSON --> rely on leaflet implementation
-				layer._latlngs.forEach((point, i) => {
-					// same properties as L.GPX layer
-					point.meta = { time: null, ele: null, hr: null, cad: null, atemp: null };
-					if("alt" in point) point.meta.ele = point.alt;
-					if(feature.properties) {
-						let prop = feature.properties;
-						if("coordTimes" in prop) point.meta.time = new Date(Date.parse(prop.coordTimes[i]));
-						else if("times" in prop) point.meta.time = new Date(Date.parse(prop.times[i]));
-						else if("time" in prop) point.meta.time = new Date(Date.parse((typeof prop.time === 'object' ? prop.time[i] : prop.time)));
-						if("heartRates" in prop) point.meta.hr = parseInt(prop.heartRates[i]);
-						else if("heartRate" in prop) point.meta.hr = parseInt((typeof prop.heartRate === 'object' ? prop.heartRate[i] : prop.heartRate));
-						// TODO: cadence, temperature
-					}
-				});
-				control.addData(layer); // NB make use of "_addGPXData"
-
-				control.track_info = L.extend({}, control.track_info, { name: geojson.name });
+				if (feature.geometry && feature.geometry.type != 'Point') {
+					control.addData(layer);
+					control.track_info = L.extend({}, control.track_info, { name: geojson.name });
+				} 
 			},
 		});
 
 		control.lazyLoad(control.__D3).then(() => {
-			let map   = control._map;
-			if (map) {
-				map.once('layeradd', (e) => control.options.autofitBounds && control.fitBounds(layer.getBounds()));
-				if (!L.Browser.mobile) {
-					control._initAlmostOverHandler(map, layer);
-					control._initDistanceMarkers(map, layer);
-				} else if (control.options.polyline) {
-					layer.addTo(map);
-				}
-			} else {
-				console.warn("Undefined elevation map object");;
-			}
-
+			control._initMapIntegrations(control, layer);
 			control._fireEvt("eledata_loaded", { data: geojson, layer: layer, name: control.track_info.name, track_info: control.track_info })
 		});
 
@@ -881,15 +889,15 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		if (!(type in toGeoJSON)) {
 			type = xml.documentElement.tagName == "TrainingCenterDatabase" ? 'tcx' : 'gpx';
 		}
-		let geojson = toGeoJSON[type](xml);
-		geojson.name = name.length > 0 ? Array.from(name).find(tag => tag.parentElement.tagName == "trk").textContent : '';
+		let geojson  = toGeoJSON[type](xml);
+		geojson.name = name.length > 0 ? (Array.from(name).find(tag => tag.parentElement.tagName == "trk") ?? name[0]).textContent : '';
 		return geojson;
 	},
 
 	/**
 	 * Extend GeoJSON properties (name, time, ...)
 	 */
-	 _prepareAdditionalProperties: function(geojson){
+	 _prepareAdditionalProperties: function(geojson) {
 		if (!geojson.name && this._downloadURL) {
 			geojson.name = this._downloadURL.split('/').pop().split('#')[0].split('?')[0];
 		}
@@ -948,7 +956,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	/**
 	 * Add chart or marker tooltip info
 	 */
-	 _registerTooltip: function(props) {
+	_registerTooltip: function(props) {
 		if (props.chart) {
 			let label = L.extend({}, props, { value: props.chart });
 			this.on("elechart_init",   () => this._chart._registerTooltip(label));
@@ -1055,16 +1063,12 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Toggle chart data on legend click
 	 */
 	_toggleChartHandler: function(e) {
-		let { path, name, enabled } = e;
+		let { name, enabled } = e;
 
 		this._chartEnabled = this._chart._hasActiveLayers();
 
 		// toggle layer visibility on empty chart
-		this._layers.eachLayer(layer => {
-			let node = layer.getElement && layer.getElement();
-			_.toggleClass(node, this.options.polyline.className + ' ' + this.options.theme, this._chartEnabled);
-			}
-		);
+		this._layers.eachLayer(layer => _.toggleClass(layer.getElement && layer.getElement(), this.options.polyline.className + ' ' + this.options.theme, this._chartEnabled));
 
 		// toggle option value (eg. altitude = { 'disabled' || 'disabled' })
 		this.options[name] = !enabled && this.options[name] == 'disabled' ? 'enabled' : 'disabled';

package/src/index.js

@@ -63,14 +63,16 @@ Elevation.Chart = Chart;
 
 // Alias deprecated functions
  Elevation.addInitHook(function() {
-	this.enableDragging  = this.enableBrush;
-	this.disableDragging = this.disableBrush;
-	this.loadChart       = this.addTo;
-	this.loadData        = this.load;
-	this.loadGPX         = this.load;
-	this.loadGeoJSON     = this.load;
-	this.loadXML         = this.load;
-	this.loadFile        = this.load;
+	this.enableDragging      = this.enableBrush;
+	this.disableDragging     = this.disableBrush;
+	this.loadChart           = this.addTo;
+	this.loadData            = this.load;
+	this.loadGPX             = this.load;
+	this.loadGeoJSON         = this.load;
+	this.loadXML             = this.load;
+	this.loadFile            = this.load;
+	this._addGPXData         = this._addGeoJSONData;
+	this._registerFocusLabel = this._registerTooltip;
 });
 
 L.control.elevation = (options) => new Elevation(options);

package/libs/extended-ui.js

@@ -1,107 +0,0 @@
-/*
- * Copyright (c) 2020, GPL-3.0+ Project, Gérald Niel, Raruto
- *
- *  This file is free software: you may copy, redistribute and/or modify it
- *  under the terms of the GNU General Public License as published by the
- *  Free Software Foundation, either version 2 of the License, or (at your
- *  option) any later version.
- *
- *  This file is distributed in the hope that it will be useful, but
- *  WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- *  General Public License for more details.
- *
- *  You should have received a copy of the GNU General Public License
- *  along with this program.  If not, see .
- */
-
-L.Control.Elevation.addInitHook(function() {
-
-	this.on("eledata_updated", function(e) {
-		let data = this._data;
-		let i = e.index;
-		let z = data[i].z;
-
-		let curr = data[i].latlng;
-		let prev = i > 0 ? data[i - 1].latlng : curr;
-
-		let delta = curr.distanceTo(prev) * this._distanceFactor;
-
-		// Slope / Gain
-		let tAsc = this._tAsc || 0; // Total Ascent
-		let tDes = this._tDes || 0; // Total Descent
-		let sMax = this._sMax || 0; // Slope Max
-		let sMin = this._sMin || 0; // Slope Min
-		let diff = 0;
-		let slope = 0;
-
-		if (!isNaN(z)) {
-			// diff height between actual and previous point
-			diff = i > 0 ? z - data[i - 1].z : 0;
-			if (diff > 0) tAsc += diff;
-			if (diff < 0) tDes -= diff;
-			// slope in % = ( height / length ) * 100
-			slope = delta !== 0 ? Math.round((diff / delta) * 10000) / 100 : 0;
-			// apply slope to the previous point because we will
-			// ascent or desent, so the slope is in the fist point
-			if (i > 0) data[i - 1].slope = slope;
-			sMax = slope > sMax ? slope : sMax;
-			sMin = slope < sMin ? slope : sMin;
-		}
-
-		data[i].slope = slope;
-
-		this.track_info = this.track_info || {};
-		this.track_info.ascent = this._tAsc = tAsc;
-		this.track_info.descent = this._tDes = tDes;
-		this.track_info.slope_max = this._sMax = sMax;
-		this.track_info.slope_min = this._sMin = sMin;
-	});
-
-	if (!this.options.extendedUI) return;
-
-	this.on("elechart_change", function(e) {
-		let item = e.data;
-		let xCoordinate = e.xCoord;
-
-		if (!this._focuslabelSlope || !this._focuslabelSlope.property('isConnected')) {
-			this._focuslabelSlope = this._focuslabeltext.insert("svg:tspan", ".mouse-focus-label-x")
-				.attr("class", "mouse-focus-label-slope")
-				.attr("dy", "1.5em");
-		}
-
-		this._focuslabelSlope.text(item.slope + "%");
-
-		if (!this._mouseSlopeFocusLabel) {
-			this._mouseSlopeFocusLabel = this._mouseHeightFocusLabel.append("svg:tspan")
-				.attr("class", "height-focus-slope ");
-		}
-
-		this._mouseHeightFocusLabelY
-			.attr("dy", "-1.5em");
-		this._focuslabelX
-			.attr("dy", "1.5em");
-
-		this._mouseSlopeFocusLabel
-			.attr("dy", "1.5em")
-			.text(Math.round(item.slope) + "%");
-
-	});
-
-	this.on("elechart_summary", function() {
-		this.summaryDiv.querySelector('.minele').insertAdjacentHTML('afterend', '<span class="ascent"><span class="summarylabel">' + L._("Total Ascent: ") + '</span><span class="summaryvalue">' + Math.round(this.track_info.ascent) + '&nbsp;' +
-			this._yLabel +
-			'</span></span>' + '<span class="descent"><span class="summarylabel">' + L._("Total Descent: ") + '</span><span class="summaryvalue">' + Math.round(this.track_info.descent) + '&nbsp;' + this._yLabel +
-			'</span></span>' + '<span class="minslope"><span class="summarylabel">' + L._("Min Slope: ") + '</span><span class="summaryvalue">' + this.track_info.slope_min + '&nbsp;' + '%' +
-			'</span></span>' + '<span class="maxslope"><span class="summarylabel">' + L._("Max Slope: ") + '</span><span class="summaryvalue">' + this.track_info.slope_max + '&nbsp;' + '%' +
-			'</span></span>');
-	});
-
-	this.on("eledata_clear", function() {
-		this._sMax = null;
-		this._sMin = null;
-		this._tAsc = null;
-		this._tDes = null;
-	});
-
-});

package/libs/extended-ui.min.js

@@ -1,5 +0,0 @@
-'use strict';L.Control.Elevation.addInitHook(function(){this.on("eledata_updated",function(e){let data=this._data;let i=e.index;let z=data[i].z;let curr=data[i].latlng;let prev=i>0?data[i-1].latlng:curr;let delta=curr.distanceTo(prev)*this._distanceFactor;let tAsc=this._tAsc||0;let tDes=this._tDes||0;let sMax=this._sMax||0;let sMin=this._sMin||0;let diff=0;let slope=0;if(!isNaN(z)){diff=i>0?z-data[i-1].z:0;if(diff>0)tAsc+=diff;if(diff<0)tDes-=diff;slope=delta!==0?Math.round(diff/delta*1E4)/100:0;
-if(i>0)data[i-1].slope=slope;sMax=slope>sMax?slope:sMax;sMin=slope<sMin?slope:sMin}data[i].slope=slope;this.track_info=this.track_info||{};this.track_info.ascent=this._tAsc=tAsc;this.track_info.descent=this._tDes=tDes;this.track_info.slope_max=this._sMax=sMax;this.track_info.slope_min=this._sMin=sMin});if(!this.options.extendedUI)return;this.on("elechart_change",function(e){let item=e.data;let xCoordinate=e.xCoord;if(!this._focuslabelSlope||!this._focuslabelSlope.property("isConnected"))this._focuslabelSlope=
-this._focuslabeltext.insert("svg:tspan",".mouse-focus-label-x").attr("class","mouse-focus-label-slope").attr("dy","1.5em");this._focuslabelSlope.text(item.slope+"%");if(!this._mouseSlopeFocusLabel)this._mouseSlopeFocusLabel=this._mouseHeightFocusLabel.append("svg:tspan").attr("class","height-focus-slope ");this._mouseHeightFocusLabelY.attr("dy","-1.5em");this._focuslabelX.attr("dy","1.5em");this._mouseSlopeFocusLabel.attr("dy","1.5em").text(Math.round(item.slope)+"%")});this.on("elechart_summary",
-function(){this.summaryDiv.querySelector(".minele").insertAdjacentHTML("afterend",'<span class="ascent"><span class="summarylabel">'+L._("Total Ascent: ")+'</span><span class="summaryvalue">'+Math.round(this.track_info.ascent)+"&nbsp;"+this._yLabel+"</span></span>"+'<span class="descent"><span class="summarylabel">'+L._("Total Descent: ")+'</span><span class="summaryvalue">'+Math.round(this.track_info.descent)+"&nbsp;"+this._yLabel+"</span></span>"+'<span class="minslope"><span class="summarylabel">'+
-L._("Min Slope: ")+'</span><span class="summaryvalue">'+this.track_info.slope_min+"&nbsp;"+"%"+"</span></span>"+'<span class="maxslope"><span class="summarylabel">'+L._("Max Slope: ")+'</span><span class="summaryvalue">'+this.track_info.slope_max+"&nbsp;"+"%"+"</span></span>")});this.on("eledata_clear",function(){this._sMax=null;this._sMin=null;this._tAsc=null;this._tDes=null})});