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

Add the ability to centre and zoom the map with URL params. #50

Browse Source
This commit is contained in:
Ian Renton
2026-04-05 10:42:01 +01:00
parent 06c16e2f1f
commit 60126b0010
11 changed files with 66 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -35,7 +35,7 @@ These are supplied with the URL to the page you want to embed, for example for a
The supported parameters are as follows. Generally these match the equivalent parameters in the real Spothole API, where a mapping exists.
| Name | Allowed Values | Default | Example | Description |
|----------------|-------------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|-------------------|-------------------------|---------|--------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `embedded` | `true`, `false` | `false` | `?embedded=true` | Enables embedded mode. |
| `color-scheme` | `light`, `dark`, `auto` | `auto` | `?color-scheme=dark` | Forces light or dark mode in preference to the operating system default. |
| `time-zone` | `UTC`, `local` | `UTC` | `?time-zone=local` | Sets times to be in UTC or local time. |
@@ -48,6 +48,9 @@ The supported parameters are as follows. Generally these match the equivalent pa
| `mode_type` | Comma-separated list | (all) | `?mode_type=PHONE,CW` | Sets the list of mode types that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
| `dx_continent` | Comma-separated list | (all) | `?dx_continent=NA,SA` | Sets the list of DX Continents that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface. |
| `de_continent` | Comma-separated list | (all) | `?de_continent=EU` | Sets the list of DE Continents that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
| `map-center-lat` | Numeric (decimal) | (auto) | `?map-center-lat=51.5` | Sets the initial latitude of the map centre on the map page. If omitted, the map auto-fits to the loaded spots. |
| `map-center-lon` | Numeric (decimal) | (auto) | `?map-center-lon=-0.1` | Sets the initial longitude of the map centre on the map page. If omitted, the map auto-fits to the loaded spots. |
| `map-zoom` | Numeric (integer) | (auto) | `?map-zoom=6` | Sets the initial zoom level of the map on the map page. If omitted, the map auto-fits to the loaded spots. |
More will be added soon to allow customisation of filters and other display properties.

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>
</div>
<script src="/js/common.js?v=1775381180"></script>
<script src="/js/common.js?v=1775382121"></script>
<script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

4
templates/add_spot.html
View File

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

4
templates/alerts.html
View File

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

6
templates/bands.html
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=1775381180"></script>
<script src="/js/spotsbandsandmap.js?v=1775381180"></script>
<script src="/js/bands.js?v=1775381180"></script>
<script src="/js/common.js?v=1775382121"></script>
<script src="/js/spotsbandsandmap.js?v=1775382121"></script>
<script src="/js/bands.js?v=1775382121"></script>
<script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

8
templates/base.html
View File

@@ -46,10 +46,10 @@
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775381180"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775381180"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775381180"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775381180"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775382121"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775382121"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775382121"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775382121"></script>
</head>
<body>

4
templates/conditions.html
View File

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

6
templates/map.html
View File

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

6
templates/spots.html
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=1775381180"></script>
<script src="/js/spotsbandsandmap.js?v=1775381180"></script>
<script src="/js/spots.js?v=1775381180"></script>
<script src="/js/common.js?v=1775382121"></script>
<script src="/js/spotsbandsandmap.js?v=1775382121"></script>
<script src="/js/spots.js?v=1775382121"></script>
<script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

4
templates/status.html
View File

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

28
webassets/js/map.js
View File

@@ -210,6 +210,7 @@ function loadOptions() {
// to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
// loading settings, so this needs to be called before that.
loadURLParams();
loadMapURLParams();
// Load settings from settings storage now all the controls are available
loadSettings();
@@ -344,6 +345,30 @@ function enableWABWAIGrid(show) {
}
}
// Load map-specific URL parameters for center position and zoom level.
// These set Leaflet state directly rather than form controls, so they live here rather than in loadURLParams().
// If any parameter is applied, firstLoad is set to false so updateMap() does not override the position.
function loadMapURLParams() {
let params = new URLSearchParams(document.location.search);
let lat = parseFloat(params.get("map-center-lat"));
let lon = parseFloat(params.get("map-center-lon"));
let zoom = parseFloat(params.get("map-zoom"));
let hasLatLon = !isNaN(lat) && !isNaN(lon);
let hasZoom = !isNaN(zoom);
if (hasLatLon || hasZoom) {
if (hasLatLon && hasZoom) {
map.setView([lat, lon], zoom);
} else if (hasLatLon) {
map.setView([lat, lon], map.getZoom());
} else {
map.setZoom(zoom);
}
firstLoad = false;
}
}
// Set up the map
function setUpMap() {
// Create map
@@ -415,7 +440,8 @@ function setUpMap() {
backgroundTileLayer.bringToBack();
}
// Display a default view.
// Display a default view. This will only last until the spots are first loaded, at which point the map will zoom
// to the extent of ths spots.
map.setView([30, 0], 3);
}