@raruto/leaflet-elevation 2.0.1 → 2.0.2

package/libs/leaflet-distance-marker.js

@@ -143,102 +143,107 @@ L.DistanceMarkers = L.LayerGroup.extend({
 		// Get line coords as an array
 		let coords = typeof line.getLatLngs == 'function' ? line.getLatLngs() : line;
 
-		// Get accumulated line lengths as well as overall length
-		let accumulated = L.GeometryUtil.accumulatedLengths(line);
-		let length = accumulated.length > 0 ? accumulated[accumulated.length - 1] : 0;
-
-		// count = Number of distance markers to be added
-		// j = Position in accumulated line length array
-		for (let i = 1, count = Math.floor(length / options.offset), j = 0; i <= count; ++i) {
-
-			let distance = options.offset * i;
-
-			// Find the first accumulated distance that is greater than the distance of this marker
-			while (j < accumulated.length - 1 && accumulated[j] < distance) ++j;
-
-			// Grab two nearest points either side marker position
-			let p1 = coords[j - 1];
-			let p2 = coords[j];
-			let m_line = L.polyline([p1, p2]);
-
-			// and create a simple line to interpolate on
-			let ratio = (distance - accumulated[j - 1]) / (accumulated[j] - accumulated[j - 1]);
-			let position = L.GeometryUtil.interpolateOnLine(map, m_line, ratio);
-			let delta = map.project(p2).subtract(map.project(p1));
-			let angle = Math.atan2(delta.y, delta.x);
-
-			// Generate distance marker label
-			let text = options.textFunction.call(this, distance, i, options.offset);
-
-			// Grouping layer of visible layers at zoom level (arrow + distance)
-			let zoom = this._minimumZoomLevelForItem(i, showAll);
-			let markers = this._zoomLayers[zoom] = this._zoomLayers[zoom] || L.layerGroup()
-
-			// create arrow markers
-			if (options.direction && ((options.distance && i % 2 == 1) || !options.distance)) {
-				if (preferCanvas) {
-					markers.addLayer(
-						new L.DistanceMarker(p1, {
-							radius: 0,
-							icon: {
-								url: options.arrowUrl,   //image link
-								size: options.arrowSize, //image size ( default [40, 40] )
-								rotate: 0,               //image base rotate ( default 0 )
-								offset: { x: 0, y: 0 },  //image offset ( default { x: 0, y: 0 } )
-							},
-							rotation: angle,
-							interactive: false,
-							// label: '⮞', //'➜',
-							// font: 'normal 20pt "Helvetica Neue", Arial, Helvetica, sans-serif',
-							// fillStyle: 'white',//'#3366CC',
-							// strokeStyle: 'black',
-						})
-					);
-				} else {
-					markers.addLayer(
-						L.marker(position.latLng, {
-							icon: L.icon({
-								iconUrl: options.arrowUrl,
-								iconSize: options.arrowSize,
-							}),
-							// NB the following option is added by "leaflet-rotate"
-							rotation: angle * L.DomUtil.RAD_TO_DEG,
-							interactive: false,
-						})
-					);
+		// Handle "MultiLineString" features
+		coords = L.LineUtil.isFlat(coords) ? [coords] : coords;
+
+		coords.forEach(latlngs => {
+			// Get accumulated line lengths as well as overall length
+			let accumulated = L.GeometryUtil.accumulatedLengths(latlngs);
+			let length = accumulated.length > 0 ? accumulated[accumulated.length - 1] : 0;
+
+			// count = Number of distance markers to be added
+			// j = Position in accumulated line length array
+			for (let i = 1, count = Math.floor(length / options.offset), j = 0; i <= count; ++i) {
+
+				let distance = options.offset * i;
+
+				// Find the first accumulated distance that is greater than the distance of this marker
+				while (j < accumulated.length - 1 && accumulated[j] < distance) ++j;
+
+				// Grab two nearest points either side marker position
+				let p1 = latlngs[j - 1];
+				let p2 = latlngs[j];
+				let m_line = L.polyline([p1, p2]);
+
+				// and create a simple line to interpolate on
+				let ratio = (distance - accumulated[j - 1]) / (accumulated[j] - accumulated[j - 1]);
+				let position = L.GeometryUtil.interpolateOnLine(map, m_line, ratio);
+				let delta = map.project(p2).subtract(map.project(p1));
+				let angle = Math.atan2(delta.y, delta.x);
+
+				// Generate distance marker label
+				let text = options.textFunction.call(this, distance, i, options.offset);
+
+				// Grouping layer of visible layers at zoom level (arrow + distance)
+				let zoom = this._minimumZoomLevelForItem(i, showAll);
+				let markers = this._zoomLayers[zoom] = this._zoomLayers[zoom] || L.layerGroup()
+
+				// create arrow markers
+				if (options.direction && ((options.distance && i % 2 == 1) || !options.distance)) {
+					if (preferCanvas) {
+						markers.addLayer(
+							new L.DistanceMarker(p1, {
+								radius: 0,
+								icon: {
+									url: options.arrowUrl,   //image link
+									size: options.arrowSize, //image size ( default [40, 40] )
+									rotate: 0,               //image base rotate ( default 0 )
+									offset: { x: 0, y: 0 },  //image offset ( default { x: 0, y: 0 } )
+								},
+								rotation: angle,
+								interactive: false,
+								// label: '⮞', //'➜',
+								// font: 'normal 20pt "Helvetica Neue", Arial, Helvetica, sans-serif',
+								// fillStyle: 'white',//'#3366CC',
+								// strokeStyle: 'black',
+							})
+						);
+					} else {
+						markers.addLayer(
+							L.marker(position.latLng, {
+								icon: L.icon({
+									iconUrl: options.arrowUrl,
+									iconSize: options.arrowSize,
+								}),
+								// NB the following option is added by "leaflet-rotate"
+								rotation: angle * L.DomUtil.RAD_TO_DEG,
+								interactive: false,
+							})
+						);
+					}
 				}
-			}
 
-			// create distance markers
-			if (options.distance && i % 2 == 0) {
-				if (preferCanvas) {
-					markers.addLayer(
-						new L.DistanceMarker(position.latLng, {
-							label: text, // TODO: handle text rotation (leaflet-rotate)
-							radius: 7,
-							fillColor: '#fff',
-							fillOpacity: 1,
-							fillStyle: 'black',
-							color: '#777',
-							weight: 1,
-							interactive: false,
-						})
-					);
-				} else {
-					markers.addLayer(
-						L.marker(position.latLng, {
-							title: text,
-							icon: L.divIcon({
-								className: options.cssClass,
-								html: text,
-								iconSize: options.iconSize
-							}),
-							interactive: false,
-						})
-					);
+				// create distance markers
+				if (options.distance && i % 2 == 0) {
+					if (preferCanvas) {
+						markers.addLayer(
+							new L.DistanceMarker(position.latLng, {
+								label: text, // TODO: handle text rotation (leaflet-rotate)
+								radius: 7,
+								fillColor: '#fff',
+								fillOpacity: 1,
+								fillStyle: 'black',
+								color: '#777',
+								weight: 1,
+								interactive: false,
+							})
+						);
+					} else {
+						markers.addLayer(
+							L.marker(position.latLng, {
+								title: text,
+								icon: L.divIcon({
+									className: options.cssClass,
+									html: text,
+									iconSize: options.iconSize
+								}),
+								interactive: false,
+							})
+						);
+					}
 				}
 			}
-		}
+		});
 
 		const updateMarkerVisibility = () => {
 			let oldZoom = this._lastZoomLevel || 0;

package/libs/leaflet-distance-marker.min.js

@@ -1 +1 @@
-L.DistanceMarker=L.CircleMarker.extend({_updatePath:function(){let ctx=this._renderer._ctx,p=this._point;if(this.options.rotation=this.options.rotation||0,this.options.radius&&this._renderer._updateCircle&&this._renderer._updateCircle(this),this.options.icon&&this.options.icon.url)if(this.options.icon.element){const icon=this.options.icon;let cx=p.x+icon.offset.x,cy=p.y+icon.offset.y;ctx.save(),icon.rotate&&(ctx.translate(p.x,p.y),ctx.rotate(icon.rotate),cx=0,cy=0),ctx.drawImage(icon.element,cx-icon.size[0]/2,cy-icon.size[1]/2,icon.size[0],icon.size[1]),ctx.restore()}else{const icon=document.createElement("img");this.options.icon=L.extend({rotate:0,size:[40,40],offset:{x:0,y:0}},this.options.icon),this.options.icon.rotate+=this.options.rotation,this.options.icon.element=icon,icon.src=this.options.icon.url,icon.onload=()=>this.redraw(),icon.onerror=()=>this.options.icon=null}if(this.options.label){let cx=p.x,cy=p.y;ctx.save(),ctx.font=this.options.font||'normal 7pt "Helvetica Neue", Arial, Helvetica, sans-serif',ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillStyle=this.options.fillStyle||"black",this.options.rotation&&(ctx.translate(p.x,p.y),ctx.rotate(this.options.rotation),cx=0,cy=0),this._map.getZoom()>17&&(ctx.fillStyle=this.options.strokeStyle||"black"),ctx.fillText(this.options.label,cx,cy),this.options.strokeStyle&&this._map.getZoom()<=17&&(ctx.strokeStyle=this.options.strokeStyle,ctx.strokeText(this.options.label,cx,cy)),ctx.restore()}}}),L.DistanceMarkers=L.LayerGroup.extend({options:{cssClass:"dist-marker",iconSize:[12,12],arrowSize:[10,10],arrowUrl:"data:image/svg+xml,%3Csvg transform='rotate(90)' xmlns='http://www.w3.org/2000/svg' width='560px' height='560px' viewBox='0 0 560 560'%3E%3Cpath stroke-width='35' fill='%23000' stroke='%23FFF' d='M280,40L522,525L280,420L38,525z'/%3E%3C/svg%3E",offset:1e3,showAll:12,textFunction:(distance,i,offset)=>i,distance:!0,direction:!0},initialize:function(line,map,options){this._layers={},this._zoomLayers={},options=L.setOptions(this,options);let preferCanvas=map.options.preferCanvas,showAll=Math.min(map.getMaxZoom(),options.showAll);preferCanvas||map.options.rotate||console.warn('Missing dependency: "leaflet-rotate"');let coords="function"==typeof line.getLatLngs?line.getLatLngs():line,accumulated=L.GeometryUtil.accumulatedLengths(line),length=accumulated.length>0?accumulated[accumulated.length-1]:0;for(let i=1,count=Math.floor(length/options.offset),j=0;i<=count;++i){let distance=options.offset*i;for(;j<accumulated.length-1&&accumulated[j]<distance;)++j;let p1=coords[j-1],p2=coords[j],m_line=L.polyline([p1,p2]),ratio=(distance-accumulated[j-1])/(accumulated[j]-accumulated[j-1]),position=L.GeometryUtil.interpolateOnLine(map,m_line,ratio),delta=map.project(p2).subtract(map.project(p1)),angle=Math.atan2(delta.y,delta.x),text=options.textFunction.call(this,distance,i,options.offset),zoom=this._minimumZoomLevelForItem(i,showAll),markers=this._zoomLayers[zoom]=this._zoomLayers[zoom]||L.layerGroup();options.direction&&(options.distance&&i%2==1||!options.distance)&&(preferCanvas?markers.addLayer(new L.DistanceMarker(p1,{radius:0,icon:{url:options.arrowUrl,size:options.arrowSize,rotate:0,offset:{x:0,y:0}},rotation:angle,interactive:!1})):markers.addLayer(L.marker(position.latLng,{icon:L.icon({iconUrl:options.arrowUrl,iconSize:options.arrowSize}),rotation:angle*L.DomUtil.RAD_TO_DEG,interactive:!1}))),options.distance&&i%2==0&&(preferCanvas?markers.addLayer(new L.DistanceMarker(position.latLng,{label:text,radius:7,fillColor:"#fff",fillOpacity:1,fillStyle:"black",color:"#777",weight:1,interactive:!1})):markers.addLayer(L.marker(position.latLng,{title:text,icon:L.divIcon({className:options.cssClass,html:text,iconSize:options.iconSize}),interactive:!1})))}const updateMarkerVisibility=()=>{let oldZoom=this._lastZoomLevel||0,newZoom=map.getZoom();if(newZoom>oldZoom)for(let i=oldZoom+1;i<=newZoom;++i)void 0!==this._zoomLayers[i]&&this.addLayer(this._zoomLayers[i]);else if(newZoom<oldZoom)for(let i=oldZoom;i>newZoom;--i)void 0!==this._zoomLayers[i]&&this.removeLayer(this._zoomLayers[i]);this._lastZoomLevel=newZoom};map.on("zoomend",updateMarkerVisibility),updateMarkerVisibility()},_minimumZoomLevelForItem:function(i,zoom){for(;i>0&&i%2==0;)--zoom,i=Math.floor(i/2);return zoom}}),L.Polyline.include({_originalOnAdd:L.Polyline.prototype.onAdd,_originalOnRemove:L.Polyline.prototype.onRemove,addDistanceMarkers:function(){this._map&&this._distanceMarkers&&this._map.addLayer(this._distanceMarkers)},removeDistanceMarkers:function(){this._map&&this._distanceMarkers&&this._map.removeLayer(this._distanceMarkers)},onAdd:function(map){this._originalOnAdd(map);let opts=this.options.distanceMarkers||{};this.options.distanceMarkers&&(this._distanceMarkers=this._distanceMarkers||new L.DistanceMarkers(this,map,opts)),void 0!==opts.lazy&&!1!==opts.lazy||this.addDistanceMarkers()},onRemove:function(map){this.removeDistanceMarkers(),this._originalOnRemove(map)}});
+L.DistanceMarker=L.CircleMarker.extend({_updatePath:function(){let ctx=this._renderer._ctx,p=this._point;if(this.options.rotation=this.options.rotation||0,this.options.radius&&this._renderer._updateCircle&&this._renderer._updateCircle(this),this.options.icon&&this.options.icon.url)if(this.options.icon.element){const icon=this.options.icon;let cx=p.x+icon.offset.x,cy=p.y+icon.offset.y;ctx.save(),icon.rotate&&(ctx.translate(p.x,p.y),ctx.rotate(icon.rotate),cx=0,cy=0),ctx.drawImage(icon.element,cx-icon.size[0]/2,cy-icon.size[1]/2,icon.size[0],icon.size[1]),ctx.restore()}else{const icon=document.createElement("img");this.options.icon=L.extend({rotate:0,size:[40,40],offset:{x:0,y:0}},this.options.icon),this.options.icon.rotate+=this.options.rotation,this.options.icon.element=icon,icon.src=this.options.icon.url,icon.onload=()=>this.redraw(),icon.onerror=()=>this.options.icon=null}if(this.options.label){let cx=p.x,cy=p.y;ctx.save(),ctx.font=this.options.font||'normal 7pt "Helvetica Neue", Arial, Helvetica, sans-serif',ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillStyle=this.options.fillStyle||"black",this.options.rotation&&(ctx.translate(p.x,p.y),ctx.rotate(this.options.rotation),cx=0,cy=0),this._map.getZoom()>17&&(ctx.fillStyle=this.options.strokeStyle||"black"),ctx.fillText(this.options.label,cx,cy),this.options.strokeStyle&&this._map.getZoom()<=17&&(ctx.strokeStyle=this.options.strokeStyle,ctx.strokeText(this.options.label,cx,cy)),ctx.restore()}}}),L.DistanceMarkers=L.LayerGroup.extend({options:{cssClass:"dist-marker",iconSize:[12,12],arrowSize:[10,10],arrowUrl:"data:image/svg+xml,%3Csvg transform='rotate(90)' xmlns='http://www.w3.org/2000/svg' width='560px' height='560px' viewBox='0 0 560 560'%3E%3Cpath stroke-width='35' fill='%23000' stroke='%23FFF' d='M280,40L522,525L280,420L38,525z'/%3E%3C/svg%3E",offset:1e3,showAll:12,textFunction:(distance,i,offset)=>i,distance:!0,direction:!0},initialize:function(line,map,options){this._layers={},this._zoomLayers={},options=L.setOptions(this,options);let preferCanvas=map.options.preferCanvas,showAll=Math.min(map.getMaxZoom(),options.showAll);preferCanvas||map.options.rotate||console.warn('Missing dependency: "leaflet-rotate"');let coords="function"==typeof line.getLatLngs?line.getLatLngs():line;coords=L.LineUtil.isFlat(coords)?[coords]:coords,coords.forEach(latlngs=>{let accumulated=L.GeometryUtil.accumulatedLengths(latlngs),length=accumulated.length>0?accumulated[accumulated.length-1]:0;for(let i=1,count=Math.floor(length/options.offset),j=0;i<=count;++i){let distance=options.offset*i;for(;j<accumulated.length-1&&accumulated[j]<distance;)++j;let p1=latlngs[j-1],p2=latlngs[j],m_line=L.polyline([p1,p2]),ratio=(distance-accumulated[j-1])/(accumulated[j]-accumulated[j-1]),position=L.GeometryUtil.interpolateOnLine(map,m_line,ratio),delta=map.project(p2).subtract(map.project(p1)),angle=Math.atan2(delta.y,delta.x),text=options.textFunction.call(this,distance,i,options.offset),zoom=this._minimumZoomLevelForItem(i,showAll),markers=this._zoomLayers[zoom]=this._zoomLayers[zoom]||L.layerGroup();options.direction&&(options.distance&&i%2==1||!options.distance)&&(preferCanvas?markers.addLayer(new L.DistanceMarker(p1,{radius:0,icon:{url:options.arrowUrl,size:options.arrowSize,rotate:0,offset:{x:0,y:0}},rotation:angle,interactive:!1})):markers.addLayer(L.marker(position.latLng,{icon:L.icon({iconUrl:options.arrowUrl,iconSize:options.arrowSize}),rotation:angle*L.DomUtil.RAD_TO_DEG,interactive:!1}))),options.distance&&i%2==0&&(preferCanvas?markers.addLayer(new L.DistanceMarker(position.latLng,{label:text,radius:7,fillColor:"#fff",fillOpacity:1,fillStyle:"black",color:"#777",weight:1,interactive:!1})):markers.addLayer(L.marker(position.latLng,{title:text,icon:L.divIcon({className:options.cssClass,html:text,iconSize:options.iconSize}),interactive:!1})))}});const updateMarkerVisibility=()=>{let oldZoom=this._lastZoomLevel||0,newZoom=map.getZoom();if(newZoom>oldZoom)for(let i=oldZoom+1;i<=newZoom;++i)void 0!==this._zoomLayers[i]&&this.addLayer(this._zoomLayers[i]);else if(newZoom<oldZoom)for(let i=oldZoom;i>newZoom;--i)void 0!==this._zoomLayers[i]&&this.removeLayer(this._zoomLayers[i]);this._lastZoomLevel=newZoom};map.on("zoomend",updateMarkerVisibility),updateMarkerVisibility()},_minimumZoomLevelForItem:function(i,zoom){for(;i>0&&i%2==0;)--zoom,i=Math.floor(i/2);return zoom}}),L.Polyline.include({_originalOnAdd:L.Polyline.prototype.onAdd,_originalOnRemove:L.Polyline.prototype.onRemove,addDistanceMarkers:function(){this._map&&this._distanceMarkers&&this._map.addLayer(this._distanceMarkers)},removeDistanceMarkers:function(){this._map&&this._distanceMarkers&&this._map.removeLayer(this._distanceMarkers)},onAdd:function(map){this._originalOnAdd(map);let opts=this.options.distanceMarkers||{};this.options.distanceMarkers&&(this._distanceMarkers=this._distanceMarkers||new L.DistanceMarkers(this,map,opts)),void 0!==opts.lazy&&!1!==opts.lazy||this.addDistanceMarkers()},onRemove:function(map){this.removeDistanceMarkers(),this._originalOnRemove(map)}});

package/package.json

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

package/src/control.js

@@ -25,9 +25,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	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 });
@@ -296,51 +294,44 @@ 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) {
-				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], 
@@ -380,10 +371,12 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		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;
 	},
 
 	/**
@@ -716,7 +709,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 */
 	_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(
@@ -727,8 +720,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			.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];
 						
 					}
 				});
@@ -740,65 +733,48 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * 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);
 
-		let { wptIcons, wptLabels } = control.options;
+		if (theme) {
+			style.className += ' ' + theme;
+		}
+
+		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;
@@ -929,8 +905,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 					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);
 			})
@@ -958,37 +933,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		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
 	 */
@@ -1106,60 +1050,79 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			return this._registerHandler(props.call(this));
 		}
 
+		let {
+			name,
+			attr,
+			required,
+			skipNull,
+			deltaMax,
+			clampRange,
+			decimals,
+			meta,
+			unit,
+			coordinateProperties,
+			coordPropsToMeta,
+			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),
+				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

package/src/handlers/altitude.js

@@ -24,7 +24,10 @@ export function Altitude() {
 		// 	// "alt" property is generated inside "leaflet"
 		// 	if ("alt" in point) point.meta.ele = point.alt;
 		// },
-		pointToAttr: (_, i) => this._data[i].z * opts.altitudeFactor,
+		pointToAttr: (point, i) => {
+			if ("alt" in point) point.meta.ele = point.alt; // "alt" property is generated inside "leaflet"
+			return this._data[i].z * opts.altitudeFactor;
+		},
 		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
 		grid: {
 			axis      : "y",

package/src/utils.js

@@ -88,11 +88,11 @@ export function formatTime(t) {
  * Loop and extract GPX Extensions handled by "@tmcw/toGeoJSON" (eg. "coordinateProperties" > "times")
  */
 export 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;
 				}
 			}