Add Maidenhead (QTH) to OSM and make OSM control panel smaller. (#45)

* add Maidenhead (QTH) extra layer to Leaflet (OSM) map

* fix a browser console error on vendor-provided markers

* make Leaflet OSM map control pannel smaller
This commit is contained in:
Stanislav Lechev [0xAF] 2024-01-03 03:16:33 +02:00 committed by GitHub
parent 7e7b707c8b
commit 9749c70bd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 5 deletions

View File

@ -72,7 +72,7 @@ ul {
.openwebrx-map-legend select {
background-color: #FFF;
border-color: #DDD;
padding: 5px;
padding: 0 5px;
}
.openwebrx-map-console {
@ -95,3 +95,11 @@ ul {
text-align: center;
white-space: nowrap;
}
.leaflet-control-layers {
line-height: 0.5 !important;
}
.leaflet-control-layers-expanded {
padding: 5px !important;
}

View File

@ -165,7 +165,8 @@ Marker.prototype.age = function(age) {
// Remove visual marker element from its parent, if that element exists.
Marker.prototype.remove = function() {
if (this.div) {
this.div.parentNode.removeChild(this.div);
if (this.div.parentNode && this.div.parentNode.removeChild)
this.div.parentNode.removeChild(this.div);
this.div = null;
}
};

View File

@ -142,6 +142,13 @@ var mapExtraLayers = [
attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'
},
},
{
name: 'Maidenhead-QTH',
createLayer: async function () {
await $.when($.getScript('https://ha8tks.github.io/Leaflet.Maidenhead/src/L.Maidenhead.js'));
return L.maidenhead({ color: 'rgba(255, 0, 0, 0.4)' });
}
},
];
// reasonable default; will be overriden by server
@ -348,11 +355,17 @@ MapManager.prototype.initializeMap = function(receiver_gps, api_key, weather_key
}
function addMapOverlay (name) {
$.each(mapExtraLayers, function (idx, mel) {
$.each(mapExtraLayers, async function (idx, mel) {
if (mel.name === name) {
if (!mel.layer) {
mel.options.apikey = apiKeys[mel.depends];
mel.layer = L.tileLayer(mel.url, mel.options);
if (apiKeys[mel.depends]) mel.options.apikey = apiKeys[mel.depends];
if (typeof mel.url !== 'undefined') {
mel.layer = L.tileLayer(mel.url, mel.options);
} else if (typeof mel.createLayer === 'function') {
mel.layer = await mel.createLayer();
} else {
console.error('Cannot create layer for ' + mel.name);
}
}
if (map.hasLayer(mel.layer))
map.removeLayer(mel.layer);