map fullscreen button

1 files changed, 66 insertions, 16 deletions

diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index edd20632..3904fffa 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -8,12 +8,44 @@
 
 	export let locations;
 	let map;
-	let mapContainer;
+	let mapContainer, mapWrapper;
 	let markers = [];
 
 	let currentIndex = -1;
 	let timeout;
 
+	let full = () => {
+		if (!document.fullscreenElement) {
+			if (mapWrapper.requestFullscreen) {
+				mapWrapper.requestFullscreen();
+			} else if (mapWrapper.mozRequestFullScreen) {
+				/* Firefox */
+				mapWrapper.mozRequestFullScreen();
+			} else if (mapWrapper.webkitRequestFullscreen) {
+				/* Chrome, Safari & Opera */
+				mapWrapper.webkitRequestFullscreen();
+			} else if (mapWrapper.msRequestFullscreen) {
+				/* IE/Edge */
+				mapWrapper.msRequestFullscreen();
+			}
+
+      map.resize();
+		} else {
+			if (document.exitFullscreen) {
+				document.exitFullscreen();
+			} else if (document.mozCancelFullScreen) {
+				/* Firefox */
+				document.mozCancelFullScreen();
+			} else if (document.webkitExitFullscreen) {
+				/* Chrome, Safari and Opera */
+				document.webkitExitFullscreen();
+			} else if (document.msExitFullscreen) {
+				/* IE/Edge */
+				document.msExitFullscreen();
+			}
+		}
+	};
+
 	function select(m) {
 		stopFlying();
 		currentIndex = inview.indexOf(m);
@@ -188,6 +220,18 @@
 				map.on('touchstart', stopFlying);
 				map.on('wheel', stopFlying);
 				map.on('dragstart', stopFlying);
+
+				document.addEventListener('fullscreenchange', onFullScreenChange, false);
+				document.addEventListener('webkitfullscreenchange', onFullScreenChange, false);
+				document.addEventListener('mozfullscreenchange', onFullScreenChange, false);
+				document.addEventListener('MSFullscreenChange', onFullScreenChange, false);
+
+				function onFullScreenChange() {
+          console.log("resizing")
+					if (map) {
+						map.resize(); // This will adjust the map size to fit the new container size
+					}
+				}
 			});
 		}
 	});
@@ -200,21 +244,23 @@
 </script>
 
 <div class="container mx-auto max-w-4xl">
-	<div class="flex w-full">
-		<div class="mx-auto h-[550px] w-full z-0" bind:this={mapContainer} />
+	<div class="flex w-full h-[350px]" id="map" bind:this={mapWrapper}>
+		<div id="map-container" class="mx-auto h-full w-full z-0" bind:this={mapContainer} />
 		<div class="relative">
-			<button
-				class="absolute flex top-2 right-2 rounded-full border-2 border-black bg-white w-10 h-10"
-				on:click={toggle}
-			>
-				{#if timeout}
-					<Icon icon="pause" style="w-4 m-auto" />
-				{:else}
-					<Icon icon="play" style="w-4 m-auto" />
-				{/if}
-			</button>
+			<div class="flex absolute flex top-2 right-2 gap-2">
+				<button class="rounded-full border-2 border-black bg-white w-10 h-10" on:click={toggle}>
+					{#if timeout}
+						<Icon icon="pause" style="w-4 m-auto" />
+					{:else}
+						<Icon icon="play" style="w-4 m-auto" />
+					{/if}
+				</button>
+				<button class="rounded-full border-2 border-black bg-white w-10 h-10" on:click={full}>
+					<Icon icon="full" style="w-4 m-auto" />
+				</button>
+			</div>
 
-			<div class="absolute bottom-2 right-2 w-60 h-60 bg-white overflow-y-scroll p-4 bg-opacity-80">
+			<div class="absolute bottom-2 right-2 w-60 h-28 bg-white overflow-y-scroll p-4 bg-opacity-80">
 				{#each inview as m}
 					<button
 						on:click={() => select(m)}
@@ -226,11 +272,15 @@
 			</div>
 		</div>
 	</div>
-
-	{inview.length}
 </div>
 
 <style>
+	#map:fullscreen,
+	#map-container:fullscreen {
+		width: 100% !important;
+		height: 100% !important;
+	}
+
 	:global(.maplibregl-popup-close-button) {
 		font-size: 24px;
 		padding: 8px;