Map tweaks #42

views/webpage_map.tpl

@@ -108,7 +108,7 @@
                                 <h5 class="card-title">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="updateMap();">
+                                      <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>
@@ -130,5 +130,6 @@
 <script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>
 
 <script src="/js/common.js"></script>
+<script src="/js/spotandmap.js"></script>
 <script src="/js/map.js"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>

views/webpage_spots.tpl

@@ -238,5 +238,6 @@
 </div>
 
 <script src="/js/common.js"></script>
+<script src="/js/spotandmap.js"></script>
 <script src="/js/spots.js"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>

webassets/js/map.js

@@ -1,10 +1,6 @@
-// How often to query the server?
+// Map layers
-const REFRESH_INTERVAL_SEC = 60;
-
-// Storage for the spot data that the server gives us.
-var spots = []
-// Marker layer
 var markersLayer;
+var terminator;
 
 // Load spots and populate the table.
 function loadSpots() {
@@ -13,6 +9,7 @@ function loadSpots() {
         spots = jsonData;
         // Update map
         updateMap();
+        terminator.setTime();
     });
 }
 
@@ -79,36 +76,9 @@ function loadOptions() {
     });
 }
 
-// Dynamically add CSS code for the band bullets and band toggle buttons to be in the appropriate colour.
+// Method called when any display property is changed to reload the map and persist the display settings.
-// Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p".
+function displayUpdated() {
-function addBandColourCSS(band_options) {
+    updateMap();
-    var $style = $('<style>');
-    band_options.forEach(o => {
-        // CSS doesn't like IDs with decimal points in, so we need to replace that
-        var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
-        $style.append(`.band-bullet-${cssFormattedBandName} { color: ${o['color']}; }`);
-        $style.append(`#filter-button-label-band-${cssFormattedBandName} { border-color: ${o['color']}; color: var(--bs-primary);}`);
-        $style.append(`.btn-check:checked + #filter-button-label-band-${cssFormattedBandName} { background-color: ${o['color']}; color: ${o['contrast_color']};}`);
-    });
-    $('html > head').append($style);
-}
-
-// Generate bands filter card. This one is a special case.
-function generateBandsMultiToggleFilterCard(band_options) {
-    // Create a button for each option
-    band_options.forEach(o => {
-        // CSS doesn't like IDs with decimal points in, so we need to replace that in the same way as when we originally
-        // queried the options endpoint and set our CSS.
-        var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
-        $("#band-options").append(`<input type="checkbox" class="btn-check filter-button-band storeable-checkbox" name="options" id="filter-button-band-${cssFormattedBandName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline" id="filter-button-label-band-${cssFormattedBandName}" for="filter-button-band-${cssFormattedBandName}">${o['name']}</label> `);
-    });
-    // Create All/None buttons
-    $("#band-options").append(` <span style="display: inline-block"><button id="filter-button-band-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', true);">All</button>&nbsp;<button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button></span>`);
-}
-
-// Method called when any filter is changed to reload the spots and persist the filter settings.
-function filtersUpdated() {
-    loadSpots();
     saveSettings();
 }
 
@@ -149,7 +119,7 @@ function setUpMap() {
     });
 
     // Add basemap
-    backgroundTileLayer = L.tileLayer.provider("CartoDB.Voyager", {
+    backgroundTileLayer = L.tileLayer.provider("OpenStreetMap.Mapnik", {
         opacity: 1,
         edgeBufferTiles: 1
     });

webassets/js/spotandmap.js

@@ -0,0 +1,38 @@
+// How often to query the server?
+const REFRESH_INTERVAL_SEC = 60;
+
+// Storage for the spot data that the server gives us.
+var spots = []
+
+// Dynamically add CSS code for the band bullets and band toggle buttons to be in the appropriate colour.
+// Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p".
+function addBandColourCSS(band_options) {
+    var $style = $('<style>');
+    band_options.forEach(o => {
+        // CSS doesn't like IDs with decimal points in, so we need to replace that
+        var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
+        $style.append(`.band-bullet-${cssFormattedBandName} { color: ${o['color']}; }`);
+        $style.append(`#filter-button-label-band-${cssFormattedBandName} { border-color: ${o['color']}; color: var(--bs-primary);}`);
+        $style.append(`.btn-check:checked + #filter-button-label-band-${cssFormattedBandName} { background-color: ${o['color']}; color: ${o['contrast_color']};}`);
+    });
+    $('html > head').append($style);
+}
+
+// Generate bands filter card. This one is a special case.
+function generateBandsMultiToggleFilterCard(band_options) {
+    // Create a button for each option
+    band_options.forEach(o => {
+        // CSS doesn't like IDs with decimal points in, so we need to replace that in the same way as when we originally
+        // queried the options endpoint and set our CSS.
+        var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
+        $("#band-options").append(`<input type="checkbox" class="btn-check filter-button-band storeable-checkbox" name="options" id="filter-button-band-${cssFormattedBandName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline" id="filter-button-label-band-${cssFormattedBandName}" for="filter-button-band-${cssFormattedBandName}">${o['name']}</label> `);
+    });
+    // Create All/None buttons
+    $("#band-options").append(` <span style="display: inline-block"><button id="filter-button-band-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', true);">All</button>&nbsp;<button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button></span>`);
+}
+
+// Method called when any filter is changed to reload the spots and persist the filter settings.
+function filtersUpdated() {
+    loadSpots();
+    saveSettings();
+}

webassets/js/spots.js

@@ -1,9 +1,3 @@
-// How often to query the server?
-const REFRESH_INTERVAL_SEC = 60;
-
-// Storage for the spot data that the server gives us.
-var spots = []
-
 // Load spots and populate the table.
 function loadSpots() {
     $.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
@@ -283,45 +277,12 @@ function loadOptions() {
     });
 }
 
-// Dynamically add CSS code for the band bullets and band toggle buttons to be in the appropriate colour.
-// Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p".
-function addBandColourCSS(band_options) {
-    var $style = $('<style>');
-    band_options.forEach(o => {
-        // CSS doesn't like IDs with decimal points in, so we need to replace that
-        var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
-        $style.append(`.band-bullet-${cssFormattedBandName} { color: ${o['color']}; }`);
-        $style.append(`#filter-button-label-band-${cssFormattedBandName} { border-color: ${o['color']}; color: var(--bs-primary);}`);
-        $style.append(`.btn-check:checked + #filter-button-label-band-${cssFormattedBandName} { background-color: ${o['color']}; color: ${o['contrast_color']};}`);
-    });
-    $('html > head').append($style);
-}
-
-// Generate bands filter card. This one is a special case.
-function generateBandsMultiToggleFilterCard(band_options) {
-    // Create a button for each option
-    band_options.forEach(o => {
-        // CSS doesn't like IDs with decimal points in, so we need to replace that in the same way as when we originally
-        // queried the options endpoint and set our CSS.
-        var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
-        $("#band-options").append(`<input type="checkbox" class="btn-check filter-button-band storeable-checkbox" name="options" id="filter-button-band-${cssFormattedBandName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline" id="filter-button-label-band-${cssFormattedBandName}" for="filter-button-band-${cssFormattedBandName}">${o['name']}</label> `);
-    });
-    // Create All/None buttons
-    $("#band-options").append(` <span style="display: inline-block"><button id="filter-button-band-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', true);">All</button>&nbsp;<button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button></span>`);
-}
-
 // Work out if the user's entered grid is a valid Maidenhead grid
 function isUserGridValid() {
     userGrid = $("#userGrid").val().toUpperCase();
     return latLonForGridCentre(userGrid) != null;
 }
 
-// Method called when any filter is changed to reload the spots and persist the filter settings.
-function filtersUpdated() {
-    loadSpots();
-    saveSettings();
-}
-
 // Method called when the user's grid input is changed.
 function userGridUpdated() {
     var userGridValid = isUserGridValid();