@raruto/leaflet-elevation 2.3.2 → 2.3.4

package/dist/leaflet-elevation.js

@@ -320,7 +320,7 @@
 		/*
 		 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
 		 */
-		addData: function(d, layer) {
+		addData(d, layer) {
 			this.import(this.__D3)
 				.then(() => {
 					if (this._modulesLoaded) {
@@ -337,7 +337,7 @@
 		/**
 		 * Adds the control to the given map.
 		 */
-		addTo: function(map) {
+		addTo(map) {
 			if (this.options.detached) {
 				let parent = select(this.options.elevationDiv);
 				let eleDiv = this.onAdd(map);
@@ -351,12 +351,13 @@
 		/*
 		 * Reset data and display
 		 */
-		clear: function() {
+		clear() {
 			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._hotline.eachLayer(l => l.options.renderer.remove()); // hotfix for: https://github.com/Raruto/leaflet-elevation/issues/233
 			if (this._hotline)       this._clearLayers(this._hotline);
 
 			this._data      = [];
@@ -367,7 +368,7 @@
 			this._updateChart();
 		},
 
-		_clearChart: function() {
+		_clearChart() {
 			if (this._events && this._events.elechart_updated) {
 				this._events.elechart_updated.forEach(({fn, ctx}) => this.off('elechart_updated', fn, ctx));
 			}
@@ -377,7 +378,7 @@
 			}
 		},
 
-		_clearLayers: function(l) {
+		_clearLayers(l) {
 			l = l || this._layers;
 			if (l && l.eachLayer) {
 				l.eachLayer(f => f.remove());
@@ -404,7 +405,7 @@
 		/**
 		 * Disable chart brushing.
 		 */
-		disableBrush: function() {
+		disableBrush() {
 			this._chart._brushEnabled = false;
 			this._resetDrag();
 		},
@@ -412,14 +413,14 @@
 		/**
 		 * Enable chart brushing.
 		 */
-		enableBrush: function() {
+		enableBrush() {
 			this._chart._brushEnabled = true;
 		},
 
 		/**
 		 * Disable chart zooming.
 		 */
-		disableZoom: function() {
+		disableZoom() {
 			this._chart._zoomEnabled = false;
 			this._chart._resetZoom();
 		},
@@ -427,40 +428,40 @@
 		/**
 		 * Enable chart zooming.
 		 */
-		enableZoom: function() {
+		enableZoom() {
 			this._chart._zoomEnabled = true;
 		},
 
 		/**
 		 * Sets a map view that contains the given geographical bounds.
 		 */
-		fitBounds: function(bounds) {
+		fitBounds(bounds) {
 			bounds = bounds || this.getBounds();
 			if (this._map && bounds.isValid()) this._map.fitBounds(bounds);
 		},
 
-		getBounds: function(data) {
+		getBounds(data) {
 			return L.latLngBounds((data || this._data).map((d) => d.latlng));
 		},
 
 		/**
 		 * Get default zoom level (followMarker: true).
 		 */
-		getZFollow: function() {
+		getZFollow() {
 			return this.options.zFollow;
 		},
 
 		/**
 		 * Hide current elevation chart profile.
 		 */
-		hide: function() {
+		hide() {
 			style(this._container, "display", "none");
 		},
 
 		/**
 		 * Initialize chart control "options" and "container".
 		 */
-		initialize: function(opts) {
+		initialize(opts) {
 
 			// opts = L.setOptions(this, opts);
 
@@ -503,7 +504,7 @@
 		/**
 		 * Javascript scripts downloader (lazy loader)
 		 */
-		import: function(src, condition) {
+		import(src, condition) {
 			switch(src) {
 				case this.__D3:          condition = typeof d3 !== 'object'; break;
 				case this.__TOGEOJSON:   condition = typeof toGeoJSON !== 'object'; break;
@@ -519,7 +520,7 @@
 		/**
 		 * Load elevation data (GPX, GeoJSON, KML or TCX).
 		 */
-		load: function(data) {
+		load(data) {
 			this._parseFromString(data).then( geojson => geojson ? this._loadLayer(geojson) : this._loadFile(data));
 		},
 
@@ -527,7 +528,7 @@
 		 * Create container DOM element and related event listeners.
 		 * Called on control.addTo(map).
 		 */
-		onAdd: function(map) {
+		onAdd(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() } : {});
@@ -553,7 +554,7 @@
 		 * Clean up control code and related event listeners.
 		 * Called on control.remove().
 		 */
-		onRemove: function(map) {
+		onRemove(map) {
 			this._container = null;
 
 			map
@@ -576,28 +577,28 @@
 		/**
 		 * Redraws the chart control. Sometimes useful after screen resize.
 		 */
-		redraw: function() {
+		redraw() {
 			this._resizeChart();
 		},
 
 		/**
 		 * Set default zoom level (followMarker: true).
 		 */
-		setZFollow: function(zoom) {
+		setZFollow(zoom) {
 			this.options.zFollow = zoom;
 		},
 
 		/**
 		 * Hide current elevation chart profile.
 		 */
-		show: function() {
+		show() {
 			style(this._container, "display", "block");
 		},
 
 		/*
 		 * Parsing data either from GPX or GeoJSON and update the diagram data
 		 */
-		_addData: function(d) {
+		_addData(d) {
 			if (!d) {
 				return;
 			}
@@ -627,7 +628,7 @@
 		/*
 		 * Parsing of GeoJSON data lines and their elevation in z-coordinate
 		 */
-		_addGeoJSONData: function(coords, properties, nestingLevel) {
+		_addGeoJSONData(coords, properties, nestingLevel) {
 
 			// "coordinateProperties" property is generated inside "@tmcw/toGeoJSON"
 			let props  = (properties && properties.coordinateProperties) || properties;
@@ -658,7 +659,7 @@
 		/*
 		 * Parse and push a single (x, y, z) point to current elevation profile.
 		 */
-		_addPoint: function(x, y, z) {
+		_addPoint(x, y, z) {
 			if (this.options.reverseCoords) {
 				[x, y] = [y, x];
 			}
@@ -673,7 +674,7 @@
 			this.fire("eledata_updated", { index: this._data.length - 1 });
 		},
 
-		_addLayer: function(layer) {
+		_addLayer(layer) {
 			if (layer) this._layers.addLayer(layer);
 			// Postpone adding the distance markers (lazy: true)
 			if (layer && this.options.distanceMarkers && this.options.distanceMarkers.lazy) {
@@ -682,7 +683,7 @@
 			return layer;
 		},
 
-		_addMarker: function(marker) {
+		_addMarker(marker) {
 			if (marker) this._markers.addLayer(marker);
 			return marker;
 		},
@@ -690,7 +691,7 @@
 		/**
 		 * Initialize "L.AlmostOver" integration
 		 */
-		_initAlmostOverHandler: function(map, layer) {
+		_initAlmostOverHandler(map, layer) {
 			return (map && this.options.almostOver && !L.Browser.mobile) ? Promise.all([
 				this.import(this.__LGEOMUTIL),
 				this.import(this.__LALMOSTOVER)
@@ -699,8 +700,14 @@
 				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));
+						.on('almost:move', this._onMouseMoveLayer, this)
+						.on('almost:out', this._onMouseOut, this);
+					this.once('eledata_clear', () => {
+						map.almostOver.removeLayer(layer);
+						map
+						.off('almost:move', this._onMouseMoveLayer, this)
+						.off('almost:out', this._onMouseOut, this);
+					});
 				}
 			}) : Promise.resolve();
 		},
@@ -708,21 +715,21 @@
 		/**
 		 * Initialize "L.DistanceMarkers" integration
 		 */
-		_initDistanceMarkers: function() {
+		_initDistanceMarkers() {
 			return this.options.distanceMarkers ? Promise.all([this.import(this.__LGEOMUTIL), this.import(this.__LDISTANCEM)]) : Promise.resolve();
 		},
 
 		/**
 		 * Initialize "L.Control.EdgeScale" integration
 		 */
-		_initEdgeScale: function(map) {
+		_initEdgeScale(map) {
 			return this.options.edgeScale ? Promise.all([this.import(this.__LEDGESCALE)])
 				.then(() => {
 					map.edgeScaleControl = map.edgeScaleControl || L.control.edgeScale('boolean' !== typeof this.options.edgeScale ? this.options.edgeScale : {}).addTo(map);
 				}) : Promise.resolve();
 		},
 
-		_initHotLine: function(layer) {
+		_initHotLine(layer) {
 			let prop = typeof this.options.hotline == 'string' ? this.options.hotline : 'elevation';
 			return this.options.hotline ? this.import(this.__LHOTLINE)
 				.then(() => {
@@ -756,7 +763,7 @@
 		/**
 		 * Initialize "L.AlmostOver" and "L.DistanceMarkers"
 		 */
-		_initMapIntegrations: function(layer) {
+		_initMapIntegrations(layer) {
 			let map = this._map;
 			if (map) {
 				if (this._data.length) {
@@ -769,8 +776,8 @@
 					this._initDistanceMarkers(),
 					this._initEdgeScale(map),
 				]).then(() => {
-					if	(this.options.polyline) {
-						layer.addTo(map);
+					if (this.options.polyline) {
+						this._layers.addLayer(layer.addTo(map)); // hotfix for: https://github.com/Raruto/leaflet-elevation/issues/233
 						this._circleMarkers.addTo(map);
 					}
 					if (this.options.autofitBounds) {
@@ -786,7 +793,7 @@
 		/*
 		 * Collapse current chart control.
 		 */
-		_collapse: function() {
+		_collapse() {
 			replaceClass(this._container, 'elevation-expanded', 'elevation-collapsed');
 			if (this._map) this._map.invalidateSize();
 		},
@@ -794,7 +801,7 @@
 		/*
 		 * Expand current chart control.
 		 */
-		_expand: function() {
+		_expand() {
 			replaceClass(this._container, 'elevation-collapsed', 'elevation-expanded');
 			if (this._map) this._map.invalidateSize();
 		},
@@ -802,7 +809,7 @@
 		/**
 		 * Add some basic colors to leaflet canvas renderer (preferCanvas: true).
 		 */
-		_fixCanvasPaths: function() {
+		_fixCanvasPaths() {
 			let oldProto = L.Canvas.prototype._fillStroke;
 			let control  = this;
 
@@ -810,7 +817,7 @@
 			let color      = Colors[theme] || {};
 
 			L.Canvas.include({
-				_fillStroke: function(ctx, layer) {
+				_fillStroke(ctx, layer) {
 					if (control._layers.hasLayer(layer)) {
 
 						let options    = layer.options;
@@ -841,7 +848,7 @@
 		 * 
 		 * @link https://github.com/Raruto/leaflet-elevation/issues/81#issuecomment-713477050
 		 */
-		_fixTooltipSize: function() {
+		_fixTooltipSize() {
 			this.on('elechart_init', () =>
 				this.once('elechart_change elechart_hover', ({data, xCoord}) => {
 					if (this._chartEnabled) {
@@ -856,21 +863,21 @@
 		/*
 		 * Finds a data entry for the given LatLng
 		 */
-		_findItemForLatLng: function(latlng) {
+		_findItemForLatLng(latlng) {
 			return this._data[this._chart._findIndexForLatLng(latlng)];
 		},
 
 		/*
 		 * Finds a data entry for the given xDiagCoord
 		 */
-		_findItemForX: function(x) {
+		_findItemForX(x) {
 			return this._data[this._chart._findIndexForXCoord(x)];
 		},
 
 		/**
 		 * Fires an event of the specified type.
 		 */
-		_fireEvt: function(type, data, propagate) {
+		_fireEvt(type, data, propagate) {
 			if (this.fire) this.fire(type, data, propagate);
 			if (this._map) this._map.fire(type, data, propagate);
 		},
@@ -878,7 +885,7 @@
 		/*
 		 * Hides the position/height indicator marker drawn onto the map
 		 */
-		_hideMarker: function() {
+		_hideMarker() {
 			if (this.options.autohideMarker) {
 				this._marker.remove();
 			}
@@ -887,7 +894,7 @@
 		/**
 		 * Generate "svg" chart (DOM element).
 		 */
-		_initChart: function(container) {
+		_initChart(container) {
 			let opts = this.options;
 			let map  = this._map;
 
@@ -952,7 +959,7 @@
 
 		},
 
-		_initLayer: function() {
+		_initLayer() {
 			this._layers
 				.on('layeradd layerremove', ({layer, type}) => {
 					let node  = layer.getElement && layer.getElement();
@@ -962,7 +969,7 @@
 				});
 		},
 
-		_initMarker: function(map) {
+		_initMarker(map) {
 			let pane                     = map.getPane('elevationPane');
 			if (!pane) {
 				pane = this._pane        = map.createPane('elevationPane', map.getPane('norotatePane') || map.getPane('mapPane'));
@@ -985,7 +992,7 @@
 		/**
 		 * Inspired by L.Control.Layers
 		 */
-		_initButton: function(container) {
+		_initButton(container) {
 			L.DomEvent
 				.disableClickPropagation(container)
 				.disableScrollPropagation(container);
@@ -1007,7 +1014,7 @@
 			}
 		},
 
-		_initSummary: function(container) {
+		_initSummary(container) {
 			this.import(this.__LSUMMARY).then((m)=>{
 				this._summary = new (m || Elevation).Summary({ summary: this.options.summary }, this);
 
@@ -1020,7 +1027,7 @@
 		/**
 		 * Retrieve data from a remote url (HTTP).
 		 */
-		_loadFile: function(url) {
+		_loadFile(url) {
 			fetch(url)
 				.then((response) => response.text())
 				.then((data)     => {
@@ -1033,7 +1040,7 @@
 		/**
 		 * Dynamically import only required javascript modules (code splitting)
 		 */
-		_loadModules: function(handlers) {
+		_loadModules(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'))
@@ -1052,7 +1059,7 @@
 		/**
 		 * Simple GeoJSON data loader (L.GeoJSON).
 		 */
-		_loadLayer: function(geojson) {
+		_loadLayer(geojson) {
 			let { polyline, theme, waypoints, wptIcons, wptLabels, distanceMarkers } = this.options;
 			let style = L.extend({}, polyline);
 
@@ -1100,14 +1107,14 @@
 			return layer;
 		},
 
-		_onDragEnd: function({ dragstart, dragend}) {
+		_onDragEnd({ dragstart, dragend}) {
 			this._hideMarker();
 			this.fitBounds(L.latLngBounds([dragstart.latlng, dragend.latlng]));
 
 			this.fire("elechart_dragged");
 		},
 
-		_onKeyDown: function({key}) {
+		_onKeyDown({key}) {
 			if(!this.options.detached && key === "Escape"){
 				this._collapse();
 			}	},
@@ -1115,14 +1122,14 @@
 		/**
 		 * Trigger mouseenter event.
 		 */
-		_onMouseEnter: function() {
+		_onMouseEnter() {
 			this.fire('elechart_enter');
 		},
 
 		/*
 		 * Handles the moueseover the chart and displays distance and altitude level.
 		 */
-		_onMouseMove: function({xCoord}) {
+		_onMouseMove({xCoord}) {
 			if (this._chartEnabled && this._data.length) {
 				let item = this._findItemForX(xCoord);
 				if (item) {
@@ -1144,7 +1151,7 @@
 		/*
 		 * Handles mouseover events of the data layers on the map.
 		 */
-		_onMouseMoveLayer: function({latlng}) {
+		_onMouseMoveLayer({latlng}) {
 			if (this._data.length) {
 				let item = this._findItemForLatLng(latlng);
 				if (item) {
@@ -1162,7 +1169,7 @@
 		/*
 		 * Handles the moueseout over the chart.
 		 */
-		_onMouseOut: function() {
+		_onMouseOut() {
 			if (!this.options.detached) {
 				this._hideMarker();
 				this._chart._hideDiagramIndicator();
@@ -1178,14 +1185,14 @@
 		/**
 		 * Handles the drag event over the ruler filter.
 		 */
-		_onRulerFilter: function({coords}) {
+		_onRulerFilter({coords}) {
 			this._updateMapSegments(coords);
 		},
 
 		/**
 		 * Toggle chart data on legend click
 		 */
-		_onToggleChart: function({ name, enabled }) {
+		_onToggleChart({ name, enabled }) {
 
 			this._chartEnabled = this._chart._hasActiveLayers();
 
@@ -1205,7 +1212,7 @@
 		/**
 		 * Simple GeoJSON Parser
 		 */
-		_parseFromGeoJSONString: function(data) {
+		_parseFromGeoJSONString(data) {
 			try {
 				return JSON.parse(data);
 			} catch (e) { }
@@ -1214,7 +1221,7 @@
 		/**
 		 * Attempt to parse raw response data (GeoJSON or XML > GeoJSON)
 		 */
-		_parseFromString: function(data) {
+		_parseFromString(data) {
 			return new Promise(resolve =>
 				this.import(this.__TOGEOJSON).then(() => {
 					let geojson;
@@ -1234,7 +1241,7 @@
 		/**
 		 * Simple XML Parser (GPX, KML, TCX)
 		 */
-		_parseFromXMLString: function(data) {
+		_parseFromXMLString(data) {
 			if (data.indexOf("<") != 0) {
 				throw 'Invalid XML';
 			}
@@ -1255,36 +1262,38 @@
 		/**
 		 * Add chart profile to diagram
 		 */
-		_registerAreaPath: function(props) {
+		_registerAreaPath(props) {
 			this.on("elechart_init", () => this._chart._registerAreaPath(props));
 		},
 
 		/**
 		 * Add chart grid to diagram
 		 */
-		_registerAxisGrid: function(props) {
+		_registerAxisGrid(props) {
 			this.on("elechart_axis", () => this._chart._registerAxisGrid(props));
 		},
 
 		/**
 		 * Add chart axis to diagram
 		 */
-		_registerAxisScale: function(props) {
+		_registerAxisScale(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));
+		_registerCheckPoint(props) {
+			const cb = () => this._chart._registerCheckPoint(props);
+			this
+				.on("elechart_updated", cb)
+				.once("eledata_clear", () => this.off("elechart_updated", cb));
 		},
 
-
 		/**
 		 * Base handler for iterative track statistics (dist, time, z, slope, speed, acceleration, ...)
 		 */
-		 _registerDataAttribute: function(props) {
+		 _registerDataAttribute(props) {
 
 			// parse of "coordinateProperties" for later usage
 			if (props.coordPropsToMeta) {
@@ -1361,7 +1370,7 @@
 		/**
 		 * Parse a module definition and attach related function listeners
 		 */
-		_registerHandler: function(props) {
+		_registerHandler(props) {
 
 			// eg. L.Control.Altitude
 			if (typeof props === "function") {
@@ -1444,7 +1453,7 @@
 		/**
 		 * Add chart or marker tooltip info
 		 */
-		_registerTooltip: function(props) {
+		_registerTooltip(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 })));
 		},
@@ -1452,14 +1461,14 @@
 		/**
 		 * Add summary info to diagram
 		 */
-		_registerSummary: function(props) {
+		_registerSummary(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() {
+		_resetDrag() {
 			this._chart._resetDrag();
 			this._hideMarker();
 		},
@@ -1467,7 +1476,7 @@
 		/**
 		 * Resets drag, marker and bounds.
 		 */
-		_resetView: function() {
+		_resetView() {
 			if (this._map && this._map._isFullscreen) return;
 			this._resetDrag();
 			this._hideMarker();
@@ -1479,7 +1488,7 @@
 		/**
 		 * Hacky way for handling chart resize. Deletes it and redraw chart.
 		 */
-		_resizeChart: function() {
+		_resizeChart() {
 			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]);
@@ -1497,14 +1506,14 @@
 		/**
 		 * Collapse or Expand chart control.
 		 */
-		_toggle: function() {
+		_toggle() {
 			hasClass(this._container, "elevation-expanded") ? this._collapse() : this._expand();
 		},
 
 		/**
 		 * Update map center and zoom (followMarker: true)
 		 */
-		_setMapView: function(item) {
+		_setMapView(item) {
 			if (this._map && this.options.followMarker) {
 				let zoom = this._map.getZoom();
 				let z    = this.options.zFollow;
@@ -1519,7 +1528,7 @@
 		/**
 		 * Calculates [x, y] domain and then update chart.
 		 */
-		_updateChart: function() {
+		_updateChart() {
 			if (this._chart && this._container) {
 				this.fire("elechart_axis");
 		
@@ -1535,7 +1544,7 @@
 		/*
 		 * Update the position/height indicator marker drawn onto the map
 		 */
-		_updateMarker: function(item) {
+		_updateMarker(item) {
 			if (this._marker) {
 				this._marker.update({
 					map         : this._map,
@@ -1549,7 +1558,7 @@
 		/**
 		 * Fix marker rotation on rotated maps
 		 */
-		_rotateMarker: function() {
+		_rotateMarker() {
 			if (this._marker) {
 				this._marker.update();
 			}
@@ -1558,7 +1567,7 @@
 		/**
 		 * Highlight track segments on the map.
 		 */
-		_updateMapSegments: function(coords) {
+		_updateMapSegments(coords) {
 			this._markedSegments.setLatLngs(coords || []);
 			if (coords && this._map && !this._map.hasLayer(this._markedSegments)) {
 				this._markedSegments.addTo(this._map);
@@ -1568,7 +1577,7 @@
 		/**
 		 * Update chart summary.
 		 */
-		_updateSummary: function() {
+		_updateSummary() {
 			if (this._summary) {
 				this._summary.reset();
 				if (this.options.summary) {
@@ -1595,7 +1604,7 @@
 		/**
 		 * Calculates chart width.
 		 */
-		_width: function() {
+		_width() {
 			if (this._chart) return this._chart._width();
 			const { width, margins } = this.options;
 			return width - margins.left - margins.right;
@@ -1604,7 +1613,7 @@
 		/**
 		 * Calculates chart height.
 		 */
-		_height: function() {
+		_height() {
 			if (this._chart) return this._chart._height();
 			const { height, margins } = this.options;
 			return height - margins.top - margins.bottom;