add mapillary frame close button

website/src/lib/components/street-view-control/Mapillary.ts

@@ -1,7 +1,6 @@
 import mapboxgl from "mapbox-gl";
 import { Viewer } from 'mapillary-js/dist/mapillary.module';
 import 'mapillary-js/dist/mapillary.css';
-import { t } from "svelte-i18n";
 import { resetCursor, setPointerCursor } from "$lib/utils";
 
 const mapillarySource = {
@@ -47,18 +46,14 @@ export class MapillaryLayer {
     onMouseEnterBinded = this.onMouseEnter.bind(this);
     onMouseLeaveBinded = this.onMouseLeave.bind(this);
 
-    constructor(map: mapboxgl.Map) {
+    constructor(map: mapboxgl.Map, container: HTMLElement) {
         this.map = map;
 
-        const container = document.createElement('div');
-        container.style.width = '400px';
-        container.style.height = '300px';
-        container.className = 'rounded-md border-background border-2'
-
         this.viewer = new Viewer({
             accessToken: 'MLY|4381405525255083|3204871ec181638c3c31320490f03011',
             container,
         });
+        container.classList.remove('hidden');
 
         this.popup = new mapboxgl.Popup({
             closeButton: false,
@@ -109,6 +104,10 @@ export class MapillaryLayer {
         this.popup.remove();
     }
 
+    closePopup() {
+        this.popup.remove();
+    }
+
     onMouseEnter(e: mapboxgl.MapLayerMouseEvent) {
         this.popup.addTo(this.map).setLngLat(e.lngLat);
         this.viewer.resize();

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

@@ -1,7 +1,7 @@
 <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 { PersonStanding, X } from 'lucide-svelte';
 	import { MapillaryLayer } from './Mapillary';
 	import { GoogleRedirect } from './Google';
 	import { map, streetViewEnabled } from '$lib/stores';
@@ -11,10 +11,11 @@
 
 	let googleRedirect: GoogleRedirect;
 	let mapillaryLayer: MapillaryLayer;
+	let container: HTMLElement;
 
 	$: if ($map) {
 		googleRedirect = new GoogleRedirect($map);
-		mapillaryLayer = new MapillaryLayer($map);
+		mapillaryLayer = new MapillaryLayer($map, container);
 	}
 
 	$: if (mapillaryLayer) {
@@ -41,3 +42,21 @@
 		<PersonStanding size="22" />
 	</Toggle>
 </CustomControl>
+
+<div
+	bind:this={container}
+	class="hidden relative w-[50vw] h-[40vh] rounded-md border-background border-2"
+>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		class="absolute top-0 right-0 z-10 bg-background p-1 rounded-bl-md cursor-pointer"
+		on:click={() => {
+			if (mapillaryLayer) {
+				mapillaryLayer.closePopup();
+			}
+		}}
+	>
+		<X size="16" />
+	</div>
+</div>