w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2026-04-29 18:25:58 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

Bring Spothole mapping to parity with my other tools by adding choice of basemap, opacity and overlays #50

Browse Source
This commit is contained in:
Ian Renton
2026-04-05 09:27:23 +01:00
parent 64afd4ed55
commit 497b84f5dc
13 changed files with 270 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/about.html
View File

@@ -67,7 +67,7 @@
<p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p> <p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
</div> </div>
<script src="/js/common.js?v=1775242169"></script> <script src="/js/common.js?v=1775377643"></script>
<script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

4
templates/add_spot.html
View File

@@ -69,8 +69,8 @@
</div> </div>
<script src="/js/common.js?v=1775242169"></script> <script src="/js/common.js?v=1775377643"></script>
<script src="/js/add-spot.js?v=1775242169"></script> <script src="/js/add-spot.js?v=1775377643"></script>
<script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

4
templates/alerts.html
View File

@@ -56,8 +56,8 @@
</div> </div>
<script src="/js/common.js?v=1775242169"></script> <script src="/js/common.js?v=1775377643"></script>
<script src="/js/alerts.js?v=1775242169"></script> <script src="/js/alerts.js?v=1775377643"></script>
<script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

6
templates/bands.html
View File

@@ -62,9 +62,9 @@
<script> <script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %}; let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script> </script>
<script src="/js/common.js?v=1775242169"></script> <script src="/js/common.js?v=1775377643"></script>
<script src="/js/spotsbandsandmap.js?v=1775242169"></script> <script src="/js/spotsbandsandmap.js?v=1775377643"></script>
<script src="/js/bands.js?v=1775242169"></script> <script src="/js/bands.js?v=1775377643"></script>
<script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

9
templates/base.html
View File

@@ -45,12 +45,11 @@
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775242169"></script> <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775377643"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775242169"></script> <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775377643"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775242169"></script> <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775377643"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775242169"></script> <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775377643"></script>
</head> </head>
<body> <body>

26
templates/cards/basemap.html Normal file
View File

@@ -0,0 +1,26 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Map Style</h5>
<p class="card-text spothole-card-text">
<label for="basemap" class="form-label">Basemap:</label>
<select id="basemap" class="storeable-select form-select" oninput="displayUpdated();">
<option value="OpenStreetMap.Mapnik" selected>OpenStreetMap Mapnik</option>
<option value="Esri.NatGeoWorldMap">ESRI NatGeo World Map</option>
<option value="Esri.WorldTopoMap">ESRI World Topo Map</option>
<option value="Esri.WorldShadedRelief">ESRI World Shaded Relief</option>
<option value="Esri.WorldImagery">ESRI World Imagery</option>
<option value="CartoDB.Voyager">CartoDB Voyager</option>
<option value="CartoDB.DarkMatter">CartoDB DarkMatter</option>
</select>
</p>
<p class="card-text spothole-card-text">
<label for="basemapOpacity" class="form-label">Opacity:</label>
<select id="basemapOpacity" class="storeable-select form-select" oninput="displayUpdated();">
<option value="1">100%</option>
<option value="0.75">75%</option>
<option value="0.5">50%</option>
<option value="0.25">25%</option>
</select>
</p>
</div>
</div>

32
templates/cards/map-features.html
View File

@@ -1,11 +1,41 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Map Features</h5> <h5 class="card-title mb-3">Map Features</h5>
<div class="form-group"> <div class="form-group">
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="mapShowGeodesics" value="mapShowGeodesics" oninput="displayUpdated();"> <input class="form-check-input storeable-checkbox" type="checkbox" id="mapShowGeodesics" value="mapShowGeodesics" oninput="displayUpdated();">
<label class="form-check-label" for="mapShowGeodesics">Geodesic Lines</label> <label class="form-check-label" for="mapShowGeodesics">Geodesic Lines</label>
</div> </div>
</div> </div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="showTerminator" oninput="displayUpdated();" checked>
<label class="form-check-label" for="showTerminator">Terminator / Greyline</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="showMaidenheadGrid" oninput="displayUpdated();">
<label class="form-check-label" for="showMaidenheadGrid">Maidenhead Grid</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="showCQZones" oninput="displayUpdated();">
<label class="form-check-label" for="showCQZones">CQ Zones</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="showITUZones" oninput="displayUpdated();">
<label class="form-check-label" for="showITUZones">ITU Zones</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="showWABWAIGrid" oninput="displayUpdated();">
<label class="form-check-label" for="showWABWAIGrid">WAB/WAI Grid</label>
</div>
</div>
</div> </div>
</div> </div>

5
templates/conditions.html
View File

@@ -223,8 +223,9 @@
</div> </div>
</div> </div>
<script src="/js/common.js?v=1775242169"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script src="/js/conditions.js?v=1775242169"></script> <script src="/js/common.js?v=1775377643"></script>
<script src="/js/conditions.js?v=1775377643"></script>
<script>$(document).ready(function () { <script>$(document).ready(function () {
$("#nav-link-conditions").addClass("active"); $("#nav-link-conditions").addClass("active");
}); <!-- highlight active page in nav --></script> }); <!-- highlight active page in nav --></script>

15
templates/map.html
View File

@@ -47,6 +47,9 @@
<div class="col"> <div class="col">
{% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %} {% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %}
</div> </div>
<div class="col">
{% module Template("cards/basemap.html", web_ui_options=web_ui_options) %}
</div>
<div class="col"> <div class="col">
{% module Template("cards/map-features.html", web_ui_options=web_ui_options) %} {% module Template("cards/map-features.html", web_ui_options=web_ui_options) %}
</div> </div>
@@ -65,14 +68,20 @@
<script src="https://cdn.jsdelivr.net/npm/leaflet-providers@2.0.0/leaflet-providers.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/leaflet-providers@2.0.0/leaflet-providers.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/src/assets/js/leaflet.extra-markers.min.js" type="module"></script> <script src="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/src/assets/js/leaflet.extra-markers.min.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script> <script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>
<script src="https://cdn.jsdelivr.net/npm/text-image/dist/text-image.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>
<script src="https://ianrenton.github.io/Leaflet.Maidenhead/src/L.Maidenhead.js"></script>
<script src="https://ha8tks.github.io/Leaflet.ITUzones/src/L.ITUzones.js"></script>
<script src="https://ha8tks.github.io/Leaflet.CQzones/src/L.CQzones.js"></script>
<script src="https://misc.ianrenton.com/Leaflet.WorkedAllBritainIreland/L.WorkedAllBritainIreland.js"></script>
<script> <script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %}; let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script> </script>
<script src="/js/common.js?v=1775242169"></script> <script src="/js/common.js?v=1775377643"></script>
<script src="/js/spotsbandsandmap.js?v=1775242169"></script> <script src="/js/spotsbandsandmap.js?v=1775377643"></script>
<script src="/js/map.js?v=1775242169"></script> <script src="/js/map.js?v=1775377643"></script>
<script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

6
templates/spots.html
View File

@@ -87,9 +87,9 @@
<script> <script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %}; let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script> </script>
<script src="/js/common.js?v=1775242169"></script> <script src="/js/common.js?v=1775377643"></script>
<script src="/js/spotsbandsandmap.js?v=1775242169"></script> <script src="/js/spotsbandsandmap.js?v=1775377643"></script>
<script src="/js/spots.js?v=1775242169"></script> <script src="/js/spots.js?v=1775377643"></script>
<script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

4
templates/status.html
View File

@@ -59,8 +59,8 @@
</div> </div>
</div> </div>
<script src="/js/common.js?v=1775242169"></script> <script src="/js/common.js?v=1775377643"></script>
<script src="/js/status.js?v=1775242169"></script> <script src="/js/status.js?v=1775377643"></script>
<script> <script>
$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav --> $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
</script> </script>

5
webassets/css/style.css
View File

@@ -220,11 +220,6 @@ div#map {
font-family: var(--bs-body-font-family) !important; font-family: var(--bs-body-font-family) !important;
} }
[data-bs-theme=dark] .leaflet-layer,
[data-bs-theme=dark] .leaflet-control-attribution {
filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
/* Make buttons overlaid on the map have a non-transparent fill so you can see the text better */ /* Make buttons overlaid on the map have a non-transparent fill so you can see the text better */
.btn-outline-secondary { .btn-outline-secondary {
--bs-btn-bg: var(--bs-body-bg) !important; --bs-btn-bg: var(--bs-body-bg) !important;

186
webassets/js/map.js
View File

@@ -1,10 +1,27 @@
// How often to query the server? // How often to query the server?
const REFRESH_INTERVAL_SEC = 60; const REFRESH_INTERVAL_SEC = 60;
// Colours
const MAIDENHEAD_GRID_COLOR_LIGHT = 'rgba(200, 140, 140, 1.0)';
const CQ_ZONES_COLOR_LIGHT = 'rgba(140, 200, 140, 1.0)';
const ITU_ZONES_COLOR_LIGHT = 'rgba(200, 200, 140, 1.0)';
const WAB_WAI_GRID_COLOR_LIGHT = 'rgba(140, 140, 200, 1.0)';
const MAIDENHEAD_GRID_COLOR_DARK = 'rgba(120, 60, 60, 1.0)';
const CQ_ZONES_COLOR_DARK = 'rgba(60, 120, 60, 1.0)';
const ITU_ZONES_COLOR_DARK = 'rgba(120, 120, 60, 1.0)';
const WAB_WAI_GRID_COLOR_DARK = 'rgba(60, 60, 120, 1.0)';
// Map layers // Map layers
var backgroundTileLayer;
var markersLayer; var markersLayer;
var geodesicsLayer; var geodesicsLayer;
var terminator; var terminator;
var maidenheadGrid;
var cqZones;
var ituZones;
var wabwaiGrid;
// Tracks the currently-loaded basemap provider string to avoid unnecessary tile reloads
var loadedBasemap;
// Load spots and populate the map. // Load spots and populate the map.
function loadSpots() { function loadSpots() {
@@ -13,7 +30,9 @@ function loadSpots() {
spots = jsonData; spots = jsonData;
// Update map // Update map
updateMap(); updateMap();
terminator.setTime(); if ($("#showTerminator")[0].checked) {
terminator.setTime();
}
}); });
} }
@@ -184,6 +203,15 @@ function loadOptions() {
// Load settings from settings storage now all the controls are available // Load settings from settings storage now all the controls are available
loadSettings(); loadSettings();
// Apply basemap and overlay settings now that controls have their saved values
setBasemap($("#basemap").val());
setBasemapOpacity(parseFloat($("#basemapOpacity").val()));
enableTerminator($("#showTerminator")[0].checked);
enableMaidenheadGrid($("#showMaidenheadGrid")[0].checked);
enableCQZones($("#showCQZones")[0].checked);
enableITUZones($("#showITUZones")[0].checked);
enableWABWAIGrid($("#showWABWAIGrid")[0].checked);
// Load spots and set up the timer // Load spots and set up the timer
loadSpots(); loadSpots();
setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000); setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000);
@@ -193,9 +221,118 @@ function loadOptions() {
// Method called when any display property is changed to reload the map and persist the display settings. // Method called when any display property is changed to reload the map and persist the display settings.
function displayUpdated() { function displayUpdated() {
updateMap(); updateMap();
setBasemap($("#basemap").val());
setBasemapOpacity(parseFloat($("#basemapOpacity").val()));
enableTerminator($("#showTerminator")[0].checked);
enableMaidenheadGrid($("#showMaidenheadGrid")[0].checked);
enableCQZones($("#showCQZones")[0].checked);
enableITUZones($("#showITUZones")[0].checked);
enableWABWAIGrid($("#showWABWAIGrid")[0].checked);
saveSettings(); saveSettings();
} }
// Set the basemap
function setBasemap(basemapname) {
// Only change if we have to, to avoid a flash of reloading content
if (loadedBasemap !== basemapname) {
loadedBasemap = basemapname;
if (typeof backgroundTileLayer !== 'undefined') {
map.removeLayer(backgroundTileLayer);
}
backgroundTileLayer = L.tileLayer.provider(basemapname, {
opacity: parseFloat($("#basemapOpacity").val()),
edgeBufferTiles: 1
});
backgroundTileLayer.addTo(map);
backgroundTileLayer.bringToBack();
// Identify dark basemaps to ensure we use white text for unselected icons
// and change the background colour appropriately
const basemapIsDark = basemapname === "CartoDB.DarkMatter" || basemapname === "Esri.WorldImagery";
$("#map").css('background-color', basemapIsDark ? "black" : "white");
// Change the colour of the grid and zone overlays to match
if (basemapIsDark) {
maidenheadGrid.options.color = MAIDENHEAD_GRID_COLOR_DARK;
cqZones.options.color = CQ_ZONES_COLOR_DARK;
ituZones.options.color = ITU_ZONES_COLOR_DARK;
wabwaiGrid.options.color = WAB_WAI_GRID_COLOR_DARK;
} else {
maidenheadGrid.options.color = MAIDENHEAD_GRID_COLOR_LIGHT;
cqZones.options.color = CQ_ZONES_COLOR_LIGHT;
ituZones.options.color = ITU_ZONES_COLOR_LIGHT;
wabwaiGrid.options.color = WAB_WAI_GRID_COLOR_LIGHT;
}
// Force regenerate overlays in the new colours
map.removeLayer(maidenheadGrid);
map.removeLayer(cqZones);
map.removeLayer(ituZones);
map.removeLayer(wabwaiGrid);
enableMaidenheadGrid($("#showMaidenheadGrid")[0].checked);
enableCQZones($("#showCQZones")[0].checked);
enableITUZones($("#showITUZones")[0].checked);
enableWABWAIGrid($("#showWABWAIGrid")[0].checked);
}
}
// Set the basemap opacity
function setBasemapOpacity(opacity) {
if (typeof backgroundTileLayer !== 'undefined') {
backgroundTileLayer.setOpacity(opacity);
}
}
// Shows/hides the terminator/greyline overlay
function enableTerminator(show) {
if (show) {
terminator.setTime();
terminator.addTo(map);
} else {
map.removeLayer(terminator);
}
}
// Shows/hides the Maidenhead grid overlay
function enableMaidenheadGrid(show) {
if (show) {
maidenheadGrid.addTo(map);
backgroundTileLayer.bringToBack();
} else {
map.removeLayer(maidenheadGrid);
}
}
// Shows/hides the CQ zone overlay
function enableCQZones(show) {
if (show) {
cqZones.addTo(map);
backgroundTileLayer.bringToBack();
} else {
map.removeLayer(cqZones);
}
}
// Shows/hides the ITU zone overlay
function enableITUZones(show) {
if (show) {
ituZones.addTo(map);
backgroundTileLayer.bringToBack();
} else {
map.removeLayer(ituZones);
}
}
// Shows/hides the WAB/WAI grid overlay
function enableWABWAIGrid(show) {
if (show) {
wabwaiGrid.addTo(map);
backgroundTileLayer.bringToBack();
} else {
map.removeLayer(wabwaiGrid);
}
}
// Set up the map // Set up the map
function setUpMap() { function setUpMap() {
// Create map // Create map
@@ -206,8 +343,9 @@ function setUpMap() {
}); });
// Add basemap // Add basemap
backgroundTileLayer = L.tileLayer.provider("OpenStreetMap.Mapnik", { loadedBasemap = $("#basemap").val();
opacity: 1, backgroundTileLayer = L.tileLayer.provider(loadedBasemap, {
opacity: parseFloat($("#basemapOpacity").val()),
edgeBufferTiles: 1 edgeBufferTiles: 1
}); });
backgroundTileLayer.addTo(map); backgroundTileLayer.addTo(map);
@@ -221,12 +359,50 @@ function setUpMap() {
geodesicsLayer = new L.LayerGroup(); geodesicsLayer = new L.LayerGroup();
geodesicsLayer.addTo(map); geodesicsLayer.addTo(map);
// Add terminator/greyline // Add terminator/greyline (toggleable)
terminator = L.terminator({ terminator = L.terminator({
interactive: false interactive: false
}); });
terminator.setStyle({fillColor: '#00000050'}); terminator.setStyle({fillColor: '#00000050'});
terminator.addTo(map); if ($("#showTerminator")[0].checked) {
terminator.addTo(map);
}
// Add Maidenhead grid (toggleable)
maidenheadGrid = L.maidenhead({
color : MAIDENHEAD_GRID_COLOR_LIGHT
});
if ($("#showMaidenheadGrid")[0].checked) {
maidenheadGrid.addTo(map);
backgroundTileLayer.bringToBack();
}
// Add CQ zone layer (toggleable)
cqZones = L.cqzones({
color : CQ_ZONES_COLOR_LIGHT
});
if ($("#showCQZones")[0].checked) {
cqZones.addTo(map);
backgroundTileLayer.bringToBack();
}
// Add ITU zone layer (toggleable)
ituZones = L.ituzones({
color : ITU_ZONES_COLOR_LIGHT
});
if ($("#showITUZones")[0].checked) {
ituZones.addTo(map);
backgroundTileLayer.bringToBack();
}
// Add WAB/WAI grid layer (toggleable)
wabwaiGrid = L.workedAllBritainIreland({
color : WAB_WAI_GRID_COLOR_LIGHT
});
if ($("#showWABWAIGrid")[0].checked) {
wabwaiGrid.addTo(map);
backgroundTileLayer.bringToBack();
}
// Display a default view. // Display a default view.
map.setView([30, 0], 3); map.setView([30, 0], 3);