Stop location when switching tabs

web-frontend/src/lib/Map.svelte

@@ -9,15 +9,25 @@
 	let locationChecked;
 	let locationControl;
 
+	export let isVisible = true;
 	export let onMapClick = () => {};
 	export let map;
 
+	$: if (isVisible) {
+		locationCheckedChanged(false);
+	}
+
 	const locationCheckedChanged = (setValue) => {
+		if (!map) {
+			return;
+		}
 		if (setValue === true || setValue === false) {
 			// Shortcut to set it in this function, if they passed a boolean
 			locationChecked = !!setValue;
 		}
 
+		console.log('Setting chceked to ', setValue);
+
 		if (locationChecked) {
 			map.locate({ setView: true, watch: true, enableHighAccuracy: true });
 		} else {
@@ -103,7 +113,7 @@
 	});
 </script>
 
-<div id="container" class="h-3/4">
+<div id="container" class="h-3/4" class:invisible={!isVisible}>
 	<!-- TODO: I want to set the border background to some tailwind class, but I don't know how.
     This is to copy .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar border style
     -->

web-frontend/src/routes/app/+page.svelte

@@ -156,6 +156,12 @@
 			outputValue = `${e}`;
 		}
 	};
+
+	let mapIsVisible = false;
+
+	$: {
+		mapIsVisible = initSuccess && tabInfo.selected == 0;
+	}
 </script>
 
 <h1 class="font-bold text-2xl pb-4">App</h1>
@@ -193,6 +199,4 @@
 	<Error {message}>Could not start core module</Error>
 {/await}
 
-<span class:invisible={!initSuccess || tabInfo.selected !== 0}>
+<Map bind:map {onMapClick} on:locationfound={locationfound} bind:isVisible={mapIsVisible} />
-	<Map bind:map {onMapClick} on:locationfound={locationfound} />
-</span>