w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-10-27 08:49:27 +00:00
Code Issues 11 Packages Projects Releases Wiki Activity

Map tweaks #42

Browse Source
This commit is contained in:
Ian Renton
2025-10-16 22:31:08 +01:00
parent 87846f09f8
commit 2151e441c4
5 changed files with 48 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
webassets/js/map.js
View File

@@ -1,10 +1,6 @@
// How often to query the server?
const REFRESH_INTERVAL_SEC = 60;
// Storage for the spot data that the server gives us.
var spots = []
// Marker layer
// Map layers
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.
// 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();
// Method called when any display property is changed to reload the map and persist the display settings.
function displayUpdated() {
updateMap();
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
});