Merge pull request #16 from OneBusAway/stop-marker

Added the Geolocation (current location of user) Feature

src/components/map/GoogleMap.svelte

@@ -1,4 +1,5 @@
 <script>
+	/* global google */
 	import { browser } from '$app/environment';
 	import { createEventDispatcher, onMount, onDestroy } from 'svelte';
 	import {
@@ -8,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';
 
@@ -87,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();
@@ -105,6 +127,7 @@
 </script>
 
 <div id="map"></div>
+<LocationButton on:locationObtained={handleLocationObtained} />
 
 <style>
 	#map {

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>