From 9e102a3b54f701b96ccb8e505943819715f86420 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Fri, 5 Jul 2024 20:57:55 +0530
Subject: [PATCH 1/4] added the geolocation featutre that gets the current user
 location

---
 src/app.css                         | 22 ++++++++++++++++
 src/components/map/GoogleMap.svelte | 41 +++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)

diff --git a/src/app.css b/src/app.css
index b5c61c9..bf48dc1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,25 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.custom-map-control-button {
+	background-color: #fff;
+	border: 0;
+	border-radius: 2px;
+	box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+	margin: 10px;
+	padding: 0 0.3em;
+	font-size: 25px;
+	color: #666;
+	overflow: hidden;
+	height: 40px;
+	cursor: pointer;
+	position: absolute;
+	bottom: 4em;
+	right: 0;
+	z-index: 5;
+}
+.custom-map-control-button:hover {
+	background: rgb(235, 235, 235);
+	color: black;
+}
diff --git a/src/components/map/GoogleMap.svelte b/src/components/map/GoogleMap.svelte
index 126dffd..69ed9c5 100644
--- a/src/components/map/GoogleMap.svelte
+++ b/src/components/map/GoogleMap.svelte
@@ -44,6 +44,43 @@
 		if (browser) {
 			window.addEventListener('themeChange', handleThemeChange);
 		}
+
+		const locationButton = document.createElement('button');
+
+		locationButton.innerHTML = '<i class="fa-solid fa-location-crosshairs"></i>';
+		locationButton.classList.add('custom-map-control-button');
+		document.getElementById('map').appendChild(locationButton);
+
+		locationButton.addEventListener('click', () => {
+			if (navigator.geolocation) {
+				navigator.geolocation.getCurrentPosition(
+					(position) => {
+						const { latitude, longitude } = position.coords;
+						const userLocation = new google.maps.LatLng(latitude, longitude);
+						map.setCenter(userLocation);
+
+						new google.maps.Marker({
+							map: map,
+							position: userLocation,
+							title: 'Your Location',
+							icon: {
+								path: google.maps.SymbolPath.CIRCLE,
+								scale: 8,
+								fillColor: '#007BFF',
+								fillOpacity: 1,
+								strokeWeight: 2,
+								strokeColor: '#FFFFFF'
+							}
+						});
+					},
+					() => {
+						alert('Unable to retrieve your location.');
+					}
+				);
+			} else {
+				alert('Geolocation is not supported by this browser.');
+			}
+		});
 	}
 
 	async function loadStopsAndAddMarkers(lat, lng) {
@@ -104,6 +141,10 @@
 	});
 </script>
 
+<link
+	rel="stylesheet"
+	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+/>
 <div id="map"></div>
 
 <style>

From 108f626cc60b28cf87e437141873a47a18f2325d Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Fri, 5 Jul 2024 21:09:45 +0530
Subject: [PATCH 2/4] solved the google linting issue

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

diff --git a/src/components/map/GoogleMap.svelte b/src/components/map/GoogleMap.svelte
index 69ed9c5..7419535 100644
--- a/src/components/map/GoogleMap.svelte
+++ b/src/components/map/GoogleMap.svelte
@@ -1,4 +1,5 @@
 <script>
+	/* global google */
 	import { browser } from '$app/environment';
 	import { createEventDispatcher, onMount, onDestroy } from 'svelte';
 	import {

From a99341a1efa697cddddeb5e29e136a82fac2e216 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Sat, 6 Jul 2024 14:06:13 +0530
Subject: [PATCH 3/4] created a locationbutton component, removed the ccdn, and
 unnecessary code

---
 src/app.css                                  | 24 +-------
 src/components/map/GoogleMap.svelte          | 63 +++++++-------------
 src/lib/LocationButton/LocationButton.svelte | 59 ++++++++++++++++++
 3 files changed, 82 insertions(+), 64 deletions(-)
 create mode 100644 src/lib/LocationButton/LocationButton.svelte

diff --git a/src/app.css b/src/app.css
index bf48dc1..bd6213e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,25 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
-
-.custom-map-control-button {
-	background-color: #fff;
-	border: 0;
-	border-radius: 2px;
-	box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
-	margin: 10px;
-	padding: 0 0.3em;
-	font-size: 25px;
-	color: #666;
-	overflow: hidden;
-	height: 40px;
-	cursor: pointer;
-	position: absolute;
-	bottom: 4em;
-	right: 0;
-	z-index: 5;
-}
-.custom-map-control-button:hover {
-	background: rgb(235, 235, 235);
-	color: black;
-}
+@tailwind utilities;
\ No newline at end of file
diff --git a/src/components/map/GoogleMap.svelte b/src/components/map/GoogleMap.svelte
index 7419535..38f1257 100644
--- a/src/components/map/GoogleMap.svelte
+++ b/src/components/map/GoogleMap.svelte
@@ -9,6 +9,7 @@
 	} from '$env/static/public';
 
 	import { createMap, loadGoogleMapsLibrary, nightModeStyles } from '$lib/googleMaps';
+	import LocationButton from '$lib/LocationButton/LocationButton.svelte';
 
 	import { debounce } from '$lib/utils';
 
@@ -45,43 +46,6 @@
 		if (browser) {
 			window.addEventListener('themeChange', handleThemeChange);
 		}
-
-		const locationButton = document.createElement('button');
-
-		locationButton.innerHTML = '<i class="fa-solid fa-location-crosshairs"></i>';
-		locationButton.classList.add('custom-map-control-button');
-		document.getElementById('map').appendChild(locationButton);
-
-		locationButton.addEventListener('click', () => {
-			if (navigator.geolocation) {
-				navigator.geolocation.getCurrentPosition(
-					(position) => {
-						const { latitude, longitude } = position.coords;
-						const userLocation = new google.maps.LatLng(latitude, longitude);
-						map.setCenter(userLocation);
-
-						new google.maps.Marker({
-							map: map,
-							position: userLocation,
-							title: 'Your Location',
-							icon: {
-								path: google.maps.SymbolPath.CIRCLE,
-								scale: 8,
-								fillColor: '#007BFF',
-								fillOpacity: 1,
-								strokeWeight: 2,
-								strokeColor: '#FFFFFF'
-							}
-						});
-					},
-					() => {
-						alert('Unable to retrieve your location.');
-					}
-				);
-			} else {
-				alert('Geolocation is not supported by this browser.');
-			}
-		});
 	}
 
 	async function loadStopsAndAddMarkers(lat, lng) {
@@ -125,6 +89,26 @@
 		map.setOptions({ styles });
 	}
 
+	function handleLocationObtained(event) {
+		const { latitude, longitude } = event.detail;
+		const userLocation = new google.maps.LatLng(latitude, longitude);
+		map.setCenter(userLocation);
+
+		new google.maps.Marker({
+			map: map,
+			position: userLocation,
+			title: 'Your Location',
+			icon: {
+				path: google.maps.SymbolPath.CIRCLE,
+				scale: 8,
+				fillColor: '#007BFF',
+				fillOpacity: 1,
+				strokeWeight: 2,
+				strokeColor: '#FFFFFF'
+			}
+		});
+	}
+
 	onMount(async () => {
 		loadGoogleMapsLibrary(apiKey);
 		await initMap();
@@ -142,11 +126,8 @@
 	});
 </script>
 
-<link
-	rel="stylesheet"
-	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
-/>
 <div id="map"></div>
+<LocationButton on:locationObtained={handleLocationObtained} />
 
 <style>
 	#map {
diff --git a/src/lib/LocationButton/LocationButton.svelte b/src/lib/LocationButton/LocationButton.svelte
new file mode 100644
index 0000000..bc9c182
--- /dev/null
+++ b/src/lib/LocationButton/LocationButton.svelte
@@ -0,0 +1,59 @@
+<script>
+	import { onMount } from 'svelte';
+	import { createEventDispatcher } from 'svelte';
+	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
+	import { faLocationCrosshairs } from '@fortawesome/free-solid-svg-icons';
+
+	const dispatch = createEventDispatcher();
+
+	let button;
+
+	function handleClick() {
+		if (!navigator.geolocation) {
+			alert('Geolocation is not supported by this browser.');
+			return;
+		}
+
+		navigator.geolocation.getCurrentPosition(
+			(position) => {
+				const { latitude, longitude } = position.coords;
+				dispatch('locationObtained', { latitude, longitude });
+			},
+			() => {
+				alert('Unable to retrieve your location.');
+			}
+		);
+	}
+
+	onMount(() => {
+		button.addEventListener('click', handleClick);
+	});
+</script>
+
+<button bind:this={button} class="custom-map-control-button">
+	<FontAwesomeIcon icon={faLocationCrosshairs} />
+</button>
+
+<style>
+	.custom-map-control-button {
+		background-color: #fff;
+		border: 0;
+		border-radius: 2px;
+		box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+		margin: 10px;
+		padding: 0 0.3em;
+		font-size: 25px;
+		color: #666;
+		overflow: hidden;
+		height: 40px;
+		cursor: pointer;
+		position: absolute;
+		bottom: 4em;
+		right: 0;
+		z-index: 5;
+	}
+	.custom-map-control-button:hover {
+		background: rgb(235, 235, 235);
+		color: black;
+	}
+</style>

From af4900e6effe9cfe2736dcf0463d7802ebf1e7da Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Sat, 6 Jul 2024 14:08:56 +0530
Subject: [PATCH 4/4] formatted the app.css for eslint

---
 src/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index bd6213e..b5c61c9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;