@raruto/leaflet-elevation 1.9.2 → 1.9.5

package/libs/leaflet-distance-marker.js

@@ -1,109 +1,268 @@
 /*
- * 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({
+	options: {
+		cssClass: 'dist-marker',
+		iconSize: [12, 12],
+		arrowSize: [10, 10],
+		arrowUrl: "data:image/svg+xml,%3Csvg transform='rotate(90)' xmlns='http://www.w3.org/2000/svg' width='560px' height='560px' viewBox='0 0 560 560'%3E%3Cpath stroke-width='35' fill='%23000' stroke='%23FFF' d='M280,40L522,525L280,420L38,525z'/%3E%3C/svg%3E",
+		offset: 1000,
+		showAll: 12,
+		textFunction: (distance, i, offset) => i,
+		distance: true,
+		direction: true,
+	},
 	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 visible layers at zoom level (arrow + distance)
+			let zoom = this._minimumZoomLevelForItem(i, showAll);
+			let markers = this._zoomLayers[zoom] = this._zoomLayers[zoom] || L.layerGroup()
+
+			// create arrow markers
+			if (options.direction && ((options.distance && i % 2 == 1) || !options.distance)) {
+				if (preferCanvas) {
+					markers.addLayer(
+						new L.DistanceMarker(p1, {
+							radius: 0,
+							icon: {
+								url: options.arrowUrl,   //image link
+								size: options.arrowSize, //image size ( default [40, 40] )
+								rotate: 0,               //image base rotate ( default 0 )
+								offset: { x: 0, y: 0 },  //image offset ( default { x: 0, y: 0 } )
+							},
+							rotation: angle,
+							interactive: false,
+							// label: '⮞', //'➜',
+							// font: 'normal 20pt "Helvetica Neue", Arial, Helvetica, sans-serif',
+							// fillStyle: 'white',//'#3366CC',
+							// strokeStyle: 'black',
+						})
+					);
+				} else {
+					markers.addLayer(
+						L.marker(position.latLng, {
+							icon: L.icon({
+								iconUrl: options.arrowUrl,
+								iconSize: options.arrowSize,
+							}),
+							// NB the following option is added by "leaflet-rotate"
+							rotation: angle * L.DomUtil.RAD_TO_DEG,
+							interactive: false,
+						})
+					);
+				}
 			}
-			// 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) {
+					markers.addLayer(
+						new L.DistanceMarker(position.latLng, {
+							label: text, // TODO: handle text rotation (leaflet-rotate)
+							radius: 7,
+							fillColor: '#fff',
+							fillOpacity: 1,
+							fillStyle: 'black',
+							color: '#777',
+							weight: 1,
+							interactive: false,
+						})
+					);
+				} else {
+					markers.addLayer(
+						L.marker(position.latLng, {
+							title: text,
+							icon: L.divIcon({
+								className: options.cssClass,
+								html: text,
+								iconSize: options.iconSize
+							}),
+							interactive: false,
+						})
+					);
+				}
 			}
-			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 +292,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({options:{cssClass:"dist-marker",iconSize:[12,12],arrowSize:[10,10],arrowUrl:"data:image/svg+xml,%3Csvg transform='rotate(90)' xmlns='http://www.w3.org/2000/svg' width='560px' height='560px' viewBox='0 0 560 560'%3E%3Cpath stroke-width='35' fill='%23000' stroke='%23FFF' d='M280,40L522,525L280,420L38,525z'/%3E%3C/svg%3E",offset:1e3,showAll:12,textFunction:(distance,i,offset)=>i,distance:!0,direction:!0},initialize:function(line,map,options){this._layers={},this._zoomLayers={},options=L.setOptions(this,options);let preferCanvas=map.options.preferCanvas,showAll=Math.min(map.getMaxZoom(),options.showAll);preferCanvas||map.options.rotate||console.warn('Missing dependency: "leaflet-rotate"');let coords="function"==typeof line.getLatLngs?line.getLatLngs():line,accumulated=L.GeometryUtil.accumulatedLengths(line),length=accumulated.length>0?accumulated[accumulated.length-1]:0;for(let i=1,count=Math.floor(length/options.offset),j=0;i<=count;++i){let distance=options.offset*i;for(;j<accumulated.length-1&&accumulated[j]<distance;)++j;let p1=coords[j-1],p2=coords[j],m_line=L.polyline([p1,p2]),ratio=(distance-accumulated[j-1])/(accumulated[j]-accumulated[j-1]),position=L.GeometryUtil.interpolateOnLine(map,m_line,ratio),delta=map.project(p2).subtract(map.project(p1)),angle=Math.atan2(delta.y,delta.x),text=options.textFunction.call(this,distance,i,options.offset),zoom=this._minimumZoomLevelForItem(i,showAll),markers=this._zoomLayers[zoom]=this._zoomLayers[zoom]||L.layerGroup();options.direction&&(options.distance&&i%2==1||!options.distance)&&(preferCanvas?markers.addLayer(new L.DistanceMarker(p1,{radius:0,icon:{url:options.arrowUrl,size:options.arrowSize,rotate:0,offset:{x:0,y:0}},rotation:angle,interactive:!1})):markers.addLayer(L.marker(position.latLng,{icon:L.icon({iconUrl:options.arrowUrl,iconSize:options.arrowSize}),rotation:angle*L.DomUtil.RAD_TO_DEG,interactive:!1}))),options.distance&&i%2==0&&(preferCanvas?markers.addLayer(new L.DistanceMarker(position.latLng,{label:text,radius:7,fillColor:"#fff",fillOpacity:1,fillStyle:"black",color:"#777",weight:1,interactive:!1})):markers.addLayer(L.marker(position.latLng,{title:text,icon:L.divIcon({className:options.cssClass,html:text,iconSize:options.iconSize}),interactive:!1})))}const updateMarkerVisibility=()=>{let oldZoom=this._lastZoomLevel||0,newZoom=map.getZoom();if(newZoom>oldZoom)for(let i=oldZoom+1;i<=newZoom;++i)void 0!==this._zoomLayers[i]&&this.addLayer(this._zoomLayers[i]);else if(newZoom<oldZoom)for(let i=oldZoom;i>newZoom;--i)void 0!==this._zoomLayers[i]&&this.removeLayer(this._zoomLayers[i]);this._lastZoomLevel=newZoom};map.on("zoomend",updateMarkerVisibility),updateMarkerVisibility()},_minimumZoomLevelForItem:function(i,zoom){for(;i>0&&i%2==0;)--zoom,i=Math.floor(i/2);return zoom}}),L.Polyline.include({_originalOnAdd:L.Polyline.prototype.onAdd,_originalOnRemove:L.Polyline.prototype.onRemove,addDistanceMarkers:function(){this._map&&this._distanceMarkers&&this._map.addLayer(this._distanceMarkers)},removeDistanceMarkers:function(){this._map&&this._distanceMarkers&&this._map.removeLayer(this._distanceMarkers)},onAdd:function(map){this._originalOnAdd(map);let opts=this.options.distanceMarkers||{};this.options.distanceMarkers&&(this._distanceMarkers=this._distanceMarkers||new L.DistanceMarkers(this,map,opts)),void 0!==opts.lazy&&!1!==opts.lazy||this.addDistanceMarkers()},onRemove:function(map){this.removeDistanceMarkers(),this._originalOnRemove(map)}});

package/libs/leaflet-ruler.css

@@ -0,0 +1,42 @@
+.leaflet-ruler {
+    height: 35px;
+    width: 35px;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACx0lEQVRIS52VWahOURTHXRSJzBkiJcpYxgeS4oUi90GR4VK6DzcUD3gQIQ8UCXkwlCJRkjJEpqT7oGTMeHONmacyRRl/v9ve2n2d7/vOtevXPmefff5r7bXXXruiSf42gKkToTu0hY/wEk7CnWIyFWX0B/N9OkyF1tANdsEz6AIL4Sl8h8NwEK6nmsUMNGPSalgePFxLfwl2hrG39O1hM8yFobAKpsAGWAE/NJRloBfj++ErnIYesDj1qsjzRsYN2VhwdTPgUaGBkUF0e/D0TxDrRD8ehsFw6AcP4FrgCL17EpsrWAKDUgNtwuQP9FehJsyeSb8FbsOV8O0efVeYHOZV0h8N8w3dWXBOVWpgDwO/oBqc1BxciV7Pg3OJhz66ivPB+PoM8TnqRQPTeNkKfeALtAQ39QYsgE85xNsFz+voFe8AldFALS8DYU3waAd9b5gAv3OKn2HefagK4q64VgPm9k0we0wtN9pN6w+mY9qywqLnWeKXGa/WwHwYFSwrZtw/w9Ic4p5oxesLPG8Qd/UacMf13IE38ArGwN3EQJbnintOHsJsMOaG5Z+4/2vAY282eALd4FvQqoj4Aca3gQfPw1hSPBr4xoNH3bz1EO0D428r9LwpY3vB+nSolOfRQVeg1yOCgXH01pu+GeL+Y1hOwWOYBZlhieJxBU94eA2Lwo9WRw+X8fUEx0PUaPFowKW6Cg+UBc6M6AzrMsR1xtJR1vO4CkNk1TMLJoXBlcHQpvAePW+0eFyBRe45jAbL7fskhqm4MbdGmYruUU94l8zNfIyl4hhfLQteHqaiLYq7J4YlipvnXkgWRotgyRYNWB4st6bpizLiHsiO4H1gMrhnRVtarpcxy0vd+9eLPMvzhuMf1E7QmyC78xrQmDk+BC6Am98CLoKXi/dvWll1xjvjeAkD9YVXpkJ6ae7/BOPus4b+p9X9BdB/zv8zawwXAAAAAElFTkSuQmCC"); /* <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> */
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.leaflet-ruler-clicked,
+.leaflet-ruler:hover {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAE/ElEQVRIS6WVeWwUVRzHfzOzs7Pdi+7Rdq/ubrH0sNaKBFMCSEvBQLivFkhAE8GDYAyHATWgETUoMZ7BGCMBNKYiQbTKpYQKBqKlWmBbadmW7bbbFjv0mu2eM298M5SlpS3U+LL/zL6Zz/f7vr/3e4+AsQ6j80EgxTkKhGwkQRqQiLp5UtEOSDwOXf660TDEPfkGR75RTT8VF1EpJRJ6LsbrVuaZg2YtrWND8WD5FVajV9IcTyCOoYhv2QgcgE5fzWDmaAKU0eHa3RMStszNMqIdM+zUY3YdPFvRCG+VOCFFQ0N3mIfNJ3ywb3Em/BHgYNeZFnTc20OOU1Efd7eZtwBUxyWh4QLJGS6jFv04MU2bNWeCQRnoi8L7czPuG+RLJ31g0Smhsqk3dqGVa7wZZOZBb/31oQKm8ZMZRbxyU6FV9XaJmyQGZsNxBD/Ud8FXNWy/rzci9ER4Spqa5tYrit3jmNI8M2DnCRNvnm1Bu35tjcR4lH1HIDtbp+2NNuSmqCyTrBr4dMEDuH4A754LCLvOtQo44zouKp7hQagGIK+CIFgoipqPEHru6OocWJhtlAWk6GZ8cSXs64sd49qbSxMCaenu7+ZkGuftW5JJSy/FBARlh+vDF1tDfWEerYWullNDcjK5c9Q0Or/jcad++3SbbP8ueBn+S7glkOIsNTDUQf+mRxmtkoIIj6Bgb024hYtVhGPK9dDl7RsJvhPDtw3AcWzYuSd8vTcqOS8DrcUIKsUiWcDgyKghRLFgZ1E6vFhohfXfN8YP1bFVfW3N0/E0Ggu8CMNxfY9z7b5SCU4o6dMkhc4RYM61aulwU8fWSSqaIqEqEIRZBzzBSCg+HoIdncPglHgBG9ENdj4inEAXhZuBdQSYXBuWZOnfOLI61yTB1ld4Y1/+xe6Ndvo33Q+ON5Rc0GHOB+DS6gmF2XF6dkZy0eeLM8lU3EDGd6qiQRAnQnvz3wkBXFANdr5jkHMJXrS/NtTIRk5yN3wrErEMgsuNpkp13ViRZ0zdOtUOWiUJ2R/WxPibfmYk+Mp8E/XCT01y4y0/1HBfuCygMDljVzYW0DnmJKhuC8Lsg7WB7kCzQxa4y7nUF08euQblHlZMoqij93J+2yBBpzgjlzcUMJLAmeu9sOjrq+1cR7PtNvzVYrv+5WkOUvpAiqUYx+JlI6cwfPlosQyuHcGYnYECq9r2AV62O5mB9PcuItxjj2ho6uz/hcsRESbH4TX5qQv3LsigNbjJ7Huq+tkIT75enM4Mdx76mbvhXzYW54mIwOBeNd2l+eTs03nyYYIPqrhaSVGbC213xfLf4fIKAB9yqp4IW/VMvtKqVYJJrUhEeCdzGS5lbki22Wu5btYg0IwV2hrYIb0ywoN8VCTbXadDUTRz/9IJsCrfLL82CP7LQCyGcVab56HColQkCKL3ctWxTs/5+WMSAHwPGBih0rNxotqGL42R4DqLpebhKTNta7fvgWBfN7yybIoQjYdzoLPVey+RxHFtdrhfy05J2laxKjep5EAd3oqhhHNtqrm6YOoT6RKcIOXSwEdb1ojXLv35fDRQ99mYBKR6GOyu3zBhcowXTvR3+JdCWhqjVhk9FEW7Z5Wtw1vuFlwatb9XQmuD51J/MFQ+qgAheIdemSl5FoDgOuhs3o0/4vWOKcZkh/4bEJFKxAMA/6QhgsjzAvrH3+SXn0YZAinU/wuTosgK53+p+wAAAABJRU5ErkJggg=="); /* <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> */
+}
+.leaflet-ruler-clicked {
+    height: 35px;
+    width: 35px;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-color: chartreuse !important;
+}
+.leaflet-bar.leaflet-ruler {
+    background-color: #ffffff;
+}
+.leaflet-control.leaflet-ruler {
+    cursor: pointer;
+}
+.result-tooltip {
+    background-color: white;
+    border-width: medium;
+    border-color: #de0000;
+    font-size: smaller;
+}
+.moving-tooltip {
+    background-color: rgba(255, 255, 255, .7);
+    background-clip: padding-box;
+    opacity: 0.5;
+    border: dotted;
+    border-color: red;
+    font-size: smaller;
+}
+.plus-length {
+    padding-left: 45px;
+}
+  

package/libs/leaflet-ruler.js

@@ -0,0 +1,183 @@
+/*
+ * Copyright (c) 2022, GPL-3.0+ Project, Raruto
+ *
+ *  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.
+ *
+ *  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.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see .
+ *
+ * This file incorporates work covered by the following copyright and
+ * permission notice:
+ * 
+ *     Copyright (c) 2017 Goker Tanrisever
+ *
+ *     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.
+ */
+
+L.Control.Ruler = L.Control.extend({
+	options: {
+		position: 'topright',
+		circleMarker: {
+			color: 'red',
+			radius: 2,
+		},
+		lineStyle: {
+			color: 'red',
+			dashArray: '1,6'
+		},
+		lengthUnit: {
+			display: 'km',
+			decimal: 2,
+			factor: 0.001, // meters -> kilometers
+			label: 'Distance:'
+		},
+		angleUnit: {
+			display: '°',
+			decimal: 2,
+			factor: 360,
+			label: 'Bearing:'
+		}
+	},
+	initialize: function (options) {
+		L.setOptions(this, options);
+		this._layers = L.layerGroup();
+		this._enabled = false;
+	},
+	onAdd: function (map) {
+		this._defaultCursor = map._container.style.cursor;
+		this._map = map;
+		let container = L.DomUtil.create('div', 'leaflet-bar');
+		container.classList.add('leaflet-ruler');
+		L.DomEvent.disableClickPropagation(container);
+		L.DomEvent.on(container, 'click', this._toggleMeasure, this);
+		return this._container = container;
+	},
+	onRemove: function () {
+		L.DomEvent.off(this._container, 'click', this._toggleMeasure, this);
+	},
+	_attachMouseEvents: function () {
+		let map = this._map;
+		map.doubleClickZoom.disable();
+		L.DomEvent.on(map._container, 'keydown', this._escape, this);
+		L.DomEvent.on(map._container, 'dblclick', this._closePath, this);
+		map._container.style.cursor = 'crosshair';
+		map.on('click', this._addPoint, this);
+		map.on('mousemove', this._moving, this);
+	},
+	_removeMouseEvents: function () {
+		let map = this._map;
+		map.doubleClickZoom.enable();
+		L.DomEvent.off(map._container, 'keydown', this._escape, this);
+		L.DomEvent.off(map._container, 'dblclick', this._closePath, this);
+		map._container.style.cursor = this._defaultCursor;
+		map.off('click', this._addPoint, this);
+		map.off('mousemove', this._moving, this);
+	},
+	_disable: function () {
+		this._enabled = false;
+		this._container.classList.remove("leaflet-ruler-clicked");
+		this._layers.remove().clearLayers();
+		this._latlngs = [];
+		this._totalLength = 0;
+		this._removeMouseEvents();
+	},
+	_enable: function () {
+		this._enabled = true;
+		this._container.classList.add("leaflet-ruler-clicked");
+		this._circles = L.featureGroup().addTo(this._layers);
+		this._polyline = L.polyline([], this.options.lineStyle).addTo(this._layers);
+		this._layers.addTo(this._map);
+		this._latlngs = [];
+		this._totalLength = 0;
+		this._attachMouseEvents();
+	},
+	_toggleMeasure: function () {
+		this._enabled ? this._disable() : this._enable();
+	},
+	_drawTooltip: function (latlng, layer, incremental) {
+		let lastClick = this._latlngs[this._latlngs.length - 1] ?? latlng;
+		let bearing = this._calculateBearing(lastClick, latlng);
+		let distance = lastClick.distanceTo(latlng) * this.options.lengthUnit.factor;
+		let accumulated = this._totalLength + distance;
+		let totalLength = accumulated.toFixed(this.options.lengthUnit.decimal);
+		let plusLength = incremental ? '<br><div class="plus-length">(+' + distance.toFixed(this.options.lengthUnit.decimal) + ')</div>' : '';
+		this._totalLength = incremental ? this._totalLength : accumulated;
+		if (!layer.getTooltip()) layer.bindTooltip('', incremental ? { direction: "auto", sticky: true, offset: L.point(0, -40), className: 'moving-tooltip' } : { permanent: true, className: 'result-tooltip' }).openTooltip();
+		layer.setLatLng(latlng).setTooltipContent('<b>' + this.options.angleUnit.label + '</b>&nbsp;' + bearing.toFixed(this.options.angleUnit.decimal) + '&nbsp;' + this.options.angleUnit.display + '<br><b>' + this.options.lengthUnit.label + '</b>&nbsp;' + totalLength + '&nbsp;' + this.options.lengthUnit.display + plusLength);
+	},
+	_addPoint: function (e) {
+		let latlng = e.latlng || e;
+		let point = L.circleMarker(latlng, this.options.circleMarker).addTo(this._circles);
+		this._polyline.addLatLng(latlng);
+		if(this._latlngs.length && !latlng.equals(this._latlngs[this._latlngs.length - 1])){
+			this._drawTooltip(latlng, point, false);
+		}
+		this._latlngs.push(latlng);
+	},
+	_moving: function (e) {
+		if (this._latlngs.length) {
+			let lastCLick = this._latlngs[this._latlngs.length - 1];
+			if (!this._tempLine) this._tempLine = L.polyline([], this.options.lineStyle).addTo(this._map);
+			if (!this._tempPoint) this._tempPoint = L.circleMarker(e.latlng, this.options.circleMarker).addTo(this._map);
+			this._tempLine.setLatLngs([lastCLick, e.latlng]);
+			this._drawTooltip(e.latlng, this._tempPoint, true);
+			L.DomEvent.off(this._container, 'click', this._toggleMeasure, this);
+		}
+	},
+	_escape: function (e) {
+		if (e.keyCode === 27) {
+			if (this._latlngs.length) {
+				this._closePath();
+			} else {
+				this._enabled = true;
+				this._toggleMeasure();
+			}
+		}
+	},
+	_calculateBearing: function (start, end) {
+		const toRad = L.DomUtil.DEG_TO_RAD;
+		const toDeg = (this.options.angleUnit.factor / 2) / Math.PI;
+		let y = Math.sin((end.lng - start.lng) * toRad) * Math.cos(end.lat * toRad);
+		let x = Math.cos(start.lat * toRad) * Math.sin(end.lat * toRad) - Math.sin(start.lat * toRad) * Math.cos(end.lat * toRad) * Math.cos((end.lng - start.lng) * toRad);
+		return (Math.atan2(y, x) * toDeg + this.options.angleUnit.factor) % this.options.angleUnit.factor;
+	},
+	_closePath: function () {
+		if (this._tempLine) {
+			this._tempLine.remove();
+			this._tempLine = null;
+		}
+		if (this._tempPoint) {
+			this._tempPoint.remove();
+			this._tempLine = null;
+		}
+		if (this._latlngs.length <= 1) {
+			this._circles.remove();
+		}
+		this._enabled = false;
+		L.DomEvent.on(this._container, 'click', this._toggleMeasure, this);
+		this._toggleMeasure();
+	},
+});
+L.control.ruler = function (options) {
+	return new L.Control.Ruler(options);
+};  

package/libs/leaflet-ruler.min.css

@@ -0,0 +1 @@
+.leaflet-ruler{height:35px;width:35px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACx0lEQVRIS52VWahOURTHXRSJzBkiJcpYxgeS4oUi90GR4VK6DzcUD3gQIQ8UCXkwlCJRkjJEpqT7oGTMeHONmacyRRl/v9ve2n2d7/vOtevXPmefff5r7bXXXruiSf42gKkToTu0hY/wEk7CnWIyFWX0B/N9OkyF1tANdsEz6AIL4Sl8h8NwEK6nmsUMNGPSalgePFxLfwl2hrG39O1hM8yFobAKpsAGWAE/NJRloBfj++ErnIYesDj1qsjzRsYN2VhwdTPgUaGBkUF0e/D0TxDrRD8ehsFw6AcP4FrgCL17EpsrWAKDUgNtwuQP9FehJsyeSb8FbsOV8O0efVeYHOZV0h8N8w3dWXBOVWpgDwO/oBqc1BxciV7Pg3OJhz66ivPB+PoM8TnqRQPTeNkKfeALtAQ39QYsgE85xNsFz+voFe8AldFALS8DYU3waAd9b5gAv3OKn2HefagK4q64VgPm9k0we0wtN9pN6w+mY9qywqLnWeKXGa/WwHwYFSwrZtw/w9Ic4p5oxesLPG8Qd/UacMf13IE38ArGwN3EQJbnintOHsJsMOaG5Z+4/2vAY282eALd4FvQqoj4Aca3gQfPw1hSPBr4xoNH3bz1EO0D428r9LwpY3vB+nSolOfRQVeg1yOCgXH01pu+GeL+Y1hOwWOYBZlhieJxBU94eA2Lwo9WRw+X8fUEx0PUaPFowKW6Cg+UBc6M6AzrMsR1xtJR1vO4CkNk1TMLJoXBlcHQpvAePW+0eFyBRe45jAbL7fskhqm4MbdGmYruUU94l8zNfIyl4hhfLQteHqaiLYq7J4YlipvnXkgWRotgyRYNWB4st6bpizLiHsiO4H1gMrhnRVtarpcxy0vd+9eLPMvzhuMf1E7QmyC78xrQmDk+BC6Am98CLoKXi/dvWll1xjvjeAkD9YVXpkJ6ae7/BOPus4b+p9X9BdB/zv8zawwXAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:center}.leaflet-ruler-clicked,.leaflet-ruler:hover{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAE/ElEQVRIS6WVeWwUVRzHfzOzs7Pdi+7Rdq/ubrH0sNaKBFMCSEvBQLivFkhAE8GDYAyHATWgETUoMZ7BGCMBNKYiQbTKpYQKBqKlWmBbadmW7bbbFjv0mu2eM298M5SlpS3U+LL/zL6Zz/f7vr/3e4+AsQ6j80EgxTkKhGwkQRqQiLp5UtEOSDwOXf660TDEPfkGR75RTT8VF1EpJRJ6LsbrVuaZg2YtrWND8WD5FVajV9IcTyCOoYhv2QgcgE5fzWDmaAKU0eHa3RMStszNMqIdM+zUY3YdPFvRCG+VOCFFQ0N3mIfNJ3ywb3Em/BHgYNeZFnTc20OOU1Efd7eZtwBUxyWh4QLJGS6jFv04MU2bNWeCQRnoi8L7czPuG+RLJ31g0Smhsqk3dqGVa7wZZOZBb/31oQKm8ZMZRbxyU6FV9XaJmyQGZsNxBD/Ud8FXNWy/rzci9ER4Spqa5tYrit3jmNI8M2DnCRNvnm1Bu35tjcR4lH1HIDtbp+2NNuSmqCyTrBr4dMEDuH4A754LCLvOtQo44zouKp7hQagGIK+CIFgoipqPEHru6OocWJhtlAWk6GZ8cSXs64sd49qbSxMCaenu7+ZkGuftW5JJSy/FBARlh+vDF1tDfWEerYWullNDcjK5c9Q0Or/jcad++3SbbP8ueBn+S7glkOIsNTDUQf+mRxmtkoIIj6Bgb024hYtVhGPK9dDl7RsJvhPDtw3AcWzYuSd8vTcqOS8DrcUIKsUiWcDgyKghRLFgZ1E6vFhohfXfN8YP1bFVfW3N0/E0Ggu8CMNxfY9z7b5SCU4o6dMkhc4RYM61aulwU8fWSSqaIqEqEIRZBzzBSCg+HoIdncPglHgBG9ENdj4inEAXhZuBdQSYXBuWZOnfOLI61yTB1ld4Y1/+xe6Ndvo33Q+ON5Rc0GHOB+DS6gmF2XF6dkZy0eeLM8lU3EDGd6qiQRAnQnvz3wkBXFANdr5jkHMJXrS/NtTIRk5yN3wrErEMgsuNpkp13ViRZ0zdOtUOWiUJ2R/WxPibfmYk+Mp8E/XCT01y4y0/1HBfuCygMDljVzYW0DnmJKhuC8Lsg7WB7kCzQxa4y7nUF08euQblHlZMoqij93J+2yBBpzgjlzcUMJLAmeu9sOjrq+1cR7PtNvzVYrv+5WkOUvpAiqUYx+JlI6cwfPlosQyuHcGYnYECq9r2AV62O5mB9PcuItxjj2ho6uz/hcsRESbH4TX5qQv3LsigNbjJ7Huq+tkIT75enM4Mdx76mbvhXzYW54mIwOBeNd2l+eTs03nyYYIPqrhaSVGbC213xfLf4fIKAB9yqp4IW/VMvtKqVYJJrUhEeCdzGS5lbki22Wu5btYg0IwV2hrYIb0ywoN8VCTbXadDUTRz/9IJsCrfLL82CP7LQCyGcVab56HColQkCKL3ctWxTs/5+WMSAHwPGBih0rNxotqGL42R4DqLpebhKTNta7fvgWBfN7yybIoQjYdzoLPVey+RxHFtdrhfy05J2laxKjep5EAd3oqhhHNtqrm6YOoT6RKcIOXSwEdb1ojXLv35fDRQ99mYBKR6GOyu3zBhcowXTvR3+JdCWhqjVhk9FEW7Z5Wtw1vuFlwatb9XQmuD51J/MFQ+qgAheIdemSl5FoDgOuhs3o0/4vWOKcZkh/4bEJFKxAMA/6QhgsjzAvrH3+SXn0YZAinU/wuTosgK53+p+wAAAABJRU5ErkJggg==)}.leaflet-ruler-clicked{height:35px;width:35px;background-repeat:no-repeat;background-position:center;border-color:#7fff00!important}.leaflet-bar.leaflet-ruler{background-color:#fff}.leaflet-control.leaflet-ruler{cursor:pointer}.result-tooltip{background-color:#fff;border-width:medium;border-color:#de0000;font-size:smaller}.moving-tooltip{background-color:rgba(255,255,255,.7);background-clip:padding-box;opacity:.5;border:dotted;border-color:red;font-size:smaller}.plus-length{padding-left:45px}

package/libs/leaflet-ruler.min.js

@@ -0,0 +1 @@
+L.Control.Ruler=L.Control.extend({options:{position:"topright",circleMarker:{color:"red",radius:2},lineStyle:{color:"red",dashArray:"1,6"},lengthUnit:{display:"km",decimal:2,factor:.001,label:"Distance:"},angleUnit:{display:"&deg;",decimal:2,factor:360,label:"Bearing:"}},initialize:function(options){L.setOptions(this,options),this._layers=L.layerGroup(),this._enabled=!1},onAdd:function(map){this._defaultCursor=map._container.style.cursor,this._map=map;let container=L.DomUtil.create("div","leaflet-bar");return container.classList.add("leaflet-ruler"),L.DomEvent.disableClickPropagation(container),L.DomEvent.on(container,"click",this._toggleMeasure,this),this._container=container},onRemove:function(){L.DomEvent.off(this._container,"click",this._toggleMeasure,this)},_attachMouseEvents:function(){let map=this._map;map.doubleClickZoom.disable(),L.DomEvent.on(map._container,"keydown",this._escape,this),L.DomEvent.on(map._container,"dblclick",this._closePath,this),map._container.style.cursor="crosshair",map.on("click",this._addPoint,this),map.on("mousemove",this._moving,this)},_removeMouseEvents:function(){let map=this._map;map.doubleClickZoom.enable(),L.DomEvent.off(map._container,"keydown",this._escape,this),L.DomEvent.off(map._container,"dblclick",this._closePath,this),map._container.style.cursor=this._defaultCursor,map.off("click",this._addPoint,this),map.off("mousemove",this._moving,this)},_disable:function(){this._enabled=!1,this._container.classList.remove("leaflet-ruler-clicked"),this._map.removeLayer(this._layers),this._layers=L.layerGroup(),this._latlngs=[],this._totalLength=0,this._removeMouseEvents()},_enable:function(){this._enabled=!0,this._container.classList.add("leaflet-ruler-clicked"),this._circles=L.featureGroup().addTo(this._layers),this._polyline=L.polyline([],this.options.lineStyle).addTo(this._layers),this._layers.addTo(this._map),this._latlngs=[],this._totalLength=0,this._attachMouseEvents()},_toggleMeasure:function(){this._enabled?this._disable():this._enable()},_drawTooltip:function(latlng,layer,incremental){let clickCount=this._latlngs.length,lastClick=clickCount?this._latlngs[clickCount-1]:latlng,bearing=this._calculateBearing(lastClick,latlng),distance=lastClick.distanceTo(latlng)*this.options.lengthUnit.factor,totalLength,plusLength;incremental?(totalLength=(clickCount?distance+this._totalLength||0:distance).toFixed(this.options.lengthUnit.decimal),plusLength=clickCount?'<br><div class="plus-length">(+'+distance.toFixed(this.options.lengthUnit.decimal)+")</div>":""):(this._totalLength+=distance,totalLength=(clickCount?this._totalLength:distance).toFixed(this.options.lengthUnit.decimal),plusLength="");var text="<b>"+this.options.angleUnit.label+"</b>&nbsp;"+bearing.toFixed(this.options.angleUnit.decimal)+"&nbsp;"+this.options.angleUnit.display+"<br><b>"+this.options.lengthUnit.label+"</b>&nbsp;"+totalLength+"&nbsp;"+this.options.lengthUnit.display+plusLength;layer.setLatLng(latlng);let tooltip=layer.getTooltip();return tooltip?tooltip.setTooltipContent(text):layer.bindTooltip(text,incremental?{direction:"auto",sticky:!0,offset:L.point(0,-40),className:"moving-tooltip"}:{permanent:!0,className:"result-tooltip"}).openTooltip(),layer},_addPoint:function(e){let latlng=e.latlng||e,point=L.circleMarker(latlng,this.options.circleMarker).addTo(this._circles);this._polyline.addLatLng(latlng),this._latlngs.length&&!latlng.equals(this._latlngs[this._latlngs.length-1])&&this._drawTooltip(latlng,point,!1),this._latlngs.push(latlng)},_moving:function(e){if(this._latlngs.length){let lastCLick=this._latlngs[this._latlngs.length-1];this._tempLine||(this._tempLine=L.polyline([],this.options.lineStyle).addTo(this._map)),this._tempPoint||(this._tempPoint=L.circleMarker(e.latlng,this.options.circleMarker).addTo(this._map)),this._tempLine.setLatLngs([lastCLick,e.latlng]),this._drawTooltip(e.latlng,this._tempPoint,!0),L.DomEvent.off(this._container,"click",this._toggleMeasure,this)}},_escape:function(e){27===e.keyCode&&(this._latlngs.length?this._closePath():(this._enabled=!0,this._toggleMeasure()))},_calculateBearing:function(start,end){const toRad=L.DomUtil.DEG_TO_RAD,toDeg=this.options.angleUnit.factor/2/Math.PI;let y=Math.sin((end.lng-start.lng)*toRad)*Math.cos(end.lat*toRad),x=Math.cos(start.lat*toRad)*Math.sin(end.lat*toRad)-Math.sin(start.lat*toRad)*Math.cos(end.lat*toRad)*Math.cos((end.lng-start.lng)*toRad);return(Math.atan2(y,x)*toDeg+this.options.angleUnit.factor)%this.options.angleUnit.factor},_closePath:function(){this._tempLine&&(this._map.removeLayer(this._tempLine),this._tempLine=null),this._tempPoint&&(this._map.removeLayer(this._tempPoint),this._tempLine=null),this._latlngs.length<=1&&this._map.removeLayer(this._circles),this._enabled=!1,L.DomEvent.on(this._container,"click",this._toggleMeasure,this),this._toggleMeasure()}}),L.control.ruler=function(options){return new L.Control.Ruler(options)};

package/package.json

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