ua1zbe
/
openwebrxplus
mirror of https://github.com/luarvique/openwebrx
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add geodesic lines and distance info to Leaflet/OSM (#60)

This commit is contained in:
Stanislav Lechev [0xAF] 2024-09-20 06:44:38 +03:00 committed by GitHub
parent f4259eddd1
commit 06665b8335
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
htdocs/lib/Leaflet.js
View File

@ -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) {

4
htdocs/map-leaflet.js
View File

@ -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');