maps update corp
This commit is contained in:
@@ -135,7 +135,7 @@
|
||||
<div class="flex h-5 w-5 shrink-0 items-center justify-center">
|
||||
<svg
|
||||
class="h-4.5 w-4.5 transition-transform duration-200"
|
||||
class:rotate-180={!collapsed}
|
||||
class:rotate-180={collapsed}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
||||
@@ -1,11 +1,32 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import { storedLocation } from '$lib/stores/settings';
|
||||
|
||||
// a #zoom/lat/lng(/bearing/pitch) hash on OUR url is piped through to the
|
||||
// map, so map positions can be bookmarked/shared via ombrella links
|
||||
// (the reverse direction is not possible: the iframe is cross-origin, so
|
||||
// its internal hash changes are unreadable from here)
|
||||
let hashOverride = $state<string | null>(null);
|
||||
|
||||
onMount(() => {
|
||||
const readHash = () => {
|
||||
const hash = window.location.hash;
|
||||
hashOverride = /^#\d+(\.\d+)?\/-?\d+(\.\d+)?\/-?\d+(\.\d+)?/.test(hash) ? hash : null;
|
||||
};
|
||||
readHash();
|
||||
window.addEventListener('hashchange', readHash);
|
||||
return () => window.removeEventListener('hashchange', readHash);
|
||||
});
|
||||
|
||||
// the embedded map understands maplibre's #zoom/lat/lng hash, so the iframe
|
||||
// opens focused on the selected location (zoomed out to regional scale);
|
||||
// picking a new location while on this page recenters the map
|
||||
const iframeSrc = $derived(
|
||||
`https://maps.open-meteo.com/#6/${$storedLocation.latitude.toFixed(3)}/${$storedLocation.longitude.toFixed(3)}`
|
||||
`https://maps.open-meteo.com/${
|
||||
hashOverride ??
|
||||
`#6/${$storedLocation.latitude.toFixed(3)}/${$storedLocation.longitude.toFixed(3)}`
|
||||
}`
|
||||
);
|
||||
</script>
|
||||
|
||||
@@ -18,11 +39,15 @@
|
||||
<!-- Full-bleed map: the layout drops its padding for this route. The map
|
||||
follows our theme through the color-scheme declared on :root/.dark -->
|
||||
<div class="h-full w-full bg-background">
|
||||
<!-- allow="cross-origin-isolated" delegates SharedArrayBuffer use to the
|
||||
map; it only takes effect when this site itself is served with
|
||||
COOP/COEP headers (see README, Deployment) -->
|
||||
<iframe
|
||||
src={iframeSrc}
|
||||
title="Open-Meteo Interactive Map"
|
||||
loading="lazy"
|
||||
allowfullscreen
|
||||
allow="cross-origin-isolated"
|
||||
referrerpolicy="no-referrer"
|
||||
class="block h-full w-full border-0"
|
||||
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
|
||||
|
||||
Reference in New Issue
Block a user