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

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