@raruto/leaflet-elevation 2.2.2 → 2.2.5

package/dist/leaflet-elevation.js

@@ -285,1306 +285,1313 @@
 		yAxisMin: undefined,
 	};
 
-	// "leaflet-i18n" fallback
-	if (!L._ || !L.i18n) {
-		L._ = L.i18n = (string, data) => string;
-	}
-
-	const Elevation = L.Control.Elevation = L.Control.extend({
-
-		includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,
-
-		options: Options,
-		__mileFactor:     0.621371, // 1 km = (0.621371 mi)
-		__footFactor:     3.28084,  // 1 m  = (3.28084 ft)
-		__D3:            'https://unpkg.com/d3@6.5.0/dist/d3.min.js',
-		__TOGEOJSON:     'https://unpkg.com/@tmcw/togeojson@4.6.0/dist/togeojson.umd.js',
-		__LGEOMUTIL:     'https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js',
-		__LALMOSTOVER:   'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
-		__LHOTLINE:      '../libs/leaflet-hotline.min.js',
-		__LDISTANCEM:    '../libs/leaflet-distance-marker.min.js',
-		__LCHART:        '../src/components/chart.js',
-		__LMARKER:       '../src/components/marker.js',
-		__LSUMMARY:      '../src/components/summary.js',
-		__modulesFolder: '../src/handlers/',
-
-		/*
-		 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
-		 */
-		addData: function(d, layer) {
-			this.import(this.__D3)
-				.then(() => {
-					if (this._modulesLoaded) {
-						layer = layer ?? (d.on && d);
-						this._addData(d);
-						this._addLayer(layer);
-						this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
-					} else {
-						this.once('modules_loaded', () => this.addData(d,layer));
-					}
-				});
-		},
-
-		/**
-		 * Adds the control to the given map.
-		 */
-		addTo: function(map) {
-			if (this.options.detached) {
-				let parent = select(this.options.elevationDiv);
-				let eleDiv = this.onAdd(map);
-				parent ? append(parent, eleDiv) : insert(map.getContainer(), eleDiv, 'afterend');
-			} else {
-				L.Control.prototype.addTo.call(this, map);
-			}
-			return this;
-		},
-
-		/*
-		 * Reset data and display
-		 */
-		clear: function() {
-			if (this._marker)        this._marker.remove();
-			if (this._chart)         this._clearChart();
-			if (this._layers)        this._clearLayers(this._layers);
-			if (this._markers)       this._clearLayers(this._markers);
-			if (this._circleMarkers) this._circleMarkers.remove();
-			if (this._hotline)       this._clearLayers(this._hotline);
-
-			this._data      = [];
-			this.track_info = {};
-
-			this._fireEvt("eledata_clear");
-
-			this._updateChart();
-		},
-
-		_clearChart: function() {
-			if (this._events && this._events.elechart_updated) {
-				this._events.elechart_updated.forEach(({fn, ctx}) => this.off('elechart_updated', fn, ctx));
-			}
-			if (this._chart && this._chart._container) {
-				this._chart._container.selectAll('g.point .point').remove();
-				this._chart.clear();
-			}
-		},
-
-		_clearLayers: function(l) {
-			l = l || this._layers;
-			if (l && l.eachLayer) {
-				l.eachLayer(f => f.remove());
-				l.clearLayers();
-			}
-		},
-
-		/**
-		 * TODO: Create a base class to handle custom data attributes (heart rate, cadence, temperature, ...)
-		 * 
-		 * @link https://leafletjs.com/examples/extending/extending-3-controls.html#handlers
-		 */
-		// addHandler: function (name, HandlerClass) {
-		// 	if (HandlerClass) {
-		// 		let handler = this[name] = new HandlerClass(this);
-		// 		this.handlers.push(handler);
-		// 		if (this.options[name]) {
-		// 			handler.enable();
-		// 		}
-		// 	}
-		// 	return this;
-		// },
-
-		/**
-		 * Disable chart brushing.
-		 */
-		disableBrush: function() {
-			this._chart._brushEnabled = false;
-			this._resetDrag();
-		},
-
-		/**
-		 * Enable chart brushing.
-		 */
-		enableBrush: function() {
-			this._chart._brushEnabled = true;
-		},
-
-		/**
-		 * Disable chart zooming.
-		 */
-		disableZoom: function() {
-			this._chart._zoomEnabled = false;
-			this._chart._resetZoom();
-		},
-
-		/**
-		 * Enable chart zooming.
-		 */
-		enableZoom: function() {
-			this._chart._zoomEnabled = true;
-		},
-
-		/**
-		 * Sets a map view that contains the given geographical bounds.
-		 */
-		fitBounds: function(bounds) {
-			bounds = bounds || this.getBounds();
-			if (this._map && bounds.isValid()) this._map.fitBounds(bounds);
-		},
-
-		getBounds: function(data) {
-			return L.latLngBounds((data || this._data).map((d) => d.latlng));
-		},
-
-		/**
-		 * Get default zoom level (followMarker: true).
-		 */
-		getZFollow: function() {
-			return this.options.zFollow;
-		},
-
-		/**
-		 * Hide current elevation chart profile.
-		 */
-		hide: function() {
-			style(this._container, "display", "none");
-		},
-
-		/**
-		 * Initialize chart control "options" and "container".
-		 */
-		initialize: function(opts) {
-
-			opts = L.setOptions(this, opts);
-
-			this._data           = [];
-			this._layers         = L.featureGroup();
-			this._markers        = L.featureGroup();
-			this._hotline        = L.featureGroup();
-			this._circleMarkers  = L.featureGroup();
-			this._markedSegments = L.polyline([]);
-			this._start          = (opts.trkStart || Options.trkStart);
-			this._end            = (opts.trkEnd || Options.trkEnd);
-			this._chartEnabled   = true;
-			this._yCoordMax      = -Infinity;
-			this.track_info      = {};
-			//  this.handlers        = [];
-
-			if (opts.followMarker)             this._setMapView = throttle(this._setMapView, 300, this);
-			if (opts.legend)                   opts.margins.bottom += 30;
-			if (opts.theme)                    opts.polylineSegments.className += ' ' + opts.theme;
-			if (opts.wptIcons === true)        opts.wptIcons = Options.wptIcons;
-			if (opts.distanceMarkers === true) opts.distanceMarkers = Options.distanceMarkers;
-			if (opts.trkStart)                 this._start.addTo(this._circleMarkers);
-			if (opts.trkEnd)                   this._end.addTo(this._circleMarkers);
-
-
-			this._markedSegments.setStyle(opts.polylineSegments);
-
-			// Leaflet canvas renderer colors
-			L.extend(Colors, opts.colors || {});
-
-			// Various stuff
-			this._fixCanvasPaths();
-			this._fixTooltipSize();
-
-		},
-
-		/**
-		 * Javascript scripts downloader (lazy loader)
-		 */
-		import: function(src, condition) {
-			switch(src) {
-				case this.__D3:          condition = typeof d3 !== 'object'; break;
-				case this.__TOGEOJSON:   condition = typeof toGeoJSON !== 'object'; break;
-				case this.__LGEOMUTIL:   condition = typeof L.GeometryUtil !== 'object'; break;
-				case this.__LALMOSTOVER: condition = typeof L.Handler.AlmostOver  !== 'function'; break;
-				case this.__LDISTANCEM:  condition = typeof L.DistanceMarkers  !== 'function'; break;
-			}
-			return condition !== false ? import(src) : Promise.resolve();
-		},
-
-		/**
-		 * Load elevation data (GPX, GeoJSON, KML or TCX).
-		 */
-		load: function(data) {
-			this._parseFromString(data).then( geojson => geojson ? this._loadLayer(geojson) : this._loadFile(data));
-		},
-
-		/**
-		 * Create container DOM element and related event listeners.
-		 * Called on control.addTo(map).
-		 */
-		onAdd: function(map) {
-			this._map = map;
-
-			let container = this._container = create("div", "elevation-control " + this.options.theme + " " + (this.options.detached ? 'elevation-detached' : 'leaflet-control'), this.options.detached ? { id: 'elevation-' + randomId() } : {});
-
-			if (!this.eleDiv) this.eleDiv = container;
-
-			this._loadModules(this.options.handlers).then(() => { // Inject here required modules (data handlers)
-				this._initChart(container);
-				this._initButton(container);
-				this._initSummary(container);
-				this._initMarker(map);
-				this._initLayer(map);
-				this._modulesLoaded = true;
-				this.fire('modules_loaded');
-			});
-
-			this.fire('add');
-
-			return container;
-		},
-
-		/**
-		 * Clean up control code and related event listeners.
-		 * Called on control.remove().
-		 */
-		onRemove: function(map) {
-			this._container = null;
-
-			map
-				.off('zoom viewreset zoomanim',      this._hideMarker,    this)
-				.off('resize',                       this._resetView,     this)
-				.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(document,           'keydown',     this._onKeyDown,     this);
-
-			this
-				.off('eledata_added eledata_loaded', this._updateChart,   this)
-				.off('eledata_added eledata_loaded', this._updateSummary, this);
-
-			this.fire('remove');
-		},
-
-		/**
-		 * Redraws the chart control. Sometimes useful after screen resize.
-		 */
-		redraw: function() {
-			this._resizeChart();
-		},
-
-		/**
-		 * Set default zoom level (followMarker: true).
-		 */
-		setZFollow: function(zoom) {
-			this.options.zFollow = zoom;
-		},
-
-		/**
-		 * Hide current elevation chart profile.
-		 */
-		show: function() {
-			style(this._container, "display", "block");
-		},
-
-		/*
-		 * Parsing data either from GPX or GeoJSON and update the diagram data
-		 */
-		_addData: function(d) {
-			if (!d) {
-				return;
-			}
-
-			// 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);
-					}
-				}
-			}
-
-			// Fallback for leaflet layers (eg. L.Gpx)
-			if (d._latlngs) {
-				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, 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 };
-				
-				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, isMulti: nestingLevel });
-
-				this._addPoint(
-					point.lat ?? point[1], 
-					point.lng ?? point[0],
-					point.alt ?? point.meta.ele ?? point[2]
-				);
-
-				this.fire("elepoint_added", { point: point, index: this._data.length - 1 });
-
-				if (this._yCoordMax < this._data[this._data.length - 1][this.options.yAttr]) this._yCoordMax = this._data[this._data.length - 1][this.options.yAttr];
-			});
-
-			this.fire("eletrack_added", { coords: coords, index: this._data.length - 1 });
-		},
-
-		/*
-		 * Parse and push a single (x, y, z) point to current elevation profile.
-		 */
-		_addPoint: function(x, y, z) {
-			if (this.options.reverseCoords) {
-				[x, y] = [y, x];
-			}
-
-			this._data.push({
-				x: x,
-				y: y,
-				z: z,
-				latlng: L.latLng(x, y, z)
-			});
-
-			this.fire("eledata_updated", { index: this._data.length - 1 });
-		},
-
-		_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', ({target, type}) => L.DistanceMarkers && target instanceof L.Polyline && target[type + 'DistanceMarkers']());
-			}
-			return layer;
-		},
-
-		_addMarker: function(marker) {
-			if (marker) this._markers.addLayer(marker);
-			return marker;
-		},
-
-		/**
-		 * Initialize "L.AlmostOver" integration
-		 */
-		_initAlmostOverHandler: function(map, layer) {
-			return (map && this.options.almostOver && !L.Browser.mobile) ? Promise.all([
-				this.import(this.__LGEOMUTIL),
-				this.import(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._onMouseMoveLayer(e))
-						.on('almost:out',  (e) => this._onMouseOut(e));
-				}
-			}) : Promise.resolve();
-		},
-
-		/**
-		 * Initialize "L.DistanceMarkers" integration
-		 */
-		_initDistanceMarkers: function() {
-			return this.options.distanceMarkers ? Promise.all([this.import(this.__LGEOMUTIL), this.import(this.__LDISTANCEM)]) : Promise.resolve();
-		},
-
-		_initHotLine: function(layer) {
-			let prop = typeof this.options.hotline == 'string' ? this.options.hotline : 'elevation';
-			return this.options.hotline ? this.import(this.__LHOTLINE)
-				.then(() => {
-					layer.eachLayer((trkseg) => {
-						if(trkseg.feature.geometry.type != "Point") {
-							let geo = L.geoJson(trkseg.toGeoJSON(), { coordsToLatLng: (coords) => L.latLng(coords[0], coords[1], coords[2])});
-							let line = L.hotline(geo.toGeoJSON().features[0].geometry.coordinates, {
-								min: isFinite(this.track_info[prop + '_min']) ? this.track_info[prop + '_min'] : 0,
-								max: isFinite(this.track_info[prop + '_max']) ? this.track_info[prop + '_max'] : 1,
-								palette: {
-									0.0: '#008800',
-									0.5: '#ffff00',
-									1.0: '#ff0000'
-								},
-								weight: 5,
-								outlineColor: '#000000',
-								outlineWidth: 1
-							}).addTo(this._hotline);
-							let alpha = trkseg.options.style && trkseg.options.style.opacity || 1;
-							trkseg.on('add remove', ({type}) => {
-								trkseg.setStyle({opacity: (type == 'add' ? 0 : alpha)});
-								line[(type == 'add' ? 'addTo' : 'removeFrom')](trkseg._map);
-								if (line._renderer) line._renderer._container.parentElement.insertBefore(line._renderer._container, line._renderer._container.parentElement.firstChild);
-							});
-						}
-					});
-				}) : Promise.resolve();
-		},
-
-		/**
-		 * Initialize "L.AlmostOver" and "L.DistanceMarkers"
-		 */
-		_initMapIntegrations: function(layer) {
-			let map = this._map;
-			if (map) {
-				if (this._data.length) {
-					this._start.setLatLng(this._data[0].latlng);
-					this._end.setLatLng(this._data[this._data.length -1].latlng);
-				}
-				Promise.all([
-					this._initHotLine(layer),
-					this._initAlmostOverHandler(map, layer),
-					this._initDistanceMarkers(),
-				]).then(() => {
-					if	(this.options.polyline) {
-						layer.addTo(map);
-						this._circleMarkers.addTo(map);
-					}
-					if (this.options.autofitBounds) {
-						this.fitBounds(layer.getBounds());
-					}
-					map.invalidateSize();
-				});
-			} else {
-				this.once('add', () => this._initMapIntegrations(layer));
-			}
-		},
-
-		/*
-		 * Collapse current chart control.
-		 */
-		_collapse: function() {
-			replaceClass(this._container, 'elevation-expanded', 'elevation-collapsed');
-			if (this._map) this._map.invalidateSize();
-		},
-
-		/*
-		 * Expand current chart control.
-		 */
-		_expand: function() {
-			replaceClass(this._container, 'elevation-collapsed', 'elevation-expanded');
-			if (this._map) this._map.invalidateSize();
-		},
-
-		/**
-		 * Add some basic colors to leaflet canvas renderer (preferCanvas: true).
-		 */
-		_fixCanvasPaths: function() {
-			let oldProto = L.Canvas.prototype._fillStroke;
-			let control  = this;
-
-			let theme      = this.options.theme.split(' ')[0].replace('-theme', '');
-			let color      = Colors[theme] || {};
-
-			L.Canvas.include({
-				_fillStroke: function(ctx, layer) {
-					if (control._layers.hasLayer(layer)) {
-
-						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', ({data, xCoord}) => {
-					if (this._chartEnabled) {
-						this._chart._showDiagramIndicator(data, xCoord);
-						this._chart._showDiagramIndicator(data, xCoord);
-					}
-					this._updateMarker(data);
-				})
-			);
-		},
-
-		/*
-		 * Finds a data entry for the given LatLng
-		 */
-		_findItemForLatLng: function(latlng) {
-			return this._data[this._chart._findIndexForLatLng(latlng)];
-		},
-
-		/*
-		 * Finds a data entry for the given xDiagCoord
-		 */
-		_findItemForX: function(x) {
-			return this._data[this._chart._findIndexForXCoord(x)];
-		},
-
-		/**
-		 * Fires an event of the specified type.
-		 */
-		_fireEvt: function(type, data, propagate) {
-			if (this.fire) this.fire(type, data, propagate);
-			if (this._map) this._map.fire(type, data, propagate);
-		},
-
-		/*
-		 * Hides the position/height indicator marker drawn onto the map
-		 */
-		_hideMarker: function() {
-			if (this.options.autohideMarker) {
-				this._marker.remove();
-			}
-		},
-
-		/**
-		 * Generate "svg" chart (DOM element).
-		 */
-		_initChart: function(container) {
-			let opts = this.options;
-			let map  = this._map;
-
-			if (opts.detached) {
-				let { offsetWidth, offsetHeight}             = this.eleDiv;
-				if (offsetWidth > 0)             opts.width  = offsetWidth;
-				if (offsetHeight > 20)           opts.height = offsetHeight - 20; // 20 = horizontal scrollbar size.
-			} else {
-				let { clientWidth }                          = map.getContainer();
-				opts._maxWidth                               = opts._maxWidth > opts.width ? opts._maxWidth : opts.width;
-				this._container.style.maxWidth               = opts._maxWidth + 'px';
-				if (opts._maxWidth > clientWidth) opts.width = clientWidth - 30;
-			}
-
-			Promise.all([
-				this.import(this.__D3),
-				this.import(this.__LCHART)
-			]).then((m) => {
-
-				let chart = this._chart = new (m[1] || Elevation).Chart(opts, this);
-		
-				this._x     = this._chart._x;
-				this._y     = this._chart._y;
-		
-				d3
-					.select(container)
-					.call(chart.render());
-		
-				chart
-					.on('reset_drag',      this._hideMarker,     this)
-					.on('mouse_enter',     this._onMouseEnter,   this)
-					.on('dragged',         this._onDragEnd,      this)
-					.on('mouse_move',      this._onMouseMove,    this)
-					.on('mouse_out',       this._onMouseOut,     this)
-					.on('ruler_filter',    this._onRulerFilter,  this)
-					.on('zoom',            this._updateChart,    this)
-					.on('elepath_toggle',  this._onToggleChart,  this)
-					.on('margins_updated', this._resizeChart,    this);
-		
-		
-				this.fire("elechart_init");
-
-				map
-					.on('zoom viewreset zoomanim',      this._hideMarker,    this)
-					.on('resize',                       this._resetView,     this)
-					.on('resize',                       this._resizeChart,   this)
-					.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(document,           'keydown',     this._onKeyDown,     this);
-
-				this
-					.on('eledata_added eledata_loaded', this._updateChart,   this)
-					.on('eledata_added eledata_loaded', this._updateSummary, this);
-
-				this._updateChart();
-				this._updateSummary();
-			});
-
-
-		},
-
-		_initLayer: function() {
-			this._layers
-				.on('layeradd layerremove', ({layer, type}) => {
-					let node  = layer.getElement && layer.getElement();
-					toggleClass(node,  this.options.polyline.className + ' ' + this.options.theme, type == 'layeradd');
-					toggleEvent(layer, "mousemove", this._onMouseMoveLayer.bind(this),             type == 'layeradd');
-					toggleEvent(layer, "mouseout",  this._onMouseOut.bind(this),                   type == 'layeradd');
-				});
-		},
-
-		_initMarker: function(map) {
-			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.
-				pane.style.pointerEvents = 'none';
-			}
-
-			if (this._renderer) this._renderer.remove();
-			this._renderer               = L.svg({ pane: "elevationPane" }).addTo(this._map); // default leaflet svg renderer
-
-			Promise.all([
-				this.import(this.__D3),
-				this.import(this.__LMARKER)
-			]).then((m) => {
-				this._marker             = new (m[1] || Elevation).Marker(this.options, this);
-				this.fire("elechart_marker");
-			});
-		},
-
-		/**
-		 * Inspired by L.Control.Layers
-		 */
-		_initButton: function(container) {
-			L.DomEvent
-				.disableClickPropagation(container)
-				.disableScrollPropagation(container);
-
-			this.options.collapsed ? this._collapse() : this._expand();
-
-			if (this.options.autohide) {
-				on(container, 'mouseover', this._expand,   this);
-				on(container, 'mouseout',  this._collapse, this);
-				this._map.on('click', this._collapse, this);
-			}
-
-			if (this.options.closeBtn) {
-				let link = this._button = create('a', "elevation-toggle-icon", { href: '#', title: L._('Elevation'), }, container);
-				on(link, 'click', L.DomEvent.stop);
-				on(link, 'click', this._toggle, this);
-				on(link, 'focus', this._toggle, this);
-			}
-		},
-
-		_initSummary: function(container) {
-			this.import(this.__LSUMMARY).then((m)=>{
-				this._summary = new (m || Elevation).Summary({ summary: this.options.summary }, this);
-
-				this.on('elechart_init', () => {
-					d3.select(container).call(this._summary.render());
-				});
-			});
-		},
-
-		/**
-		 * 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));
-		},
-
-		/**
-		 * Dynamically import only required javascript modules (code splitting)
-		 */
-		_loadModules: function(handlers) {
-			// First map known classnames (eg. "Altitude" --> L.Control.Elevation.Altitude)
-			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'))
-			let modules = handlers.map(file => (typeof file === 'string' && this.import(this.__modulesFolder + file.toLowerCase() + '.js')) || (file instanceof Promise && file) || Promise.resolve());
-			return Promise.all(modules).then((m) => {
-				each(m, (exported, i) => {
-					let fn = exported && Object.keys(exported)[0];
-					if (fn) {
-						handlers[i] = Elevation[fn] = (Elevation[fn] ?? exported[fn]);
-					}
-				});
-				each(handlers, h => ["function", "object"].includes(typeof h) && this._registerHandler(h));
-			});
-		},
-
-		/**
-		 * Simple GeoJSON data loader (L.GeoJSON).
-		 */
-		_loadLayer: function(geojson) {
-			let { polyline, theme, waypoints, wptIcons, wptLabels, distanceMarkers } = this.options;
-			let style = L.extend({}, polyline);
-
-			if (theme) {
-				style.className += ' ' + theme;
-			}
-
-			if (geojson.name) {
-				this.track_info.name = geojson.name;
-			}
-
-			let layer = L.geoJson(geojson, {
-				distanceMarkers: distanceMarkers,
-				style: style,
-				pointToLayer: (feature, latlng) => {
-					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 : '')
-							});
-						}
-						// 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 : ''))
-							});
-						}
-					}
-				},
-				onEachFeature: (feature, layer) => feature.geometry && feature.geometry.type != 'Point' && this.addData(feature, layer),
-			});
-
-			this.import(this.__D3).then(() => {
-				this._initMapIntegrations(layer);
-				this._fireEvt("eledata_loaded", { data: geojson, layer: layer, name: this.track_info.name, track_info: this.track_info });
-			});
-
-			return layer;
-		},
-
-		_onDragEnd: function({ dragstart, dragend}) {
-			this._hideMarker();
-			this.fitBounds(L.latLngBounds([dragstart.latlng, dragend.latlng]));
-
-			this.fire("elechart_dragged");
-		},
-
-		_onKeyDown: function({key}) {
-			if(!this.options.detached && key === "Escape"){
-				this._collapse();
-			}	},
-
-		/**
-		 * Trigger mouseenter event.
-		 */
-		_onMouseEnter: function() {
-			this.fire('elechart_enter');
-		},
-
-		/*
-		 * Handles the moueseover the chart and displays distance and altitude level.
-		 */
-		_onMouseMove: function({xCoord}) {
-			if (this._chartEnabled && this._data.length) {
-				let item = this._findItemForX(xCoord);
-				if (item) {
-					if (this._chartEnabled) this._chart._showDiagramIndicator(item, xCoord);
-
-					this._updateMarker(item);
-					this._setMapView(item);
-
-					if (this._map) {
-						addClass(this._map.getContainer(), 'elechart-hover');
-					}
-
-					this.fire("elechart_change", { data: item, xCoord: xCoord });
-					this.fire("elechart_hover",  { data: item, xCoord: xCoord });
-				}
-			}
-		},
-
-		/*
-		 * Handles mouseover events of the data layers on the map.
-		 */
-		_onMouseMoveLayer: function({latlng}) {
-			if (this._data.length) {
-				let item = this._findItemForLatLng(latlng);
-				if (item) {
-					let xCoord = item.xDiagCoord;
-		
-					if (this._chartEnabled) this._chart._showDiagramIndicator(item, xCoord);
-		
-					this._updateMarker(item);
-		
-					this.fire("elechart_change", { data: item, xCoord: xCoord });
-				}
-			}
-		},
-
-		/*
-		 * Handles the moueseout over the chart.
-		 */
-		_onMouseOut: function() {
-			if (!this.options.detached) {
-				this._hideMarker();
-				this._chart._hideDiagramIndicator();
-			}
-
-			if (this._map) {
-				removeClass(this._map.getContainer(), 'elechart-hover');
-			}
-
-			this.fire("elechart_leave");
-		},
-
-		/**
-		 * Handles the drag event over the ruler filter.
-		 */
-		_onRulerFilter: function({coords}) {
-			this._updateMapSegments(coords);
-		},
-
-		/**
-		 * Toggle chart data on legend click
-		 */
-		_onToggleChart: function({ name, enabled }) {
-
-			this._chartEnabled = this._chart._hasActiveLayers();
-
-			// toggle layer visibility on empty chart
-			this._layers.eachLayer(layer => toggleClass(layer.getElement && layer.getElement(), this.options.polyline.className + ' ' + this.options.theme, this._chartEnabled));
-
-			// toggle option value (eg. altitude = { 'disabled' || 'enabled' })
-			this.options[name] = !enabled && this.options[name] == 'disabled' ? 'enabled' : 'disabled';
-
-			// remove marker on empty chart
-			if (!this._chartEnabled) {
-				this._chart._hideDiagramIndicator();
-				this._marker.remove();
-			}
-		},
-
-		/**
-		 * Simple GeoJSON Parser
-		 */
-		_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.import(this.__TOGEOJSON).then(() => {
-					let geojson;
-					try {
-						geojson = this._parseFromXMLString(data.trim());
-					} catch (e) {
-						geojson = this._parseFromGeoJSONString(data.toString());
-					}
-					if (geojson) {
-						geojson.name = geojson.name || (this._downloadURL || '').split('/').pop().split('#')[0].split('?')[0];
-					}
-					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;
-		},
-
-		/**
-		 * Add chart profile to diagram
-		 */
-		_registerAreaPath: function(props) {
-			this.on("elechart_init", () => this._chart._registerAreaPath(props));
-		},
-
-		/**
-		 * Add chart grid to diagram
-		 */
-		_registerAxisGrid: function(props) {
-			this.on("elechart_axis", () => this._chart._registerAxisGrid(props));
-		},
-
-		/**
-		 * Add chart axis to diagram
-		 */
-		_registerAxisScale: function(props) {
-			this.on("elechart_axis", () => this._chart._registerAxisScale(props));
-		},
-
-		/**
-		 * Add a point of interest over the diagram
-		 */
-		_registerCheckPoint: function(props) {
-			this.on("elechart_updated", () => this._chart._registerCheckPoint(props));
-		},
-
-
-		/**
-		 * Base handler for iterative track statistics (dist, time, z, slope, speed, acceleration, ...)
-		 */
-		 _registerDataAttribute: function(props) {
-
-			// parse of "coordinateProperties" for later usage
-			if (props.coordPropsToMeta) {
-				this.on("elepoint_init", (e) => props.coordPropsToMeta.call(this, e));
-			}
-
-			// prevent excessive variabile instanstations
-			let i, curr, prev, attr;
-
-			// save here a reference to last used point
-			let lastValid = null; 
-
-			// iteration
-			this.on("elepoint_added", ({index, point}) => {
-				i = index;
-
-				prev = curr ?? this._data[i]; // same as: this._data[i > 0 ? i - 1 : i]
-				curr = this._data[i];
-				attr = props.attr || props.name;
-
-				// check and fix missing data on last added point
-				if (props.skipNull === false) {
-					let curr = this._data[i][attr];
-					if(i > 0) {
-						let prev = this._data[i - 1][attr];
-						if (isNaN(prev)) {
-							if (!isNaN(lastValid) && !isNaN(curr)) {
-								prev   = (lastValid + curr) / 2;
-							} else if (!isNaN(lastValid)) {
-								prev   = lastValid;
-							} else if (!isNaN(curr)) {
-								prev   = curr;
-							}
-							if (!isNaN(prev)) return this._data.splice(i - 1, 1);
-							this._data[i - 1][attr] = prev;
-						}
-					}
-					// update reference to last used point (ie. if it has data)
-					if (!isNaN(curr)) {
-						lastValid = curr;
-					}
-				}
-
-				// retrieve point value
-				curr[attr] = props.pointToAttr.call(this, point, i);
-
-				// update "track_info" stats (min, max, avg, ...)
-				if (props.stats) {
-					for (const key in props.stats) {
-						let sname = (props.statsName || attr) + (key != '' ? '_' : '');
-						this.track_info[sname + key] = props.stats[key].call(this, curr[attr], this.track_info[sname + key], this._data.length);
-					}
-				}
-
-				// Limit "crazy" delta values.
-				if (props.deltaMax) {
-					curr[attr] =wrapDelta(curr[attr], prev[attr], props.deltaMax);
-				}
-				
-				// Range of acceptable values.
-				if (props.clampRange) {
-					curr[attr] = clamp(curr[attr], props.clampRange);
-				}
-
-				// Limit floating point precision.
-				if (!isNaN(props.decimals)) {
-					curr[attr] = round(curr[attr], props.decimals);
-				}
-
-				// update here some mixins (eg. complex "track_info" stuff)
-				if(props.onPointAdded) props.onPointAdded.call(this, curr[attr], i, point);
-			});
-		},
-
-		/**
-		 * Parse a module definition and attach related function listeners
-		 */
-		_registerHandler: function(props) {
-
-			// eg. L.Control.Altitude
-			if (typeof props === "function") {
-				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[name] || required) {
-
-				this._registerDataAttribute({
-					name,
-					attr,
-					skipNull,
-					deltaMax,
-					clampRange,
-					decimals,
-					coordPropsToMeta: coordPropsToMeta(coordinateProperties, meta || name, coordPropsToMeta$1),
-					pointToAttr,
-					onPointAdded,
-					stats,
-					statsName,
-				});
-
-				if (grid) {
-					this._registerAxisGrid(L.extend({ name }, grid));
-				}
-
-				if (this.options[name] !== "summary") {
-					if (scale) this._registerAxisScale(L.extend({ name, label: unit }, scale));
-					if (path)  this._registerAreaPath(L.extend({ name }, path));
-				}
-
-				if (tooltip || props.tooltips) {
-					each([tooltip, ...(props.tooltips || [])], t => t && this._registerTooltip(L.extend({ name }, t)));
-				}
-
-				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
-		 */
-		_registerTooltip: function(props) {
-			props.chart  && this.on("elechart_init",   () => this._chart._registerTooltip(L.extend({}, props, { value: props.chart })));
-			props.marker && this.on("elechart_marker", () => this._marker._registerTooltip(L.extend({}, props, { value: props.marker })));
-		},
-
-		/**
-		 * Add summary info to diagram
-		 */
-		_registerSummary: function(props) {
-			this.on('elechart_summary',  () => this._summary._registerSummary(props));
-		},
-
-		/*
-		 * Removes the drag rectangle and zoms back to the total extent of the data.
-		 */
-		_resetDrag: function() {
-			this._chart._resetDrag();
-			this._hideMarker();
-		},
-
-		/**
-		 * Resets drag, marker and bounds.
-		 */
-		_resetView: function() {
-			if (this._map && this._map._isFullscreen) return;
-			this._resetDrag();
-			this._hideMarker();
-			if (this.options.autofitBounds) {
-				this.fitBounds();
-			}
-		},
-
-		/**
-		 * Hacky way for handling chart resize. Deletes it and redraw chart.
-		 */
-		_resizeChart: function() {
-			if (this._container && style(this._container, "display") != "none") {
-				let opts = this.options;
-				let newWidth = opts.detached ? (this.eleDiv || this._container).offsetWidth : clamp(opts._maxWidth, [0, this._map.getContainer().clientWidth - 30]);
-				if (newWidth) {
-					opts.width = newWidth;
-					if (this._chart && this._chart._chart) {
-						this._chart._chart._resize(opts);
-						this._updateChart();
-					}
-				}
-				this._updateMapSegments();
-			}
-		},
-
-		/**
-		 * Collapse or Expand chart control.
-		 */
-		_toggle: function() {
-			hasClass(this._container, "elevation-expanded") ? this._collapse() : this._expand();
-		},
-
-		/**
-		 * Update map center and zoom (followMarker: true)
-		 */
-		_setMapView: function(item) {
-			if (this._map && this.options.followMarker) {
-				let zoom = this._map.getZoom();
-				let z    = this.options.zFollow;
-				if (typeof z === "number") {
-					this._map.setView(item.latlng, (zoom < z ? z : zoom), { animate: true, duration: 0.25 });
-				} else if (!this._map.getBounds().contains(item.latlng)) {
-					this._map.setView(item.latlng, zoom, { animate: true, duration: 0.25 });
-				}
-			}
-		},
-
-		/**
-		 * Calculates [x, y] domain and then update chart.
-		 */
-		_updateChart: function() {
-			if (this._chart && this._container) {
-				this.fire("elechart_axis");
-		
-				this._chart.update({ data: this._data, options: this.options });
-		
-				this._x     = this._chart._x;
-				this._y     = this._chart._y;
-		
-				this.fire('elechart_updated');		
-			}
-		},
-
-		/*
-		 * Update the position/height indicator marker drawn onto the map
-		 */
-		_updateMarker: function(item) {
-			if (this._marker) {
-				this._marker.update({
-					map         : this._map,
-					item        : item,
-					yCoordMax   : this._yCoordMax || 0,
-					options     : this.options
-				});
-			}
-		},
-
-		/**
-		 * Fix marker rotation on rotated maps
-		 */
-		_rotateMarker: function() {
-			if (this._marker) {
-				this._marker.update();
-			}
-		},
-
-		/**
-		 * Highlight track segments on the map.
-		 */
-		_updateMapSegments: function(coords) {
-			this._markedSegments.setLatLngs(coords || []);
-			if (coords && this._map && !this._map.hasLayer(this._markedSegments)) {
-				this._markedSegments.addTo(this._map);
-			}
-		},
-
-		/**
-		 * Update chart summary.
-		 */
-		_updateSummary: function() {
-			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 = (e) => {
-						e.preventDefault();
-						let event = { downloadLink: this.options.downloadLink, confirm: saveFile.bind(this, this._downloadURL) };
-						if (this.options.downloadLink == 'modal' && typeof CustomEvent === "function") {
-							document.dispatchEvent(new CustomEvent("eletrack_download", { detail: event }));
-						} else if (this.options.downloadLink == 'link' || this.options.downloadLink === true) {
-							event.confirm();
-						}
-						this.fire('eletrack_download', event);
-					};
-				}
-			}
-		},
-
-
-		/**
-		 * Calculates chart width.
-		 */
-		_width: function() {
-			if (this._chart) return this._chart._width();
-			const { width, margins } = this.options;
-			return width - margins.left - margins.right;
-		},
-
-		/**
-		 * Calculates chart height.
-		 */
-		_height: function() {
-			if (this._chart) return this._chart._height();
-			const { height, margins } = this.options;
-			return height - margins.top - margins.bottom;
-		},
-
+	// "leaflet-i18n" fallback
+	if (!L._ || !L.i18n) {
+		L._ = L.i18n = (string, data) => string;
+	}
+
+	// Prevent CORS issues for relative locations (dynamic import)
+	const baseURL = ((document.currentScript && document.currentScript.src) || (({ url: (typeof document === 'undefined' && typeof location === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : typeof document === 'undefined' ? location.href : (document.currentScript && document.currentScript.src || new URL('leaflet-elevation.js', document.baseURI).href)) }) && (typeof document === 'undefined' && typeof location === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : typeof document === 'undefined' ? location.href : (document.currentScript && document.currentScript.src || new URL('leaflet-elevation.js', document.baseURI).href)))).split("/").slice(0,-1).join("/") + '/';
+
+	const Elevation = L.Control.Elevation = L.Control.extend({
+
+		includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,
+
+		options: Options,
+		__mileFactor:     0.621371, // 1 km = (0.621371 mi)
+		__footFactor:     3.28084,  // 1 m  = (3.28084 ft)
+		__D3:            'https://unpkg.com/d3@6.5.0/dist/d3.min.js',
+		__TOGEOJSON:     'https://unpkg.com/@tmcw/togeojson@4.6.0/dist/togeojson.umd.js',
+		__LGEOMUTIL:     'https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js',
+		__LALMOSTOVER:   'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
+		__LHOTLINE:      '../libs/leaflet-hotline.min.js',
+		__LDISTANCEM:    '../libs/leaflet-distance-marker.min.js',
+		__LCHART:        '../src/components/chart.js',
+		__LMARKER:       '../src/components/marker.js',
+		__LSUMMARY:      '../src/components/summary.js',
+		__modulesFolder: '../src/handlers/',
+		__btnIcon:       '../images/elevation.svg',
+
+		/*
+		 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
+		 */
+		addData: function(d, layer) {
+			this.import(this.__D3)
+				.then(() => {
+					if (this._modulesLoaded) {
+						layer = layer ?? (d.on && d);
+						this._addData(d);
+						this._addLayer(layer);
+						this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
+					} else {
+						this.once('modules_loaded', () => this.addData(d,layer));
+					}
+				});
+		},
+
+		/**
+		 * Adds the control to the given map.
+		 */
+		addTo: function(map) {
+			if (this.options.detached) {
+				let parent = select(this.options.elevationDiv);
+				let eleDiv = this.onAdd(map);
+				parent ? append(parent, eleDiv) : insert(map.getContainer(), eleDiv, 'afterend');
+			} else {
+				L.Control.prototype.addTo.call(this, map);
+			}
+			return this;
+		},
+
+		/*
+		 * Reset data and display
+		 */
+		clear: function() {
+			if (this._marker)        this._marker.remove();
+			if (this._chart)         this._clearChart();
+			if (this._layers)        this._clearLayers(this._layers);
+			if (this._markers)       this._clearLayers(this._markers);
+			if (this._circleMarkers) this._circleMarkers.remove();
+			if (this._hotline)       this._clearLayers(this._hotline);
+
+			this._data      = [];
+			this.track_info = {};
+
+			this._fireEvt("eledata_clear");
+
+			this._updateChart();
+		},
+
+		_clearChart: function() {
+			if (this._events && this._events.elechart_updated) {
+				this._events.elechart_updated.forEach(({fn, ctx}) => this.off('elechart_updated', fn, ctx));
+			}
+			if (this._chart && this._chart._container) {
+				this._chart._container.selectAll('g.point .point').remove();
+				this._chart.clear();
+			}
+		},
+
+		_clearLayers: function(l) {
+			l = l || this._layers;
+			if (l && l.eachLayer) {
+				l.eachLayer(f => f.remove());
+				l.clearLayers();
+			}
+		},
+
+		/**
+		 * TODO: Create a base class to handle custom data attributes (heart rate, cadence, temperature, ...)
+		 * 
+		 * @link https://leafletjs.com/examples/extending/extending-3-controls.html#handlers
+		 */
+		// addHandler: function (name, HandlerClass) {
+		// 	if (HandlerClass) {
+		// 		let handler = this[name] = new HandlerClass(this);
+		// 		this.handlers.push(handler);
+		// 		if (this.options[name]) {
+		// 			handler.enable();
+		// 		}
+		// 	}
+		// 	return this;
+		// },
+
+		/**
+		 * Disable chart brushing.
+		 */
+		disableBrush: function() {
+			this._chart._brushEnabled = false;
+			this._resetDrag();
+		},
+
+		/**
+		 * Enable chart brushing.
+		 */
+		enableBrush: function() {
+			this._chart._brushEnabled = true;
+		},
+
+		/**
+		 * Disable chart zooming.
+		 */
+		disableZoom: function() {
+			this._chart._zoomEnabled = false;
+			this._chart._resetZoom();
+		},
+
+		/**
+		 * Enable chart zooming.
+		 */
+		enableZoom: function() {
+			this._chart._zoomEnabled = true;
+		},
+
+		/**
+		 * Sets a map view that contains the given geographical bounds.
+		 */
+		fitBounds: function(bounds) {
+			bounds = bounds || this.getBounds();
+			if (this._map && bounds.isValid()) this._map.fitBounds(bounds);
+		},
+
+		getBounds: function(data) {
+			return L.latLngBounds((data || this._data).map((d) => d.latlng));
+		},
+
+		/**
+		 * Get default zoom level (followMarker: true).
+		 */
+		getZFollow: function() {
+			return this.options.zFollow;
+		},
+
+		/**
+		 * Hide current elevation chart profile.
+		 */
+		hide: function() {
+			style(this._container, "display", "none");
+		},
+
+		/**
+		 * Initialize chart control "options" and "container".
+		 */
+		initialize: function(opts) {
+
+			opts = L.setOptions(this, opts);
+
+			this._data           = [];
+			this._layers         = L.featureGroup();
+			this._markers        = L.featureGroup();
+			this._hotline        = L.featureGroup();
+			this._circleMarkers  = L.featureGroup();
+			this._markedSegments = L.polyline([]);
+			this._start          = (opts.trkStart || Options.trkStart);
+			this._end            = (opts.trkEnd || Options.trkEnd);
+			this._chartEnabled   = true;
+			this._yCoordMax      = -Infinity;
+			this.track_info      = {};
+			//  this.handlers        = [];
+
+			if (opts.followMarker)             this._setMapView = throttle(this._setMapView, 300, this);
+			if (opts.legend)                   opts.margins.bottom += 30;
+			if (opts.theme)                    opts.polylineSegments.className += ' ' + opts.theme;
+			if (opts.wptIcons === true)        opts.wptIcons = Options.wptIcons;
+			if (opts.distanceMarkers === true) opts.distanceMarkers = Options.distanceMarkers;
+			if (opts.trkStart)                 this._start.addTo(this._circleMarkers);
+			if (opts.trkEnd)                   this._end.addTo(this._circleMarkers);
+
+
+			this._markedSegments.setStyle(opts.polylineSegments);
+
+			// Leaflet canvas renderer colors
+			L.extend(Colors, opts.colors || {});
+
+			// Various stuff
+			this._fixCanvasPaths();
+			this._fixTooltipSize();
+
+		},
+
+		/**
+		 * Javascript scripts downloader (lazy loader)
+		 */
+		import: function(src, condition) {
+			switch(src) {
+				case this.__D3:          condition = typeof d3 !== 'object'; break;
+				case this.__TOGEOJSON:   condition = typeof toGeoJSON !== 'object'; break;
+				case this.__LGEOMUTIL:   condition = typeof L.GeometryUtil !== 'object'; break;
+				case this.__LALMOSTOVER: condition = typeof L.Handler.AlmostOver  !== 'function'; break;
+				case this.__LDISTANCEM:  condition = typeof L.DistanceMarkers  !== 'function'; break;
+				case this.__LHOTLINE:    condition = typeof L.Hotline  !== 'function'; break;
+			}
+			src = (src.startsWith('../') || src.startsWith('./') ? baseURL : '') + src;
+			return condition !== false ? import(src) : Promise.resolve();
+		},
+
+		/**
+		 * Load elevation data (GPX, GeoJSON, KML or TCX).
+		 */
+		load: function(data) {
+			this._parseFromString(data).then( geojson => geojson ? this._loadLayer(geojson) : this._loadFile(data));
+		},
+
+		/**
+		 * Create container DOM element and related event listeners.
+		 * Called on control.addTo(map).
+		 */
+		onAdd: function(map) {
+			this._map = map;
+
+			let container = this._container = create("div", "elevation-control " + this.options.theme + " " + (this.options.detached ? 'elevation-detached' : 'leaflet-control'), this.options.detached ? { id: 'elevation-' + randomId() } : {});
+
+			if (!this.eleDiv) this.eleDiv = container;
+
+			this._loadModules(this.options.handlers).then(() => { // Inject here required modules (data handlers)
+				this._initChart(container);
+				this._initButton(container);
+				this._initSummary(container);
+				this._initMarker(map);
+				this._initLayer(map);
+				this._modulesLoaded = true;
+				this.fire('modules_loaded');
+			});
+
+			this.fire('add');
+
+			return container;
+		},
+
+		/**
+		 * Clean up control code and related event listeners.
+		 * Called on control.remove().
+		 */
+		onRemove: function(map) {
+			this._container = null;
+
+			map
+				.off('zoom viewreset zoomanim',      this._hideMarker,    this)
+				.off('resize',                       this._resetView,     this)
+				.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(document,           'keydown',     this._onKeyDown,     this);
+
+			this
+				.off('eledata_added eledata_loaded', this._updateChart,   this)
+				.off('eledata_added eledata_loaded', this._updateSummary, this);
+
+			this.fire('remove');
+		},
+
+		/**
+		 * Redraws the chart control. Sometimes useful after screen resize.
+		 */
+		redraw: function() {
+			this._resizeChart();
+		},
+
+		/**
+		 * Set default zoom level (followMarker: true).
+		 */
+		setZFollow: function(zoom) {
+			this.options.zFollow = zoom;
+		},
+
+		/**
+		 * Hide current elevation chart profile.
+		 */
+		show: function() {
+			style(this._container, "display", "block");
+		},
+
+		/*
+		 * Parsing data either from GPX or GeoJSON and update the diagram data
+		 */
+		_addData: function(d) {
+			if (!d) {
+				return;
+			}
+
+			// 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);
+					}
+				}
+			}
+
+			// Fallback for leaflet layers (eg. L.Gpx)
+			if (d._latlngs) {
+				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, 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 };
+				
+				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, isMulti: nestingLevel });
+
+				this._addPoint(
+					point.lat ?? point[1], 
+					point.lng ?? point[0],
+					point.alt ?? point.meta.ele ?? point[2]
+				);
+
+				this.fire("elepoint_added", { point: point, index: this._data.length - 1 });
+
+				if (this._yCoordMax < this._data[this._data.length - 1][this.options.yAttr]) this._yCoordMax = this._data[this._data.length - 1][this.options.yAttr];
+			});
+
+			this.fire("eletrack_added", { coords: coords, index: this._data.length - 1 });
+		},
+
+		/*
+		 * Parse and push a single (x, y, z) point to current elevation profile.
+		 */
+		_addPoint: function(x, y, z) {
+			if (this.options.reverseCoords) {
+				[x, y] = [y, x];
+			}
+
+			this._data.push({
+				x: x,
+				y: y,
+				z: z,
+				latlng: L.latLng(x, y, z)
+			});
+
+			this.fire("eledata_updated", { index: this._data.length - 1 });
+		},
+
+		_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', ({target, type}) => L.DistanceMarkers && target instanceof L.Polyline && target[type + 'DistanceMarkers']());
+			}
+			return layer;
+		},
+
+		_addMarker: function(marker) {
+			if (marker) this._markers.addLayer(marker);
+			return marker;
+		},
+
+		/**
+		 * Initialize "L.AlmostOver" integration
+		 */
+		_initAlmostOverHandler: function(map, layer) {
+			return (map && this.options.almostOver && !L.Browser.mobile) ? Promise.all([
+				this.import(this.__LGEOMUTIL),
+				this.import(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._onMouseMoveLayer(e))
+						.on('almost:out',  (e) => this._onMouseOut(e));
+				}
+			}) : Promise.resolve();
+		},
+
+		/**
+		 * Initialize "L.DistanceMarkers" integration
+		 */
+		_initDistanceMarkers: function() {
+			return this.options.distanceMarkers ? Promise.all([this.import(this.__LGEOMUTIL), this.import(this.__LDISTANCEM)]) : Promise.resolve();
+		},
+
+		_initHotLine: function(layer) {
+			let prop = typeof this.options.hotline == 'string' ? this.options.hotline : 'elevation';
+			return this.options.hotline ? this.import(this.__LHOTLINE)
+				.then(() => {
+					layer.eachLayer((trkseg) => {
+						if(trkseg.feature.geometry.type != "Point") {
+							let geo = L.geoJson(trkseg.toGeoJSON(), { coordsToLatLng: (coords) => L.latLng(coords[0], coords[1], coords[2] * (this.options.altitudeFactor || 1))});
+							let line = L.hotline(geo.toGeoJSON().features[0].geometry.coordinates, {
+								min: isFinite(this.track_info[prop + '_min']) ? this.track_info[prop + '_min'] : 0,
+								max: isFinite(this.track_info[prop + '_max']) ? this.track_info[prop + '_max'] : 1,
+								palette: {
+									0.0: '#008800',
+									0.5: '#ffff00',
+									1.0: '#ff0000'
+								},
+								weight: 5,
+								outlineColor: '#000000',
+								outlineWidth: 1
+							}).addTo(this._hotline);
+							let alpha = trkseg.options.style && trkseg.options.style.opacity || 1;
+							trkseg.on('add remove', ({type}) => {
+								trkseg.setStyle({opacity: (type == 'add' ? 0 : alpha)});
+								line[(type == 'add' ? 'addTo' : 'removeFrom')](trkseg._map);
+								if (line._renderer) line._renderer._container.parentElement.insertBefore(line._renderer._container, line._renderer._container.parentElement.firstChild);
+							});
+						}
+					});
+				}) : Promise.resolve();
+		},
+
+		/**
+		 * Initialize "L.AlmostOver" and "L.DistanceMarkers"
+		 */
+		_initMapIntegrations: function(layer) {
+			let map = this._map;
+			if (map) {
+				if (this._data.length) {
+					this._start.setLatLng(this._data[0].latlng);
+					this._end.setLatLng(this._data[this._data.length -1].latlng);
+				}
+				Promise.all([
+					this._initHotLine(layer),
+					this._initAlmostOverHandler(map, layer),
+					this._initDistanceMarkers(),
+				]).then(() => {
+					if	(this.options.polyline) {
+						layer.addTo(map);
+						this._circleMarkers.addTo(map);
+					}
+					if (this.options.autofitBounds) {
+						this.fitBounds(layer.getBounds());
+					}
+					map.invalidateSize();
+				});
+			} else {
+				this.once('add', () => this._initMapIntegrations(layer));
+			}
+		},
+
+		/*
+		 * Collapse current chart control.
+		 */
+		_collapse: function() {
+			replaceClass(this._container, 'elevation-expanded', 'elevation-collapsed');
+			if (this._map) this._map.invalidateSize();
+		},
+
+		/*
+		 * Expand current chart control.
+		 */
+		_expand: function() {
+			replaceClass(this._container, 'elevation-collapsed', 'elevation-expanded');
+			if (this._map) this._map.invalidateSize();
+		},
+
+		/**
+		 * Add some basic colors to leaflet canvas renderer (preferCanvas: true).
+		 */
+		_fixCanvasPaths: function() {
+			let oldProto = L.Canvas.prototype._fillStroke;
+			let control  = this;
+
+			let theme      = this.options.theme.split(' ')[0].replace('-theme', '');
+			let color      = Colors[theme] || {};
+
+			L.Canvas.include({
+				_fillStroke: function(ctx, layer) {
+					if (control._layers.hasLayer(layer)) {
+
+						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', ({data, xCoord}) => {
+					if (this._chartEnabled) {
+						this._chart._showDiagramIndicator(data, xCoord);
+						this._chart._showDiagramIndicator(data, xCoord);
+					}
+					this._updateMarker(data);
+				})
+			);
+		},
+
+		/*
+		 * Finds a data entry for the given LatLng
+		 */
+		_findItemForLatLng: function(latlng) {
+			return this._data[this._chart._findIndexForLatLng(latlng)];
+		},
+
+		/*
+		 * Finds a data entry for the given xDiagCoord
+		 */
+		_findItemForX: function(x) {
+			return this._data[this._chart._findIndexForXCoord(x)];
+		},
+
+		/**
+		 * Fires an event of the specified type.
+		 */
+		_fireEvt: function(type, data, propagate) {
+			if (this.fire) this.fire(type, data, propagate);
+			if (this._map) this._map.fire(type, data, propagate);
+		},
+
+		/*
+		 * Hides the position/height indicator marker drawn onto the map
+		 */
+		_hideMarker: function() {
+			if (this.options.autohideMarker) {
+				this._marker.remove();
+			}
+		},
+
+		/**
+		 * Generate "svg" chart (DOM element).
+		 */
+		_initChart: function(container) {
+			let opts = this.options;
+			let map  = this._map;
+
+			if (opts.detached) {
+				let { offsetWidth, offsetHeight}             = this.eleDiv;
+				if (offsetWidth > 0)             opts.width  = offsetWidth;
+				if (offsetHeight > 20)           opts.height = offsetHeight - 20; // 20 = horizontal scrollbar size.
+			} else {
+				let { clientWidth }                          = map.getContainer();
+				opts._maxWidth                               = opts._maxWidth > opts.width ? opts._maxWidth : opts.width;
+				this._container.style.maxWidth               = opts._maxWidth + 'px';
+				if (opts._maxWidth > clientWidth) opts.width = clientWidth - 30;
+			}
+
+			Promise.all([
+				this.import(this.__D3),
+				this.import(this.__LCHART)
+			]).then((m) => {
+
+				let chart = this._chart = new (m[1] || Elevation).Chart(opts, this);
+		
+				this._x     = this._chart._x;
+				this._y     = this._chart._y;
+		
+				d3
+					.select(container)
+					.call(chart.render());
+		
+				chart
+					.on('reset_drag',      this._hideMarker,     this)
+					.on('mouse_enter',     this._onMouseEnter,   this)
+					.on('dragged',         this._onDragEnd,      this)
+					.on('mouse_move',      this._onMouseMove,    this)
+					.on('mouse_out',       this._onMouseOut,     this)
+					.on('ruler_filter',    this._onRulerFilter,  this)
+					.on('zoom',            this._updateChart,    this)
+					.on('elepath_toggle',  this._onToggleChart,  this)
+					.on('margins_updated', this._resizeChart,    this);
+		
+		
+				this.fire("elechart_init");
+
+				map
+					.on('zoom viewreset zoomanim',      this._hideMarker,    this)
+					.on('resize',                       this._resetView,     this)
+					.on('resize',                       this._resizeChart,   this)
+					.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(document,           'keydown',     this._onKeyDown,     this);
+
+				this
+					.on('eledata_added eledata_loaded', this._updateChart,   this)
+					.on('eledata_added eledata_loaded', this._updateSummary, this);
+
+				this._updateChart();
+				this._updateSummary();
+			});
+
+
+		},
+
+		_initLayer: function() {
+			this._layers
+				.on('layeradd layerremove', ({layer, type}) => {
+					let node  = layer.getElement && layer.getElement();
+					toggleClass(node,  this.options.polyline.className + ' ' + this.options.theme, type == 'layeradd');
+					toggleEvent(layer, "mousemove", this._onMouseMoveLayer.bind(this),             type == 'layeradd');
+					toggleEvent(layer, "mouseout",  this._onMouseOut.bind(this),                   type == 'layeradd');
+				});
+		},
+
+		_initMarker: function(map) {
+			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.
+				pane.style.pointerEvents = 'none';
+			}
+
+			if (this._renderer) this._renderer.remove();
+			this._renderer               = L.svg({ pane: "elevationPane" }).addTo(this._map); // default leaflet svg renderer
+
+			Promise.all([
+				this.import(this.__D3),
+				this.import(this.__LMARKER)
+			]).then((m) => {
+				this._marker             = new (m[1] || Elevation).Marker(this.options, this);
+				this.fire("elechart_marker");
+			});
+		},
+
+		/**
+		 * Inspired by L.Control.Layers
+		 */
+		_initButton: function(container) {
+			L.DomEvent
+				.disableClickPropagation(container)
+				.disableScrollPropagation(container);
+
+			this.options.collapsed ? this._collapse() : this._expand();
+
+			if (this.options.autohide) {
+				on(container, 'mouseover', this._expand,   this);
+				on(container, 'mouseout',  this._collapse, this);
+				this._map.on('click', this._collapse, this);
+			}
+
+			if (this.options.closeBtn) {
+				let link = this._button = create('a', "elevation-toggle-icon", { href: '#', title: L._('Elevation'), }, container);
+				on(link, 'click', L.DomEvent.stop);
+				on(link, 'click', this._toggle, this);
+				on(link, 'focus', this._toggle, this);
+				fetch(this.__btnIcon).then(r => r.ok && r.text().then(img => link.innerHTML = img));
+			}
+		},
+
+		_initSummary: function(container) {
+			this.import(this.__LSUMMARY).then((m)=>{
+				this._summary = new (m || Elevation).Summary({ summary: this.options.summary }, this);
+
+				this.on('elechart_init', () => {
+					d3.select(container).call(this._summary.render());
+				});
+			});
+		},
+
+		/**
+		 * 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));
+		},
+
+		/**
+		 * Dynamically import only required javascript modules (code splitting)
+		 */
+		_loadModules: function(handlers) {
+			// First map known classnames (eg. "Altitude" --> L.Control.Elevation.Altitude)
+			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'))
+			let modules = handlers.map(file => (typeof file === 'string' && this.import(this.__modulesFolder + file.toLowerCase() + '.js')) || (file instanceof Promise && file) || Promise.resolve());
+			return Promise.all(modules).then((m) => {
+				each(m, (exported, i) => {
+					let fn = exported && Object.keys(exported)[0];
+					if (fn) {
+						handlers[i] = Elevation[fn] = (Elevation[fn] ?? exported[fn]);
+					}
+				});
+				each(handlers, h => ["function", "object"].includes(typeof h) && this._registerHandler(h));
+			});
+		},
+
+		/**
+		 * Simple GeoJSON data loader (L.GeoJSON).
+		 */
+		_loadLayer: function(geojson) {
+			let { polyline, theme, waypoints, wptIcons, wptLabels, distanceMarkers } = this.options;
+			let style = L.extend({}, polyline);
+
+			if (theme) {
+				style.className += ' ' + theme;
+			}
+
+			if (geojson.name) {
+				this.track_info.name = geojson.name;
+			}
+
+			let layer = L.geoJson(geojson, {
+				distanceMarkers: distanceMarkers,
+				style: style,
+				pointToLayer: (feature, latlng) => {
+					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 : '')
+							});
+						}
+						// 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 : ''))
+							});
+						}
+					}
+				},
+				onEachFeature: (feature, layer) => feature.geometry && feature.geometry.type != 'Point' && this.addData(feature, layer),
+			});
+
+			this.import(this.__D3).then(() => {
+				this._initMapIntegrations(layer);
+				this._fireEvt("eledata_loaded", { data: geojson, layer: layer, name: this.track_info.name, track_info: this.track_info });
+			});
+
+			return layer;
+		},
+
+		_onDragEnd: function({ dragstart, dragend}) {
+			this._hideMarker();
+			this.fitBounds(L.latLngBounds([dragstart.latlng, dragend.latlng]));
+
+			this.fire("elechart_dragged");
+		},
+
+		_onKeyDown: function({key}) {
+			if(!this.options.detached && key === "Escape"){
+				this._collapse();
+			}	},
+
+		/**
+		 * Trigger mouseenter event.
+		 */
+		_onMouseEnter: function() {
+			this.fire('elechart_enter');
+		},
+
+		/*
+		 * Handles the moueseover the chart and displays distance and altitude level.
+		 */
+		_onMouseMove: function({xCoord}) {
+			if (this._chartEnabled && this._data.length) {
+				let item = this._findItemForX(xCoord);
+				if (item) {
+					if (this._chartEnabled) this._chart._showDiagramIndicator(item, xCoord);
+
+					this._updateMarker(item);
+					this._setMapView(item);
+
+					if (this._map) {
+						addClass(this._map.getContainer(), 'elechart-hover');
+					}
+
+					this.fire("elechart_change", { data: item, xCoord: xCoord });
+					this.fire("elechart_hover",  { data: item, xCoord: xCoord });
+				}
+			}
+		},
+
+		/*
+		 * Handles mouseover events of the data layers on the map.
+		 */
+		_onMouseMoveLayer: function({latlng}) {
+			if (this._data.length) {
+				let item = this._findItemForLatLng(latlng);
+				if (item) {
+					let xCoord = item.xDiagCoord;
+		
+					if (this._chartEnabled) this._chart._showDiagramIndicator(item, xCoord);
+		
+					this._updateMarker(item);
+		
+					this.fire("elechart_change", { data: item, xCoord: xCoord });
+				}
+			}
+		},
+
+		/*
+		 * Handles the moueseout over the chart.
+		 */
+		_onMouseOut: function() {
+			if (!this.options.detached) {
+				this._hideMarker();
+				this._chart._hideDiagramIndicator();
+			}
+
+			if (this._map) {
+				removeClass(this._map.getContainer(), 'elechart-hover');
+			}
+
+			this.fire("elechart_leave");
+		},
+
+		/**
+		 * Handles the drag event over the ruler filter.
+		 */
+		_onRulerFilter: function({coords}) {
+			this._updateMapSegments(coords);
+		},
+
+		/**
+		 * Toggle chart data on legend click
+		 */
+		_onToggleChart: function({ name, enabled }) {
+
+			this._chartEnabled = this._chart._hasActiveLayers();
+
+			// toggle layer visibility on empty chart
+			this._layers.eachLayer(layer => toggleClass(layer.getElement && layer.getElement(), this.options.polyline.className + ' ' + this.options.theme, this._chartEnabled));
+
+			// toggle option value (eg. altitude = { 'disabled' || 'enabled' })
+			this.options[name] = !enabled && this.options[name] == 'disabled' ? 'enabled' : 'disabled';
+
+			// remove marker on empty chart
+			if (!this._chartEnabled) {
+				this._chart._hideDiagramIndicator();
+				this._marker.remove();
+			}
+		},
+
+		/**
+		 * Simple GeoJSON Parser
+		 */
+		_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.import(this.__TOGEOJSON).then(() => {
+					let geojson;
+					try {
+						geojson = this._parseFromXMLString(data.trim());
+					} catch (e) {
+						geojson = this._parseFromGeoJSONString(data.toString());
+					}
+					if (geojson) {
+						geojson.name = geojson.name || (this._downloadURL || '').split('/').pop().split('#')[0].split('?')[0];
+					}
+					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;
+		},
+
+		/**
+		 * Add chart profile to diagram
+		 */
+		_registerAreaPath: function(props) {
+			this.on("elechart_init", () => this._chart._registerAreaPath(props));
+		},
+
+		/**
+		 * Add chart grid to diagram
+		 */
+		_registerAxisGrid: function(props) {
+			this.on("elechart_axis", () => this._chart._registerAxisGrid(props));
+		},
+
+		/**
+		 * Add chart axis to diagram
+		 */
+		_registerAxisScale: function(props) {
+			this.on("elechart_axis", () => this._chart._registerAxisScale(props));
+		},
+
+		/**
+		 * Add a point of interest over the diagram
+		 */
+		_registerCheckPoint: function(props) {
+			this.on("elechart_updated", () => this._chart._registerCheckPoint(props));
+		},
+
+
+		/**
+		 * Base handler for iterative track statistics (dist, time, z, slope, speed, acceleration, ...)
+		 */
+		 _registerDataAttribute: function(props) {
+
+			// parse of "coordinateProperties" for later usage
+			if (props.coordPropsToMeta) {
+				this.on("elepoint_init", (e) => props.coordPropsToMeta.call(this, e));
+			}
+
+			// prevent excessive variabile instanstations
+			let i, curr, prev, attr;
+
+			// save here a reference to last used point
+			let lastValid = null; 
+
+			// iteration
+			this.on("elepoint_added", ({index, point}) => {
+				i = index;
+
+				prev = curr ?? this._data[i]; // same as: this._data[i > 0 ? i - 1 : i]
+				curr = this._data[i];
+				attr = props.attr || props.name;
+
+				// check and fix missing data on last added point
+				if (props.skipNull === false) {
+					let curr = this._data[i][attr];
+					if(i > 0) {
+						let prev = this._data[i - 1][attr];
+						if (isNaN(prev)) {
+							if (!isNaN(lastValid) && !isNaN(curr)) {
+								prev   = (lastValid + curr) / 2;
+							} else if (!isNaN(lastValid)) {
+								prev   = lastValid;
+							} else if (!isNaN(curr)) {
+								prev   = curr;
+							}
+							if (!isNaN(prev)) return this._data.splice(i - 1, 1);
+							this._data[i - 1][attr] = prev;
+						}
+					}
+					// update reference to last used point (ie. if it has data)
+					if (!isNaN(curr)) {
+						lastValid = curr;
+					}
+				}
+
+				// retrieve point value
+				curr[attr] = props.pointToAttr.call(this, point, i);
+
+				// update "track_info" stats (min, max, avg, ...)
+				if (props.stats) {
+					for (const key in props.stats) {
+						let sname = (props.statsName || attr) + (key != '' ? '_' : '');
+						this.track_info[sname + key] = props.stats[key].call(this, curr[attr], this.track_info[sname + key], this._data.length);
+					}
+				}
+
+				// Limit "crazy" delta values.
+				if (props.deltaMax) {
+					curr[attr] =wrapDelta(curr[attr], prev[attr], props.deltaMax);
+				}
+				
+				// Range of acceptable values.
+				if (props.clampRange) {
+					curr[attr] = clamp(curr[attr], props.clampRange);
+				}
+
+				// Limit floating point precision.
+				if (!isNaN(props.decimals)) {
+					curr[attr] = round(curr[attr], props.decimals);
+				}
+
+				// update here some mixins (eg. complex "track_info" stuff)
+				if(props.onPointAdded) props.onPointAdded.call(this, curr[attr], i, point);
+			});
+		},
+
+		/**
+		 * Parse a module definition and attach related function listeners
+		 */
+		_registerHandler: function(props) {
+
+			// eg. L.Control.Altitude
+			if (typeof props === "function") {
+				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[name] || required) {
+
+				this._registerDataAttribute({
+					name,
+					attr,
+					skipNull,
+					deltaMax,
+					clampRange,
+					decimals,
+					coordPropsToMeta: coordPropsToMeta(coordinateProperties, meta || name, coordPropsToMeta$1),
+					pointToAttr,
+					onPointAdded,
+					stats,
+					statsName,
+				});
+
+				if (grid) {
+					this._registerAxisGrid(L.extend({ name }, grid));
+				}
+
+				if (this.options[name] !== "summary") {
+					if (scale) this._registerAxisScale(L.extend({ name, label: unit }, scale));
+					if (path)  this._registerAreaPath(L.extend({ name }, path));
+				}
+
+				if (tooltip || props.tooltips) {
+					each([tooltip, ...(props.tooltips || [])], t => t && this._registerTooltip(L.extend({ name }, t)));
+				}
+
+				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
+		 */
+		_registerTooltip: function(props) {
+			props.chart  && this.on("elechart_init",   () => this._chart._registerTooltip(L.extend({}, props, { value: props.chart })));
+			props.marker && this.on("elechart_marker", () => this._marker._registerTooltip(L.extend({}, props, { value: props.marker })));
+		},
+
+		/**
+		 * Add summary info to diagram
+		 */
+		_registerSummary: function(props) {
+			this.on('elechart_summary',  () => this._summary._registerSummary(props));
+		},
+
+		/*
+		 * Removes the drag rectangle and zoms back to the total extent of the data.
+		 */
+		_resetDrag: function() {
+			this._chart._resetDrag();
+			this._hideMarker();
+		},
+
+		/**
+		 * Resets drag, marker and bounds.
+		 */
+		_resetView: function() {
+			if (this._map && this._map._isFullscreen) return;
+			this._resetDrag();
+			this._hideMarker();
+			if (this.options.autofitBounds) {
+				this.fitBounds();
+			}
+		},
+
+		/**
+		 * Hacky way for handling chart resize. Deletes it and redraw chart.
+		 */
+		_resizeChart: function() {
+			if (this._container && style(this._container, "display") != "none") {
+				let opts = this.options;
+				let newWidth = opts.detached ? (this.eleDiv || this._container).offsetWidth : clamp(opts._maxWidth, [0, this._map.getContainer().clientWidth - 30]);
+				if (newWidth) {
+					opts.width = newWidth;
+					if (this._chart && this._chart._chart) {
+						this._chart._chart._resize(opts);
+						this._updateChart();
+					}
+				}
+				this._updateMapSegments();
+			}
+		},
+
+		/**
+		 * Collapse or Expand chart control.
+		 */
+		_toggle: function() {
+			hasClass(this._container, "elevation-expanded") ? this._collapse() : this._expand();
+		},
+
+		/**
+		 * Update map center and zoom (followMarker: true)
+		 */
+		_setMapView: function(item) {
+			if (this._map && this.options.followMarker) {
+				let zoom = this._map.getZoom();
+				let z    = this.options.zFollow;
+				if (typeof z === "number") {
+					this._map.setView(item.latlng, (zoom < z ? z : zoom), { animate: true, duration: 0.25 });
+				} else if (!this._map.getBounds().contains(item.latlng)) {
+					this._map.setView(item.latlng, zoom, { animate: true, duration: 0.25 });
+				}
+			}
+		},
+
+		/**
+		 * Calculates [x, y] domain and then update chart.
+		 */
+		_updateChart: function() {
+			if (this._chart && this._container) {
+				this.fire("elechart_axis");
+		
+				this._chart.update({ data: this._data, options: this.options });
+		
+				this._x     = this._chart._x;
+				this._y     = this._chart._y;
+		
+				this.fire('elechart_updated');		
+			}
+		},
+
+		/*
+		 * Update the position/height indicator marker drawn onto the map
+		 */
+		_updateMarker: function(item) {
+			if (this._marker) {
+				this._marker.update({
+					map         : this._map,
+					item        : item,
+					yCoordMax   : this._yCoordMax || 0,
+					options     : this.options
+				});
+			}
+		},
+
+		/**
+		 * Fix marker rotation on rotated maps
+		 */
+		_rotateMarker: function() {
+			if (this._marker) {
+				this._marker.update();
+			}
+		},
+
+		/**
+		 * Highlight track segments on the map.
+		 */
+		_updateMapSegments: function(coords) {
+			this._markedSegments.setLatLngs(coords || []);
+			if (coords && this._map && !this._map.hasLayer(this._markedSegments)) {
+				this._markedSegments.addTo(this._map);
+			}
+		},
+
+		/**
+		 * Update chart summary.
+		 */
+		_updateSummary: function() {
+			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 = (e) => {
+						e.preventDefault();
+						let event = { downloadLink: this.options.downloadLink, confirm: saveFile.bind(this, this._downloadURL) };
+						if (this.options.downloadLink == 'modal' && typeof CustomEvent === "function") {
+							document.dispatchEvent(new CustomEvent("eletrack_download", { detail: event }));
+						} else if (this.options.downloadLink == 'link' || this.options.downloadLink === true) {
+							event.confirm();
+						}
+						this.fire('eletrack_download', event);
+					};
+				}
+			}
+		},
+
+
+		/**
+		 * Calculates chart width.
+		 */
+		_width: function() {
+			if (this._chart) return this._chart._width();
+			const { width, margins } = this.options;
+			return width - margins.left - margins.right;
+		},
+
+		/**
+		 * Calculates chart height.
+		 */
+		_height: function() {
+			if (this._chart) return this._chart._height();
+			const { height, margins } = this.options;
+			return height - margins.top - margins.bottom;
+		},
+
 	});
 
 	/*