From 6aaf45bcd9e14f9b42e6737f5574cf635f246eb2 Mon Sep 17 00:00:00 2001 From: "Stanislav Lechev [0xAF]" Date: Fri, 20 Sep 2024 04:30:14 +0300 Subject: [PATCH] add geodesic lines and distance info to Leaflet/OSM --- htdocs/lib/Leaflet.js | 11 ++++++++++- htdocs/map-leaflet.js | 4 ++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/htdocs/lib/Leaflet.js b/htdocs/lib/Leaflet.js index 2ae552e3..3fed5651 100644 --- a/htdocs/lib/Leaflet.js +++ b/htdocs/lib/Leaflet.js @@ -113,7 +113,9 @@ LLocator.prototype.addListener = function (e, f) { // function LCall() { - this._line = L.polyline([[0, 0], [0, 0]], { + // https://github.com/henrythasler/Leaflet.Geodesic + // inherits from leaflet's polyline + this._line = L.geodesic([[0, 0], [0, 0]], { dashArray : [4, 4], dashOffset : 0, color : '#000000', @@ -130,6 +132,13 @@ LCall.prototype.setMap = function(map = null) { LCall.prototype.setEnds = function(lat1, lon1, lat2, lon2) { this._line.setLatLngs([[lat1, lon1], [lat2, lon2]]); + const totalDistance = (this._line.statistics.totalDistance !== undefined + ? (this._line.statistics.totalDistance > 10000) + ? (this._line.statistics.totalDistance / 1000).toFixed(0) + ' km' + : (this._line.statistics.totalDistance).toFixed(0) + ' m' + : 'invalid') + // options for setText(): https://github.com/makinacorpus/Leaflet.TextPath + this._line.setText(' ► ' + totalDistance, { offset: 10}); }; LCall.prototype.setColor = function(color) { diff --git a/htdocs/map-leaflet.js b/htdocs/map-leaflet.js index f159ebd4..a1167275 100644 --- a/htdocs/map-leaflet.js +++ b/htdocs/map-leaflet.js @@ -265,6 +265,10 @@ MapManager.prototype.initializeMap = function(receiver_gps, api_key, weather_key // add zoom control new L.Control.Zoom({ position: 'bottomright' }).addTo(map); + // load geodesic and textpath plugins plugin + $.getScript('https://cdn.jsdelivr.net/npm/leaflet.geodesic'); + $.getScript('https://cdn.jsdelivr.net/npm/leaflet-textpath@1.2.3/leaflet.textpath.min.js'); + // add night overlay $.getScript('https://unpkg.com/@joergdietrich/leaflet.terminator@1.0.0/L.Terminator.js').done(function () { var pane = map.createPane('nite');