@raruto/leaflet-elevation 2.6.0 → 2.7.0

package/libs/leaflet-ruler.css

@@ -1,42 +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;
-}
+.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

@@ -1,183 +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);
+/*
+ * 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: '&deg;',
+			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/package.json

@@ -1,17 +1,15 @@
 {
   "name": "@raruto/leaflet-elevation",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "A Leaflet plugin that allows to add elevation profiles using d3js",
   "type": "module",
   "main": "dist/leaflet-elevation.min.js",
   "browser": "dist/leaflet-elevation.min.js",
   "module": "src/index.js",
   "scripts": {
-    "test": "uvu . \"(examples|src)[\\\\/].*\\.spec\\.js$\"",
-    "build": "rollup -c build/rollup.config.js",
-    "watch": "rollup -c build/rollup.config.js --watch",
-    "dev": "npm-run-all --print-label --parallel serve watch",
-    "serve": "http-server",
+    "test": "node --test --test-concurrency=1 \"examples/*.spec.js\" \"src/*.spec.js\"",
+    "build": "node build/build.js",
+    "dev": "node build/dev.js",
     "version": "npm run build && git add -A"
   },
   "repository": {
@@ -50,20 +48,9 @@
   },
   "homepage": "https://github.com/Raruto/leaflet-elevation#readme",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^24.1.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-terser": "^0.4.1",
-    "http-server": "^14.1.1",
-    "jsdom": "^21.1.1",
+    "esbuild": "^0.28.2",
     "leaflet": "^1.7.1",
-    "npm-run-all": "^4.1.5",
-    "playwright": "^1.32.3",
-    "postcss": "^8.4.23",
-    "postcss-copy": "^7.1.0",
-    "postcss-import": "^15.1.0",
-    "rollup": "^3.21.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "uvu": "^0.5.6"
+    "playwright": "^1.32.3"
   },
   "peerDependencies": {
     "@tmcw/togeojson": "5.6.2",

package/src/components/chart.js

@@ -155,6 +155,12 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 		}
 
 		const focus   = (e) => {
+			const sourceEvent = e.sourceEvent || e;
+			// fixes: https://github.com/Raruto/leaflet-elevation/issues/311
+			if (!this.options.detached && sourceEvent.stopPropagation) {
+				sourceEvent.stopPropagation();
+			}
+
 			if (this._data.length && (e.type != 'brush' /*|| e.sourceEvent*/)) {
 				let rect    = this._chart.panes.brush.select('.overlay').node();
 				let coords  = d3.pointers(e, rect)[0];

package/src/components/marker.js

@@ -52,7 +52,9 @@ export var Marker = L.Class.extend({
 					let point = this._map.latLngToLayerPoint(this._latlng);
 					point     = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
 
-					let yMax = (this.control._height() / props.yCoordMax * point[this.options.yAttr]);
+					// Keep the zero baseline unless the track extends below sea level.
+					let yMin = props.yCoordMin || 0;
+					let yMax = (this.control._height() / (props.yCoordMax - yMin) * (point[this.options.yAttr] - yMin));
 
 					if (!isFinite(yMax) || isNaN(yMax)) yMax = 0;
 

package/src/components/summary.js

@@ -1,43 +1,43 @@
-const _ = L.Control.Elevation.Utils;
-
-export var Summary = L.Class.extend({
-	initialize(opts, control) {
-		this.options = opts;
-		this.control = control;
-		this.labels = {};
-
-		let summary = this._container = _.create("div", "elevation-summary " + (opts.summary ? opts.summary + "-summary" : ''));
-		_.style(summary, 'max-width', opts.width ? opts.width + 'px' : '');
-	},
-
-	render() {
-		return container => container.append(() => this._container);
-	},
-
-	reset() {
-		this._container.innerHTML = '';
-	},
-
-	append(className, label, value) {
-		this._container.innerHTML += `<span class="${className}"><span class="summarylabel">${label}</span><span class="summaryvalue">${value}</span></span>`;
-		return this;
-	},
-
-	update() {
-		Object
-		.keys(this.labels)
-		.sort((a, b) => this.labels[a].order - this.labels[b].order) // TODO: any performance issues?
-		.forEach((i)=> {
-			let value = typeof this.labels[i].value !== "function" ? this.labels[i].value : this.labels[i].value(this.control.track_info, this.labels[i].unit || '');
-			this.append(i /*+ " order-" + this.labels[i].order*/, L._(this.labels[i].label), value, this.labels[i].order);
-		});
-	},
-
-	_registerSummary(data) {
-		for (let i in data) {
-			data[i].order = data[i].order ?? 1000;
-			this.labels[i] = data[i];
-		}
-	}
-
-});
+const _ = L.Control.Elevation.Utils;
+
+export var Summary = L.Class.extend({
+	initialize(opts, control) {
+		this.options = opts;
+		this.control = control;
+		this.labels = {};
+
+		let summary = this._container = _.create("div", "elevation-summary " + (opts.summary ? opts.summary + "-summary" : ''));
+		_.style(summary, 'max-width', opts.width ? opts.width + 'px' : '');
+	},
+
+	render() {
+		return container => container.append(() => this._container);
+	},
+
+	reset() {
+		this._container.innerHTML = '';
+	},
+
+	append(className, label, value) {
+		this._container.innerHTML += `<span class="${className}"><span class="summarylabel">${label}</span><span class="summaryvalue">${value}</span></span>`;
+		return this;
+	},
+
+	update() {
+		Object
+		.keys(this.labels)
+		.sort((a, b) => this.labels[a].order - this.labels[b].order) // TODO: any performance issues?
+		.forEach((i)=> {
+			let value = typeof this.labels[i].value !== "function" ? this.labels[i].value : this.labels[i].value(this.control.track_info, this.labels[i].unit || '');
+			this.append(i /*+ " order-" + this.labels[i].order*/, L._(this.labels[i].label), value, this.labels[i].order);
+		});
+	},
+
+	_registerSummary(data) {
+		for (let i in data) {
+			data[i].order = data[i].order ?? 1000;
+			this.labels[i] = data[i];
+		}
+	}
+
+});

package/src/control.js

@@ -71,6 +71,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 
 		this._data      = [];
 		this.track_info = {};
+		this._yCoordMin = 0;
+		this._yCoordMax = -Infinity;
 
 		this._fireEvt("eledata_clear");
 
@@ -186,6 +188,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this._start          = L.circleMarker([0,0], (opts.trkStart || Options.trkStart));
 		this._end            = L.circleMarker([0,0], (opts.trkEnd || Options.trkEnd));
 		this._chartEnabled   = true;
+		this._yCoordMin      = 0;
 		this._yCoordMax      = -Infinity;
 		this.track_info      = {};
 		//  this.handlers        = [];
@@ -362,6 +365,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 
 			this.fire("elepoint_added", { point: point, index: this._data.length - 1 });
 
+			if (this._yCoordMin > this._data[this._data.length - 1][this.options.yAttr]) this._yCoordMin = this._data[this._data.length - 1][this.options.yAttr];
 			if (this._yCoordMax < this._data[this._data.length - 1][this.options.yAttr]) this._yCoordMax = this._data[this._data.length - 1][this.options.yAttr];
 		});
 
@@ -1262,6 +1266,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			this._marker.update({
 				map         : this._map,
 				item        : item,
+				yCoordMin   : this._yCoordMin,
 				yCoordMax   : this._yCoordMax || 0,
 				options     : this.options
 			});