street view control

website/src/lib/components/custom-control/CustomControl.svelte

@@ -1,3 +1,15 @@
+<script lang="ts" context="module">
+	import { writable } from 'svelte/store';
+
+	let currentId = 0;
+
+	function getId() {
+		return currentId++;
+	}
+
+	let lastInitializedId = writable(-1);
+</script>
+
 <script lang="ts">
 	import CustomControl from './CustomControl';
 
@@ -6,20 +18,22 @@
 	export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'top-right';
 
 	let container: HTMLDivElement | null = null;
+	let id = getId();
 
-	$: if ($map && container) {
+	$: if ($map && container && $lastInitializedId + 1 === id) {
 		if (position.includes('right')) container.classList.add('float-right');
 		else container.classList.add('float-left');
 		container.classList.remove('hidden');
 		let control = new CustomControl(container);
 		$map.addControl(control, position);
+		lastInitializedId.set(id);
 	}
 </script>
 
 <div
 	bind:this={container}
 	class="{$$props.class ||
-		''} clear-both translate-0 m-[10px] pointer-events-auto bg-background rounded shadow-md hidden"
+		''} clear-both translate-0 m-[10px] mb-0 pointer-events-auto bg-background rounded shadow-md hidden"
 >
 	<slot />
 </div>