street view control

website/src/lib/components/street-view-control/StreetViewControl.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
+	import { Toggle } from '$lib/components/ui/toggle';
+	import { PersonStanding } from 'lucide-svelte';
+	import { MapillaryLayer } from './Mapillary';
+	import { GoogleRedirect } from './Google';
+	import { map, streetViewEnabled } from '$lib/stores';
+	import { settings } from '$lib/db';
+
+	const { streetViewSource } = settings;
+
+	let googleRedirect: GoogleRedirect;
+	let mapillaryLayer: MapillaryLayer;
+
+	$: if ($map) {
+		googleRedirect = new GoogleRedirect($map);
+		mapillaryLayer = new MapillaryLayer($map);
+	}
+
+	$: if (mapillaryLayer) {
+		if ($streetViewSource === 'mapillary') {
+			googleRedirect.remove();
+			if ($streetViewEnabled) {
+				mapillaryLayer.add();
+			} else {
+				mapillaryLayer.remove();
+			}
+		} else {
+			mapillaryLayer.remove();
+			if ($streetViewEnabled) {
+				googleRedirect.add();
+			} else {
+				googleRedirect.remove();
+			}
+		}
+	}
+</script>
+
+<CustomControl class="w-[29px] h-[29px]">
+	<Toggle bind:pressed={$streetViewEnabled} class="w-full h-full rounded p-0">
+		<PersonStanding size="22" />
+	</Toggle>
+</CustomControl>