From b56d48668c4d89c1454488dfae19a40e4552b6ac Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Tue, 3 Sep 2024 10:26:10 +0300
Subject: [PATCH 1/3] feat: Add map type toggle button

---
 src/lib/MapTypeButton/MapTypeButton.svelte | 53 ++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/lib/MapTypeButton/MapTypeButton.svelte

diff --git a/src/lib/MapTypeButton/MapTypeButton.svelte b/src/lib/MapTypeButton/MapTypeButton.svelte
new file mode 100644
index 0000000..d1e11d4
--- /dev/null
+++ b/src/lib/MapTypeButton/MapTypeButton.svelte
@@ -0,0 +1,53 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+    export let mapTypeId = 'roadmap';
+
+    const mapTypes = ['roadmap', 'satellite', 'hybrid', 'terrain'];
+
+    function cycleMapType() {
+        const currentIndex = mapTypes.indexOf(mapTypeId);
+        const nextIndex = (currentIndex + 1) % mapTypes.length;
+        mapTypeId = mapTypes[nextIndex];
+        dispatch('mapTypeChanged', mapTypeId);
+    }
+
+    function getMapTypeIcon(type) {
+        switch (type) {
+            case 'roadmap': return '🗺️';
+            case 'satellite': return '🛰️';
+            case 'hybrid': return '🌎';
+            case 'terrain': return '⛰️';
+            default: return '🗺️';
+        }
+    }
+</script>
+
+<button class="map-type-button" on:click={cycleMapType}>
+    {getMapTypeIcon(mapTypeId)}
+</button>
+
+<style>
+	.map-type-button {
+		background-color: #fff;
+		border-radius: 2px;
+		box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+		margin: 10px;
+		font-size: 25px;
+		color: #666;
+		overflow: hidden;
+		height: 40px;
+		width: 40px;
+		position: absolute;
+		bottom: 5.8em;
+		right: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+    .map-type-button:hover {
+        background-color: #f0f0f0;
+    }
+</style>

From 237f538b76216badc397dd708a64551ff179a6a8 Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Tue, 3 Sep 2024 10:26:33 +0300
Subject: [PATCH 2/3] feat: Add map type toggle feature

---
 src/components/map/GoogleMap.svelte | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/map/GoogleMap.svelte b/src/components/map/GoogleMap.svelte
index 1c0cc0d..dfb395a 100644
--- a/src/components/map/GoogleMap.svelte
+++ b/src/components/map/GoogleMap.svelte
@@ -14,6 +14,7 @@
 	import LocationButton from '$lib/LocationButton/LocationButton.svelte';
 	import StopMarker from './StopMarker.svelte';
 	import RouteMap from './RouteMap.svelte';
+	import MapTypeButton from '$lib/MapTypeButton/MapTypeButton.svelte';
 
 	export let selectedTrip = null;
 	export let selectedRoute = null;
@@ -27,6 +28,7 @@
 	const dispatch = createEventDispatcher();
 
 	let map = null;
+	let mapTypeId = 'roadmap';
 
 	let markers = [];
 	let allStops = [];
@@ -185,6 +187,13 @@
 		});
 	}
 
+	function handleMapTypeChange(event) {
+		mapTypeId = event.detail;
+		if (map) {
+			map.setMapTypeId(mapTypeId);
+		}
+	}
+
 	onMount(async () => {
 		if (!window.google) {
 			loadGoogleMapsLibrary(apiKey);
@@ -218,6 +227,7 @@
 {/if}
 
 <LocationButton on:locationObtained={handleLocationObtained} />
+<MapTypeButton {mapTypeId} on:mapTypeChanged={handleMapTypeChange} />
 
 <style>
 	#map {

From e245a7d654dac818b4b5799eb67c94d792b27b6f Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Tue, 3 Sep 2024 10:31:50 +0300
Subject: [PATCH 3/3] chore: Linting and formatting

---
 src/lib/MapTypeButton/MapTypeButton.svelte | 51 ++++++++++++----------
 1 file changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/lib/MapTypeButton/MapTypeButton.svelte b/src/lib/MapTypeButton/MapTypeButton.svelte
index d1e11d4..94698fa 100644
--- a/src/lib/MapTypeButton/MapTypeButton.svelte
+++ b/src/lib/MapTypeButton/MapTypeButton.svelte
@@ -1,31 +1,36 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher } from 'svelte';
 
-    const dispatch = createEventDispatcher();
-    export let mapTypeId = 'roadmap';
+	const dispatch = createEventDispatcher();
+	export let mapTypeId = 'roadmap';
 
-    const mapTypes = ['roadmap', 'satellite', 'hybrid', 'terrain'];
+	const mapTypes = ['roadmap', 'satellite', 'hybrid', 'terrain'];
 
-    function cycleMapType() {
-        const currentIndex = mapTypes.indexOf(mapTypeId);
-        const nextIndex = (currentIndex + 1) % mapTypes.length;
-        mapTypeId = mapTypes[nextIndex];
-        dispatch('mapTypeChanged', mapTypeId);
-    }
+	function cycleMapType() {
+		const currentIndex = mapTypes.indexOf(mapTypeId);
+		const nextIndex = (currentIndex + 1) % mapTypes.length;
+		mapTypeId = mapTypes[nextIndex];
+		dispatch('mapTypeChanged', mapTypeId);
+	}
 
-    function getMapTypeIcon(type) {
-        switch (type) {
-            case 'roadmap': return '🗺️';
-            case 'satellite': return '🛰️';
-            case 'hybrid': return '🌎';
-            case 'terrain': return '⛰️';
-            default: return '🗺️';
-        }
-    }
+	function getMapTypeIcon(type) {
+		switch (type) {
+			case 'roadmap':
+				return '🗺️';
+			case 'satellite':
+				return '🛰️';
+			case 'hybrid':
+				return '🌎';
+			case 'terrain':
+				return '⛰️';
+			default:
+				return '🗺️';
+		}
+	}
 </script>
 
 <button class="map-type-button" on:click={cycleMapType}>
-    {getMapTypeIcon(mapTypeId)}
+	{getMapTypeIcon(mapTypeId)}
 </button>
 
 <style>
@@ -47,7 +52,7 @@
 		justify-content: center;
 	}
 
-    .map-type-button:hover {
-        background-color: #f0f0f0;
-    }
+	.map-type-button:hover {
+		background-color: #f0f0f0;
+	}
 </style>