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

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

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>
</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>
{% end %}

View File

@@ -69,8 +69,8 @@
</div>
<script src="/js/common.js?v=1775242169"></script>
<script src="/js/add-spot.js?v=1775242169"></script>
<script src="/js/common.js?v=1775377643"></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>
{% end %}

View File

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

View File

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

View File

@@ -45,12 +45,11 @@
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
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/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/storage.js?v=1775242169"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775242169"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.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=1775377643"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775377643"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775377643"></script>
</head>
<body>

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>

View File

@@ -1,11 +1,41 @@
<div class="card">
<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-check form-check-inline">
<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>
</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>

View File

@@ -223,8 +223,9 @@
</div>
</div>
<script src="/js/common.js?v=1775242169"></script>
<script src="/js/conditions.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/common.js?v=1775377643"></script>
<script src="/js/conditions.js?v=1775377643"></script>
<script>$(document).ready(function () {
$("#nav-link-conditions").addClass("active");
}); <!-- highlight active page in nav --></script>

View File

@@ -47,6 +47,9 @@
<div class="col">
{% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %}
</div>
<div class="col">
{% module Template("cards/basemap.html", web_ui_options=web_ui_options) %}
</div>
<div class="col">
{% module Template("cards/map-features.html", web_ui_options=web_ui_options) %}
</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-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://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://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>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script>
<script src="/js/common.js?v=1775242169"></script>
<script src="/js/spotsbandsandmap.js?v=1775242169"></script>
<script src="/js/map.js?v=1775242169"></script>
<script src="/js/common.js?v=1775377643"></script>
<script src="/js/spotsbandsandmap.js?v=1775377643"></script>
<script src="/js/map.js?v=1775377643"></script>
<script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

View File

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

View File

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