map fullscreen button

2 files changed, 73 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;
diff --git a/static/icons/full.svg b/static/icons/full.svg
new file mode 100644
index 00000000..db8c33e9
--- /dev/null
+++ b/static/icons/full.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 4C23 2.34315 21.6569 1 20 1H16C15.4477 1 15 1.44772 15 2C15 2.55228 15.4477 3 16 3H20C20.5523 3 21 3.44772 21 4V8C21 8.55228 21.4477 9 22 9C22.5523 9 23 8.55228 23 8V4Z" fill="#0F0F0F"/>
+<path d="M23 16C23 15.4477 22.5523 15 22 15C21.4477 15 21 15.4477 21 16V20C21 20.5523 20.5523 21 20 21H16C15.4477 21 15 21.4477 15 22C15 22.5523 15.4477 23 16 23H20C21.6569 23 23 21.6569 23 20V16Z" fill="#0F0F0F"/>
+<path d="M4 21H8C8.55228 21 9 21.4477 9 22C9 22.5523 8.55228 23 8 23H4C2.34315 23 1 21.6569 1 20V16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16V20C3 20.5523 3.44772 21 4 21Z" fill="#0F0F0F"/>
+<path d="M1 8C1 8.55228 1.44772 9 2 9C2.55228 9 3 8.55228 3 8L3 4C3 3.44772 3.44772 3 4 3H8C8.55228 3 9 2.55228 9 2C9 1.44772 8.55228 1 8 1H4C2.34315 1 1 2.34315 1 4V8Z" fill="#0F0F0F"/>
+</svg>
\ No newline at end of file