Redownload when region data version changes

frontend/src/routes/worldtravel/[id]/+page.svelte

@@ -1,6 +1,17 @@
 <script lang="ts">
 	import RegionCard from '$lib/components/RegionCard.svelte';
 	import type { Region, VisitedRegion } from '$lib/types';
+	import {
+		DefaultMarker,
+		MapEvents,
+		MapLibre,
+		Popup,
+		Marker,
+		GeoJSON,
+		LineLayer,
+		FillLayer,
+		SymbolLayer
+	} from 'svelte-maplibre';
 	import type { PageData } from './$types';
 	export let data: PageData;
 	let regions: Region[] = data.props?.regions || [];
@@ -47,6 +58,23 @@
 	{/each}
 </div>
 
+{#if data.props && data.props.regions}
+	<MapLibre
+		style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+		class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
+		standardControls
+	>
+		{#each data.props.regions as marker}
+			<DefaultMarker lngLat={[marker.longitude, marker.latitude]}>
+				<Popup openOn="click" offset={[0, -10]}>
+					<div class="text-lg text-black font-bold">{marker.name}</div>
+					<p class="font-semibold text-black text-md">{marker.id}</p>
+				</Popup>
+			</DefaultMarker>
+		{/each}
+	</MapLibre>
+{/if}
+
 <svelte:head>
 	<title
 		>{data.props && data.props.country ? `Regions in ${data.props.country.name}` : 'Regions'}</title