@raruto/leaflet-elevation 1.9.1 → 1.9.4

package/libs/leaflet-distance-marker.js

@@ -1,109 +1,269 @@
 /*
- * https://github.com/adoroszlai/leaflet-distance-markers
+ * Copyright (c) 2022, GPL-3.0+ Project, Raruto
  *
- * The MIT License (MIT)
+ *  This file is free software: you may copy, redistribute and/or modify it
+ *  under the terms of the GNU General Public License as published by the
+ *  Free Software Foundation, either version 2 of the License, or (at your
+ *  option) any later version.
  *
- * Copyright (c) 2014- Doroszlai Attila, 2016- Phil Whitehurst
+ *  This file is distributed in the hope that it will be useful, but
+ *  WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ *  General Public License for more details.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see .
  *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
+ * This file incorporates work covered by the following copyright and
+ * permission notice:
+ * 
+ *     Copyright (c) 2014- Doroszlai Attila, 2016- Phil Whitehurst
  *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *     Permission to use, copy, modify, and/or distribute this software
+ *     for any purpose with or without fee is hereby granted, provided
+ *     that the above copyright notice and this permission notice appear
+ *     in all copies.
+ *
+ *     THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL
+ *     WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED
+ *     WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE
+ *     AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR
+ *     CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+ *     OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,
+ *     NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
+ *     CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
  */
 
+// TODO: the "L.DistanceMarker" (canvas marker) class could be alternatively provided by "leaflet-rotate"? 
+
+L.DistanceMarker = L.CircleMarker.extend({
+	_updatePath: function () {
+		let ctx = this._renderer._ctx;
+		let p = this._point;
+
+		// Calculate image direction (rotation)
+		this.options.rotation = this.options.rotation || 0;
+
+		// Draw circle marker (canvas point)
+		if (this.options.radius && this._renderer._updateCircle) {
+			this._renderer._updateCircle(this);
+		}
+
+		// Draw image over circle (distance marker)
+		if (this.options.icon && this.options.icon.url) {
+			if (!this.options.icon.element) {
+				const icon = document.createElement('img');
+				this.options.icon = L.extend({ rotate: 0, size: [40, 40], offset: { x: 0, y: 0 } }, this.options.icon);
+				this.options.icon.rotate += this.options.rotation;
+				this.options.icon.element = icon;
+				icon.src = this.options.icon.url;
+				icon.onload = () => this.redraw();
+				icon.onerror = () => this.options.icon = null;
+			} else {
+				const icon = this.options.icon;
+				let cx = p.x + icon.offset.x;
+				let cy = p.y + icon.offset.y;
+				ctx.save();
+				if (icon.rotate) {
+					ctx.translate(p.x, p.y);
+					ctx.rotate(icon.rotate);
+					cx = 0;
+					cy = 0;
+				}
+				ctx.drawImage(icon.element, cx - icon.size[0] / 2, cy - icon.size[1] / 2, icon.size[0], icon.size[1]);
+				ctx.restore();
+			}
+		}
+
+		// Add a label inside the circle (distance marker)
+		if (this.options.label) {
+			let cx = p.x, cy = p.y;
+			ctx.save();
+
+			ctx.font = this.options.font || 'normal 7pt "Helvetica Neue", Arial, Helvetica, sans-serif';
+			ctx.textAlign = "center";
+			ctx.textBaseline = "middle";
+			ctx.fillStyle = this.options.fillStyle || 'black';
+
+			// TODO rescale circle to fit text
+			// let fontSize  = Number(/[0-9\.]+/.exec(ctx.font)[0]);
+			// let fontWidth = ctx.measureText(this.options.html).width;
+
+			if (this.options.rotation) {
+				ctx.translate(p.x, p.y);
+				ctx.rotate(this.options.rotation);
+				cx = 0;
+				cy = 0;
+			}
+
+			// Temporary fix to prevent stroke blurs at higher zoom levels
+			if (this._map.getZoom() > 17) {
+				ctx.fillStyle = this.options.strokeStyle || 'black';
+			}
+
+			ctx.fillText(this.options.label, cx, cy);
+
+			if (this.options.strokeStyle && this._map.getZoom() <= 17) {
+				ctx.strokeStyle = this.options.strokeStyle;
+				ctx.strokeText(this.options.label, cx, cy);
+			}
+
+			ctx.restore();
+		}
+	}
+});
+
 L.DistanceMarkers = L.LayerGroup.extend({
+	__arrowIcon: "data:image/svg+xml,%3Csvg transform='rotate(90)' xmlns='http://www.w3.org/2000/svg' width='560px' height='560px' viewBox='0 0 560 560'%3E%3Cpath stroke-width='35' fill='%23FFF' stroke='%23000' d='M280,40L522,525L280,420L38,525z'/%3E%3C/svg%3E",
+	options: {
+		cssClass: 'dist-marker',
+		iconSize: [12, 12],
+		offset: 1000,
+		showAll: 12,
+		textFunction: (distance, i, offset) => i,
+	},
 	initialize: function (line, map, options) {
-		options = options || {};
-		var offset = options.offset || 1000;
-		var showAll = Math.min(map.getMaxZoom(), options.showAll || 12);
-		var cssClass = options.cssClass || 'dist-marker';
-		var iconSize = options.iconSize !== undefined ? options.iconSize : [12, 12];
-		var textFunction = options.textFunction || function(distance, i, offset) {
-			return i;
-		};
 
-		var zoomLayers = {};
-		// Get line coords as an array
-		var coords = line;
-		if (typeof line.getLatLngs == 'function') {
-			coords = line.getLatLngs();
+		this._layers = {};
+		this._zoomLayers = {};
+
+		options = L.setOptions(this, options);
+
+		let preferCanvas = map.options.preferCanvas;
+		let showAll = Math.min(map.getMaxZoom(), options.showAll);
+
+		// You should use "leaflet-rotate" to show rotated arrow markers (preferCanvas: false)
+		if (!preferCanvas && !map.options.rotate) {
+			console.warn('Missing dependency: "leaflet-rotate"');
 		}
+
+		// Get line coords as an array
+		let coords = typeof line.getLatLngs == 'function' ? line.getLatLngs() : line;
+
 		// Get accumulated line lengths as well as overall length
-		var accumulated = L.GeometryUtil.accumulatedLengths(line);
-		var length = accumulated.length > 0 ? accumulated[accumulated.length - 1] : 0;
-		// Position in accumulated line length array
-		var j = 0;
-		// Number of distance markers to be added
-		var count = Math.floor(length / offset);
-
-		for (var i = 1; i <= count; ++i) {
-			var distance = offset * i;
-			// Find the first accumulated distance that is greater
-			// than the distance of this marker
-			while (j < accumulated.length - 1 && accumulated[j] < distance) {
-				++j;
+		let accumulated = L.GeometryUtil.accumulatedLengths(line);
+		let length = accumulated.length > 0 ? accumulated[accumulated.length - 1] : 0;
+
+		// count = Number of distance markers to be added
+		// j = Position in accumulated line length array
+		for (let i = 1, count = Math.floor(length / options.offset), j = 0; i <= count; ++i) {
+
+			let distance = options.offset * i;
+
+			// Find the first accumulated distance that is greater than the distance of this marker
+			while (j < accumulated.length - 1 && accumulated[j] < distance) ++j;
+
+			// Grab two nearest points either side marker position
+			let p1 = coords[j - 1];
+			let p2 = coords[j];
+			let m_line = L.polyline([p1, p2]);
+
+			// and create a simple line to interpolate on
+			let ratio = (distance - accumulated[j - 1]) / (accumulated[j] - accumulated[j - 1]);
+			let position = L.GeometryUtil.interpolateOnLine(map, m_line, ratio);
+			let delta = map.project(p2).subtract(map.project(p1));
+			let angle = Math.atan2(delta.y, delta.x);
+
+			// Generate distance marker label
+			let text = options.textFunction.call(this, distance, i, options.offset);
+
+			// Grouping layer of generated markers (arrow + distance)
+			let marker = L.layerGroup();
+
+			// Grouping layer of visible layers (at zoom level)
+			let zoom = this._minimumZoomLevelForItem(i, showAll);
+			this._zoomLayers[zoom] = this._zoomLayers[zoom] || L.layerGroup()
+			this._zoomLayers[zoom].addLayer(marker);
+
+			// create arrow markers
+			if (options.arrows && ((options.distance && i % 2 == 1) || !options.distance)) {
+				if (preferCanvas) {
+					marker.addLayer(
+						new L.DistanceMarker(p1, {
+							radius: 0,
+							icon: {
+								url: this.__arrowIcon, //image link
+								size: [20, 20],        //image size ( default [40, 40] )
+								rotate: 0,             //image base rotate ( default 0 )
+								offset: { x: 0, y: 0 },//image offset ( default { x: 0, y: 0 } )
+							},
+							rotation: angle,
+							interactive: false,
+							// label: '⮞', //'➜',
+							// font: 'normal 20pt "Helvetica Neue", Arial, Helvetica, sans-serif',
+							// fillStyle: 'white',//'#3366CC',
+							// strokeStyle: 'black',
+						})
+					);
+				} else {
+					marker.addLayer(
+						L.marker(position.latLng, {
+							icon: L.icon({
+								iconUrl: __arrowIcon,
+								iconSize: [20, 20],
+							}),
+							// NB the following option is added by "leaflet-rotate"
+							rotation: angle * L.DomUtil.RAD_TO_DEG,
+							interactive: false,
+						})
+					);
+				}
 			}
-			// Now grab the two nearest points either side of
-			// distance marker position and create a simple line to
-			// interpolate on
-			var p1 = coords[j - 1];
-			var p2 = coords[j];
-			var m_line = L.polyline([p1, p2]);
-			var ratio = (distance - accumulated[j - 1]) / (accumulated[j] - accumulated[j - 1]);
-			var position = L.GeometryUtil.interpolateOnLine(map, m_line, ratio);
-			var text = textFunction.call(this, distance, i, offset);
-			var icon = L.divIcon({ className: cssClass, html: text, iconSize: iconSize });
-			var marker = L.marker(position.latLng, { title: text, icon: icon });
-
-			// visible only starting at a specific zoom level
-			var zoom = this._minimumZoomLevelForItem(i, showAll);
-			if (zoomLayers[zoom] === undefined) {
-				zoomLayers[zoom] = L.layerGroup();
+
+			// create distance markers
+			if (options.distance && i % 2 == 0) {
+				if (preferCanvas) {
+					marker.addLayer(
+						new L.DistanceMarker(position.latLng, {
+							label: text, // TODO: handle text rotation (leaflet-rotate)
+							radius: 7,
+							fillColor: '#fff',
+							fillOpacity: 1,
+							fillStyle: 'black',
+							color: '#777',
+							weight: 1,
+							interactive: false,
+						})
+					);
+				} else {
+					marker.addLayer(
+						L.marker(position.latLng, {
+							title: text,
+							icon: L.divIcon({
+								className: options.cssClass,
+								html: text,
+								iconSize: options.iconSize
+							}),
+							interactive: false,
+						})
+					);
+				}
 			}
-			zoomLayers[zoom].addLayer(marker);
 		}
 
-		var currentZoomLevel = 0;
-		var markerLayer = this;
-		var updateMarkerVisibility = function() {
-			var oldZoom = currentZoomLevel;
-			var newZoom = currentZoomLevel = map.getZoom();
-
+		const updateMarkerVisibility = () => {
+			let oldZoom = this._lastZoomLevel || 0;
+			let newZoom = map.getZoom();
 			if (newZoom > oldZoom) {
-				for (var i = oldZoom + 1; i <= newZoom; ++i) {
-					if (zoomLayers[i] !== undefined) {
-						markerLayer.addLayer(zoomLayers[i]);
+				for (let i = oldZoom + 1; i <= newZoom; ++i) {
+					if (this._zoomLayers[i] !== undefined) {
+						this.addLayer(this._zoomLayers[i]);
 					}
 				}
 			} else if (newZoom < oldZoom) {
-				for (var i = oldZoom; i > newZoom; --i) {
-					if (zoomLayers[i] !== undefined) {
-						markerLayer.removeLayer(zoomLayers[i]);
+				for (let i = oldZoom; i > newZoom; --i) {
+					if (this._zoomLayers[i] !== undefined) {
+						this.removeLayer(this._zoomLayers[i]);
 					}
 				}
 			}
+			this._lastZoomLevel = newZoom;
 		};
 		map.on('zoomend', updateMarkerVisibility);
-
-		this._layers = {}; // need to initialize before adding markers to this LayerGroup
 		updateMarkerVisibility();
 	},
 
-	_minimumZoomLevelForItem: function (item, showAllLevel) {
-		var zoom = showAllLevel;
-		var i = item;
+	_minimumZoomLevelForItem: function (i, zoom) {
 		while (i > 0 && i % 2 === 0) {
 			--zoom;
 			i = Math.floor(i / 2);
@@ -133,9 +293,9 @@ L.Polyline.include({
 	onAdd: function (map) {
 		this._originalOnAdd(map);
 
-		var opts = this.options.distanceMarkers || {};
-		if (this._distanceMarkers === undefined && this.options.distanceMarkers) {
-			this._distanceMarkers = new L.DistanceMarkers(this, map, opts);
+		let opts = this.options.distanceMarkers || {};
+		if (this.options.distanceMarkers) {
+			this._distanceMarkers = this._distanceMarkers || new L.DistanceMarkers(this, map, opts);
 		}
 		if (opts.lazy === undefined || opts.lazy === false) {
 			this.addDistanceMarkers();

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

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

package/package.json

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

package/src/components.js

@@ -116,9 +116,11 @@ export const PositionMarker = ({
 }) => {
 	return g => {
 
-		let line = g.select('.height-focus.line');
+		g.attr("class", "height-focus-group");
+
+		let line   = g.select('.height-focus.line');
 		let circle = g.select('.height-focus.circle-lower');
-		let text = g.select('.height-focus-label');
+		let text   = g.select('.height-focus-label');
 
 		if (!line.node()) line = g.append('svg:line');
 		if (!circle.node()) circle = g.append('svg:circle');

package/src/control.js

@@ -17,7 +17,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__TOGEOJSON:   'https://unpkg.com/@tmcw/togeojson@4.5.0/dist/togeojson.umd.js',
 	__LGEOMUTIL:   'https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js',
 	__LALMOSTOVER: 'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
-	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.9.1/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.9.4/libs/leaflet-distance-marker.min.js',
 
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -163,7 +163,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		if (this.options.legend)                   this.options.margins.bottom += 30;
 		if (this.options.theme)                    this.options.polylineSegments.className += ' ' + this.options.theme;
 		if (this.options.wptIcons === true)        this.options.wptIcons = Options.wptIcons;
-		if (this.options.distanceMarkers === true) this.options.distanceMarkers = { lazy: true };
+		if (this.options.distanceMarkers === true) this.options.distanceMarkers = Options.distanceMarkers;
 
 		this._markedSegments.setStyle(this.options.polylineSegments);
 
@@ -400,17 +400,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		if (marker) this._markers.addLayer(marker)
 	},
 
-	_bindPopup: function(marker) {
-		let popup = marker._popup;
-		if (popup) {
-			popup.options.className = 'elevation-popup';
-			if (popup._content) {
-				popup._content = decodeURI(popup._content);
-				popup.bindTooltip(popup._content, { direction: 'auto', sticky: true, opacity: 1, className: 'elevation-tooltip' }).openTooltip();
-			}
-		}
-	},
-
 	/**
 	 * Initialize "L.AlmostOver" integration
 	 */
@@ -754,10 +743,11 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 					}
 					let marker = L.marker(latlng, { icon: wptIcons[sym] });
 					if ([true, 'markers'].includes(wptLabels) && (name || desc)) {
-						marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
+						let content = decodeURI("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : ''));
+						marker.bindPopup(content, { className: 'elevation-popup', keepInView: true }).openPopup();
+						marker.bindTooltip(content, { className: 'elevation-tooltip', direction: 'auto', sticky: true, opacity: 1 }).openTooltip();
 					}
 					control._addMarker(marker);
-					control._bindPopup(marker);
 					control.fire('waypoint_added', { point: marker, element: latlng, properties: prop });
 					return marker;
 				}

package/src/marker.js

@@ -10,8 +10,6 @@ export var Marker = L.Class.extend({
 		switch(this.options.marker) {
 			case 'elevation-line':
 				// this._container = d3.create("g").attr("class", "height-focus-group");
-				this._container = d3.select(map.getPane('elevationPane')).select("svg > g")
-					.attr("class", "height-focus-group");
 			break;
 			case 'position-marker':
 				// this._marker   = L.circleMarker([0, 0], { pane: 'overlayPane', radius: 6, fillColor: '#fff', fillOpacity:1, color: '#000', weight:1, interactive: false });
@@ -27,7 +25,7 @@ export var Marker = L.Class.extend({
 	addTo: function(map) {
 		this._map = map;
 		switch(this.options.marker) {
-			case 'elevation-line':  this._container.call(D3.PositionMarker({}));      break;
+			case 'elevation-line':  this._container = d3.select(map.getPane('elevationPane')).select("svg > g").call(D3.PositionMarker({})); break;
 			case 'position-marker': this._marker.addTo(map, { pane: 'overlayPane' }); break;
 		}
 		return this;
@@ -49,18 +47,20 @@ export var Marker = L.Class.extend({
 
 		switch(this.options.marker) {
 			case 'elevation-line':
-				let point   = this._map.latLngToLayerPoint(this._latlng);
-				point = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
-		
-				this._container.classed("leaflet-hidden", false);
-				this._container.call(D3.PositionMarker({
-					theme : this.options.theme,
-					xCoord: point.x,
-					yCoord: point.y,
-					length: point.y - (this._height() / props.maxElevation * point.z), // normalized Y
-					labels: this._labels,
-					item: point
-				}));
+				if (this._container) {
+					let point = this._map.latLngToLayerPoint(this._latlng);
+					point     = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
+
+					this._container.classed("leaflet-hidden", false);
+					this._container.call(D3.PositionMarker({
+						theme : this.options.theme,
+						xCoord: point.x,
+						yCoord: point.y,
+						length: point.y - (this._height() / props.maxElevation * point.z), // normalized Y
+						labels: this._labels,
+						item: point
+					}));
+				}
 			break;
 			case 'position-marker':
 				_.removeClass(this._marker.getElement(), 'leaflet-hidden');

package/src/options.js

@@ -9,7 +9,11 @@ export var Options = {
 	collapsed: false,
 	detached: true,
 	distance: true,
-	distanceMarkers: false,
+	distanceMarkers: {
+		lazy: true,
+		distance: true,
+		arrow: false
+	},
 	decimalsX: 2,
 	decimalsY: 0,
 	dragging: !L.Browser.mobile,
@@ -69,7 +73,7 @@ export var Options = {
 	wptIcons: {
 		'': L.divIcon({
 			className: 'elevation-waypoint-marker',
-			html: '<i class="elevation-waypoint-icon"></i>',
+			html: '<i class="elevation-waypoint-icon default"></i>',
 			iconSize: [30, 30],
 			iconAnchor: [8, 30],
 		}),