@raruto/leaflet-elevation 1.8.4 → 1.8.7

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.4/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.8.7/libs/leaflet-distance-marker.min.js',
 
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -156,77 +156,62 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this._markedSegments = L.polyline([]);
 		this._chartEnabled   = true,
 		this.track_info      = {};
-		this.options         = _.deepMerge({}, this.options, options);
 
-		if (this.options.followMarker)      this._setMapView = L.Util.throttle(this._setMapView, 300, this);
-		if (this.options.legend)            this.options.margins.bottom += 30;
-		if (this.options.theme)             this.options.polylineSegments.className += ' ' + this.options.theme;
-		if (this.options.wptIcons === true) this.options.wptIcons = Options.wptIcons;
+		L.setOptions(this, options);
+
+		if (this.options.followMarker)             this._setMapView = L.Util.throttle(this._setMapView, 300, this);
+		if (this.options.legend)                   this.options.margins.bottom += 30;
+		if (this.options.theme)                    this.options.polylineSegments.className += ' ' + this.options.theme;
+		if (this.options.wptIcons === true)        this.options.wptIcons = Options.wptIcons;
+		if (this.options.distanceMarkers === true) this.options.distanceMarkers = { lazy: true };
 
 		this._markedSegments.setStyle(this.options.polylineSegments);
 
 		// Leaflet canvas renderer colors
 		L.extend(D3.Colors, this.options.colors || {});
+
+		// Various stuff
+		this._fixCanvasPaths();
+		this._fixTooltipSize();
 	},
 
 	/**
 	 * Javascript scripts downloader (lazy loader)
 	 */
-	lazyLoad: function(src) {
-		return _.lazyLoad(src, this);
+	lazyLoad: function(src, condition = false, loader = '') {
+		if (!this.options.lazyLoadJS) {
+			return Promise.resolve();
+		}
+		switch(src) {
+			case this.__D3:
+				loader    = '_d3LazyLoader';
+				condition = typeof d3 !== 'object';
+			break;
+			case this.__TOGEOJSON:
+				loader    = '_togeojsonLazyLoader';
+				condition = typeof toGeoJSON !== 'object';
+			break;
+			case this.__LGEOMUTIL:
+				loader    = '_geomutilLazyLoader';
+				condition = typeof L.GeometryUtil !== 'object';
+			break;
+			case this.__LALMOSTOVER:
+				loader    = '_almostoverLazyLoader';
+				condition = typeof L.Handler.AlmostOver  !== 'function';
+			break;
+			case this.__LDISTANCEM:
+				loader    = '_distanceMarkersLazyLoader';
+				condition = typeof L.DistanceMarkers  !== 'function';
+			break;
+		}
+		return L.Control.Elevation[loader] = _.lazyLoader(src, condition, L.Control.Elevation[loader]);
 	},
 
 	/**
 	 * Load elevation data (GPX, GeoJSON or KML).
 	 */
 	load: function(data) {
-		if (_.isXMLDoc(data)) {
-			this.loadXML(data);
-		} else if (_.isJSONDoc(data)) {
-			this.loadGeoJSON(data);
-		} else {
-			this.loadFile(data);
-		}
-	},
-
-	/**
-	 * Load data from a remote url.
-	 */
-	loadFile: function(url) {
-		fetch(url)
-			.then((response) => response.text())
-			.then((data)     => {
-				this._downloadURL = url; // TODO: handle multiple urls?
-				this.load(data);
-			})
-			.catch((err) => console.warn(err));
-	},
-
-	/**
-	 * Load raw GeoJSON data.
-	 */
-	loadGeoJSON: function(data) {
-		_.GeoJSONLoader(data, this);
-	},
-
-	/**
-	 * Load raw XML data.
-	 */
-	loadXML: function(data) {
-		this.lazyLoad(this.__TOGEOJSON)
-			.then(() => {
-				let xml     = (new DOMParser()).parseFromString(data, "text/xml");
-				let type    = xml.documentElement.tagName.toLowerCase(); // "kml" or "gpx"
-				if (!(type in toGeoJSON)) {
-					type = xml.documentElement.tagName == "TrainingCenterDatabase" ? 'tcx' : 'gpx';
-				}
-				let geojson = toGeoJSON[type](xml);
-				let name    = xml.getElementsByTagName('name');
-				if(name[0]) { geojson.name = name[0].innerHTML; }
-				else if(this._downloadURL) { geojson.name = this._downloadURL.split('/').pop().split('#')[0].split('?')[0]; }
-
-				return this.loadGeoJSON(geojson, this);
-			});
+		this._parseFromString(data).then( geojson => geojson ? this._loadLayer(geojson) : this._loadFile(data));
 	},
 
 	/**
@@ -236,11 +221,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	onAdd: function(map) {
 		this._map = map;
 
-		let container = this._container = _.create("div", "elevation-control elevation " + this.options.theme);
-
-		if (!this.options.detached) {
-			_.addClass(container, 'leaflet-control');
-		}
+		let container = this._container = _.create("div", "elevation-control elevation " + this.options.theme + " " + (this.options.detached ? '' : 'leaflet-control'));
+		
 		this.lazyLoad(this.__D3)
 			.then(() => {
 				this._initButton(container);
@@ -256,8 +238,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 					.on('rotate',                        this._rotateMarker,  this)
 					.on('mousedown',                     this._resetDrag,     this);
 
-				_.on(map.getContainer(), 'mousewheel', this._resetDrag,     this);
-				_.on(map.getContainer(), 'touchstart', this._resetDrag,     this);
+				_.on(map.getContainer(), 'mousewheel', this._resetDrag,       this);
+				_.on(map.getContainer(), 'touchstart', this._resetDrag,       this);
+				_.on(document,           'keydown',    this._keydownHandler,  this);
 
 				this
 					.on('eledata_added eledata_loaded',  this._updateChart,   this)
@@ -283,8 +266,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			.off('resize',                        this._resizeChart,   this)
 			.off('mousedown',                     this._resetDrag,     this);
 
-		_.off(map.getContainer(), 'mousewheel', this._resetDrag,     this);
-		_.off(map.getContainer(), 'touchstart', this._resetDrag,     this);
+		_.off(map.getContainer(), 'mousewheel', this._resetDrag,       this);
+		_.off(map.getContainer(), 'touchstart', this._resetDrag,       this);
+		_.off(document,           'keydown',    this._keydownHandler,  this);
 
 		this
 			.off('eledata_added eledata_loaded',  this._updateChart,   this)
@@ -320,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) {
@@ -335,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 });
 	},
 
@@ -387,12 +386,59 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 
 	_addLayer: function(layer) {
 		if (layer) this._layers.addLayer(layer)
+		// Postpone adding the distance markers (lazy: true)
+		if (layer && this.options.distanceMarkers && this.options.distanceMarkers.lazy) {
+			layer.on('add remove', (e) => L.DistanceMarkers && e.target instanceof L.Polyline && e.target[e.type + 'DistanceMarkers']());
+		}
 	},
 
 	_addMarker: function(marker) {
 		if (marker) this._markers.addLayer(marker)
 	},
 
+	_bindPopup: function(marker) {
+		let popup = marker._popup;
+		if (popup) {
+			popup.options.className = 'elevation-popup';
+			if (popup._content) {
+				popup._content = decodeURI(popup._content);
+				popup.bindTooltip(popup._content, { direction: 'auto', sticky: true, opacity: 1, className: 'elevation-tooltip' }).openTooltip();
+			}
+		}
+	},
+
+	/**
+	 * Initialize "L.AlmostOver" integration
+	 */
+	_initAlmostOverHandler: function(map, layer) {
+		if(!map || !this.options.almostOver) return;
+		this.lazyLoad(this.__LGEOMUTIL)
+			.then(() => this.lazyLoad(this.__LALMOSTOVER))
+			.then(() => {
+					map.addHandler('almostOver', L.Handler.AlmostOver)
+					if (L.GeometryUtil && map.almostOver && map.almostOver.enabled()) {
+						map.almostOver.addLayer(layer);
+						map
+							.on('almost:move', (e) => this._mousemoveLayerHandler(e))
+							.on('almost:out',  (e) => this._mouseoutHandler(e));
+					}
+			});
+	},
+
+	/**
+	 * Initialize "L.DistanceMarkers" integration
+	 */
+	_initDistanceMarkers: function(map, layer) {
+		if (!map) return;
+		if (this.options.distanceMarkers) {
+			this.lazyLoad(this.__LGEOMUTIL)
+				.then(() => this.lazyLoad(this.__LDISTANCEM))
+				.then(() => this.options.polyline && layer.addTo(map));
+		} else if (this.options.polyline) {
+			layer.addTo(map);
+		}
+	},
+
 	/**
 	 * Adds the control to the given "detached" div.
 	 */
@@ -405,8 +451,25 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		if (this.options.detached) {
 			_.replaceClass(eleDiv, 'leaflet-control', 'elevation-detached');
 		}
-		this.eleDiv = eleDiv;
-		return this.eleDiv;
+		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");;
+		}
 	},
 
 	/*
@@ -423,6 +486,58 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		_.replaceClass(this._container, 'elevation-collapsed', 'elevation-expanded');
 	},
 
+	/**
+	 * Add some basic colors to leaflet canvas renderer (preferCanvas: true).
+	 */
+	_fixCanvasPaths: function() {
+		let oldProto = L.Canvas.prototype._fillStroke;
+		let control  = this;
+		L.Canvas.include({
+			_fillStroke: function(ctx, layer) {
+				if (control._layers.hasLayer(layer)) {
+
+					let theme      = control.options.theme.replace('-theme', '');
+					let color      = D3.Colors[theme] || {};
+					let options    = layer.options;
+
+					options.color  = color.line || color.area || theme;
+					options.stroke = !!options.color;
+
+					oldProto.call(this, ctx, layer);
+
+					if (options.stroke && options.weight !== 0) {
+						let oldVal                   = ctx.globalCompositeOperation || 'source-over';
+						ctx.globalCompositeOperation = 'destination-over'
+						ctx.strokeStyle              = color.outline || '#FFF';
+						ctx.lineWidth                = options.weight * 1.75;
+						ctx.stroke();
+						ctx.globalCompositeOperation = oldVal;
+					}
+
+				} else {
+					oldProto.call(this, ctx, layer);
+				}
+			}
+		});
+	},
+
+	/**
+	 * Partial fix for initial tooltip size
+	 * 
+	 * @link https://github.com/Raruto/leaflet-elevation/issues/81#issuecomment-713477050
+	 */
+	_fixTooltipSize: function() {
+		this.on('elechart_init', () =>
+			this.once('elechart_change elechart_hover', e => {
+				if (this._chartEnabled) {
+					this._chart._showDiagramIndicator(e.data, e.xCoord);
+					this._chart._showDiagramIndicator(e.data, e.xCoord);
+				}
+				this._updateMarker(e.data);
+			})
+		);
+	},
+
 	/*
 	 * Finds a data entry for the given LatLng
 	 */
@@ -522,7 +637,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	},
 
 	_initMarker: function(map) {
-		let pane                   = map.getPane('elevationPane');
+		let pane                     = map.getPane('elevationPane');
 		if (!pane) {
 			pane = this._pane        = map.createPane('elevationPane', map.getPane('norotatePane') || map.getPane('mapPane'));
 			pane.style.zIndex        = 625; // This pane is above markers but below popups.
@@ -530,8 +645,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		}
 
 		if (this._renderer) this._renderer.remove()
-		this._renderer             = L.svg({ pane: "elevationPane" }).addTo(this._map); // default leaflet svg renderer
-		this._marker               = new Marker(this.options);
+		this._renderer               = L.svg({ pane: "elevationPane" }).addTo(this._map); // default leaflet svg renderer
+		this._marker                 = new Marker(this.options);
 
 		this._fireEvt("elechart_marker");
 	},
@@ -540,21 +655,13 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Inspired by L.Control.Layers
 	 */
 	_initButton: function(container) {
-		//Makes this work on IE10 Touch devices by stopping it from firing a mouseout event when the touch is released
-		container.setAttribute('aria-haspopup', true);
 
-		if (!this.options.detached) {
+		if (L.Browser.mobile || !this.options.detached) {
 			L.DomEvent
 				.disableClickPropagation(container)
 				.disableScrollPropagation(container);
 		}
 
-		if (L.Browser.mobile) {
-			_.on(container, 'click', L.DomEvent.stopPropagation);
-		}
-
-		_.on(container, 'mousewheel', this._mousewheelHandler, this);
-
 		if (!this.options.detached) {
 			let link = this._button = _.create('a', "elevation-toggle elevation-toggle-icon" + (this.options.autohide ? "" : " close-button"), { href: '#', title: L._('Elevation') }, container);
 
@@ -571,21 +678,100 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 				_.on(link, 'focus', this._toggle, this);
 
 				this._map.on('click', this._collapse, this);
-				// TODO: keyboard accessibility
 			}
-		} else {
-			// TODO: handle autohide when detached=true
 		}
 	},
 
 	_initSummary: function(container) {
-		let summary = this._summary = new Summary({ summary: this.options.summary }, this);
+		this._summary = new Summary({ summary: this.options.summary }, this);
 
-		d3
-			.select(container)
-			.call(summary.render());
+		d3.select(container).call(this._summary.render());
+	},
+
+	_keydownHandler: function(e) {
+		if(!this.options.detached && e.key === "Escape"){
+			this._collapse()
+		};
+	},
+
+	/**
+	 * Retrieve data from a remote url (HTTP).
+	 */
+	_loadFile: function(url) {
+		fetch(url)
+			.then((response) => response.text())
+			.then((data)     => {
+				this._downloadURL = url; // TODO: handle multiple urls?
+				this._parseFromString(data)
+					.then( geojson => geojson && this._loadLayer(geojson));
+			}).catch((err) => console.warn(err));
+	},
+
+	/**
+	 * Simple GeoJSON data loader (L.GeoJSON).
+	 */
+	_loadLayer: function(geojson) {
+		let control = this;
+
+		let { wptIcons, wptLabels } = control.options;
+
+		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;
+			},
+			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>' } )
+						);
+					}
+					let marker = L.marker(latlng, { icon: wptIcons[sym] });
+					if ([true, 'markers'].includes(wptLabels) && (name || desc)) {
+						marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
+					}
+					control._addMarker(marker);
+					control._bindPopup(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 });
+				} 
+			},
+		});
 
-		this.summaryDiv = this._summary._container;
+		control.lazyLoad(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 })
+		});
+
+		return layer;
 	},
 
 	_dragendHandler: function(e) {
@@ -657,19 +843,90 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this._fireEvt("elechart_leave");
 	},
 
-	/*
-	 * Handles the mouesewheel over the chart.
+	/**
+	 * Simple GeoJSON Parser
 	 */
-	_mousewheelHandler: function(e) {
-		if (this._map.gestureHandling && this._map.gestureHandling._enabled) return;
-		let ll = this._marker.getLatLng() || this._map.getCenter();
-		let z  = this._map.getZoom() + Math.sign(e.deltaY);
-		this._resetDrag();
-		this._map.flyTo(ll, z);
+	_parseFromGeoJSONString: function(data) {
+		try {
+			return JSON.parse(data);
+		} catch (e) { }
+	},
+
+	/**
+	 * Attempt to parse raw response data (GeoJSON or XML > GeoJSON)
+	 */
+	_parseFromString: function(data) {
+		return new Promise(resolve =>
+			this.lazyLoad(this.__TOGEOJSON).then(() => {
+				let geojson;
+				try {
+					geojson = this._parseFromXMLString(data.trim());
+				} catch (e) {
+					geojson = this._parseFromGeoJSONString(data.toString());
+				}
+				if (geojson) {
+					geojson = this._prepareMultiLineStrings(geojson);
+					geojson = this._prepareAdditionalProperties(geojson);
+				}
+				resolve(geojson);
+			})
+		);
+	},
+
+	/**
+	 * Simple XML Parser (GPX, KML, TCX)
+	 */
+	_parseFromXMLString: function(data) {
+		if (data.indexOf("<") != 0) {
+			throw 'Invalid XML';
+		}
+		let xml  = (new DOMParser()).parseFromString(data, "text/xml");
+		let type = xml.documentElement.tagName.toLowerCase(); // "kml" or "gpx"
+		let name = xml.getElementsByTagName('name');
+		if (xml.getElementsByTagName('parsererror').length) {
+			throw 'Invalid XML';
+		}
+		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") ?? name[0]).textContent : '';
+		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 a waypoint marker to the diagram
+	 * Add a point of interest over the diagram
 	 */
 	_registerCheckPoint: function(props) {
 		this.on("elechart_updated", () => this._chart._registerCheckPoint(props));
@@ -699,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));
@@ -887,9 +1144,14 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			this._fireEvt("elechart_summary");
 		}
 		if (this.options.downloadLink && this._downloadURL) { // TODO: generate dynamically file content instead of using static file urls.
-			this.summaryDiv.innerHTML += '<span class="download"><a href="#">' + L._('Download') + '</a></span>'
-			_.select('.download a', this.summaryDiv).onclick = (e) => {
+			this._summary._container.innerHTML += '<span class="download"><a href="#">' + L._('Download') + '</a></span>'
+			_.select('.download a', this._summary._container).onclick = (e) => {
 				e.preventDefault();
+				if (e.downloadLink == 'modal' && typeof CustomEvent === "function") {
+					document.dispatchEvent(new CustomEvent("eletrack_download", { detail: e }));
+				} else if (e.downloadLink == 'link' || e.downloadLink === true) {
+					e.confirm();
+				}
 				this._fireEvt('eletrack_download', { downloadLink: this.options.downloadLink, confirm: _.saveFile.bind(this, this._downloadURL) });
 			};
 		};
@@ -921,125 +1183,4 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		return this.__yTicks || Math.round(this._height() / 30);
 	}
 
-});
-
-/**
- * Attach here some useful elevation hooks.
- */
-Elevation.addInitHook(function() {
-
-	// Alias deprecated functions
-	this.enableDragging  = this.enableBrush;
-	this.disableDragging = this.disableBrush;
-	this.loadChart       = this.addTo;
-	this.loadData        = this.load;
-	this.loadGPX         = this.loadXML;
-
-	this.on('waypoint_added', function(e) {
-		let p = e.point,
-			pop = p._popup;
-		if (pop) {
-			pop.options.className = 'elevation-popup';
-		}
-		if (pop && pop._content) {
-			pop._content = decodeURI(pop._content);
-			p.bindTooltip(pop._content, { direction: 'auto', sticky: true, opacity: 1, className: 'elevation-tooltip' }).openTooltip();
-		}
-	});
-
-	this.on("eletrack_download", function(e) {
-		if (e.downloadLink == 'modal' && typeof CustomEvent === "function") {
-			document.dispatchEvent(new CustomEvent("eletrack_download", { detail: e }));
-		} else if (e.downloadLink == 'link' || e.downloadLink === true) {
-			e.confirm();
-		}
-	});
-
-	this.on('eledata_loaded', function(e) {
-		let map   = this._map;
-		let layer = e.layer;
-		if (!map) {
-			console.warn("Undefined elevation map object");
-			return;
-		}
-		map.once('layeradd',   (e) => this.options.autofitBounds && this.fitBounds(layer.getBounds()));
-
-		if (L.Browser.mobile) {
-
-			if (this.options.polyline) layer.addTo(map);
-
-		} else {
-
-			// leaflet-geometryutil
-			this.lazyLoad(this.__LGEOMUTIL)
-				.then(() => {
-
-					// leaflet-almostover
-					if (this.options.almostOver) {
-						this.lazyLoad(this.__LALMOSTOVER)
-							.then(() => {
-								map.addHandler('almostOver', L.Handler.AlmostOver)
-								if (L.GeometryUtil && map.almostOver && map.almostOver.enabled()) {
-									map.almostOver.addLayer(layer);
-									map
-										.on('almost:move', (e) => this._mousemoveLayerHandler(e))
-										.on('almost:out',  (e) => this._mouseoutHandler(e));
-								}
-							});
-					}
-
-					// leaflet-distance-markers
-					if (this.options.distanceMarkers) {
-						this.lazyLoad(this.__LDISTANCEM)
-							.then(() => this.options.polyline && layer.addTo(map));
-					} else {
-						if (this.options.polyline) layer.addTo(map);
-					}
-				});
-		}
-
-	});
-
-	// Basic canvas renderer support.
-	let oldProto = L.Canvas.prototype._fillStroke;
-	let control  = this;
-	L.Canvas.include({
-		_fillStroke: function(ctx, layer) {
-			if (control._layers.hasLayer(layer)) {
-
-				let theme      = control.options.theme.replace('-theme', '');
-				let color      = D3.Colors[theme] || {};
-				let options    = layer.options;
-
-				options.color  = color.line || color.area || theme;
-				options.stroke = !!options.color;
-
-				oldProto.call(this, ctx, layer);
-
-				if (options.stroke && options.weight !== 0) {
-					let oldVal                   = ctx.globalCompositeOperation || 'source-over';
-					ctx.globalCompositeOperation = 'destination-over'
-					ctx.strokeStyle              = color.outline || '#FFF';
-					ctx.lineWidth                = options.weight * 1.75;
-					ctx.stroke();
-					ctx.globalCompositeOperation = oldVal;
-				}
-
-			} else {
-				oldProto.call(this, ctx, layer);
-			}
-		}
-	});
-
-	// Partially fix: https://github.com/Raruto/leaflet-elevation/issues/81#issuecomment-713477050
-	this.on('elechart_init', function() {
-		this.once('elechart_change elechart_hover', function(e) {
-			if (this._chartEnabled) {
-				this._chart._showDiagramIndicator(e.data, e.xCoord);
-				this._chart._showDiagramIndicator(e.data, e.xCoord);
-			}
-			this._updateMarker(e.data);
-		});
-	});
-
-});
+});