Merge pull request #21 from OneBusAway/stopmarkers

Added the stop-marker with custom bus and directions

src/components/map/GoogleMap.svelte

@@ -10,11 +10,10 @@
 
 	import { createMap, loadGoogleMapsLibrary, nightModeStyles } from '$lib/googleMaps';
 	import LocationButton from '$lib/LocationButton/LocationButton.svelte';
+	import StopMarker from './StopMarker.svelte';
 
 	import { debounce } from '$lib/utils';
 
-	import busIcon from '$images/modes/bus.svg';
-
 	const dispatch = createEventDispatcher();
 
 	let map = null;
@@ -66,21 +65,47 @@
 	}
 
 	function addMarker(s) {
-		const glyphImg = document.createElement('img');
-		glyphImg.src = busIcon;
+		const container = document.createElement('div');
+		document.body.appendChild(container);
+		function handleClick() {
+			dispatch('stopSelected', { stop: s });
+		}
+
+		new StopMarker({
+			target: container,
+			props: {
+				stop: s,
+				onClick: handleClick
+			}
+		});
 
 		const marker = new window.google.maps.Marker({
 			map: map,
 			position: { lat: s.lat, lng: s.lon },
-			// icon: 'path/to/custom-icon.png',
-			title: s.name
-		});
-
-		marker.addListener('click', () => {
-			dispatch('stopSelected', { stop: s });
+			icon: {
+				url:
+					'data:image/svg+xml;charset=UTF-8,' +
+					encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"></svg>'),
+				anchor: new google.maps.Point(0, 0),
+				scaledSize: new google.maps.Size(1, 1)
+			},
+			label: {
+				text: ' ',
+				fontSize: '0px'
+			},
+			optimized: false
 		});
-
-		markers.push({ s, marker });
+		const overlay = new google.maps.OverlayView();
+		overlay.setMap(map);
+		overlay.draw = function () {
+			const projection = this.getProjection();
+			const position = projection.fromLatLngToDivPixel(marker.getPosition());
+			container.style.left = position.x - 20 + 'px';
+			container.style.top = position.y - 20 + 'px';
+			container.style.position = 'absolute';
+			this.getPanes().overlayMouseTarget.appendChild(container);
+		};
+		markers.push({ s, marker, overlay, element: container });
 	}
 
 	function handleThemeChange(event) {
@@ -123,6 +148,13 @@
 		if (browser) {
 			window.removeEventListener('themeChange', handleThemeChange);
 		}
+		markers.forEach(({ marker, overlay, element }) => {
+			marker.setMap(null);
+			overlay.setMap(null);
+			if (element && element.parentNode) {
+				element.parentNode.removeChild(element);
+			}
+		});
 	});
 </script>
 

src/components/map/StopMarker.svelte

@@ -0,0 +1,87 @@
+<script>
+	import { faBus, faCaretUp } from '@fortawesome/free-solid-svg-icons';
+	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
+	export let stop;
+	export let onClick;
+</script>
+
+<button class="custom-marker dark:border-[#5a2c2c]" on:click={onClick}>
+	<span class="bus-icon dark:text-white">
+		<FontAwesomeIcon icon={faBus} class="text-black " />
+		{#if stop.direction}
+			<span class="direction-arrow {stop.direction.toLowerCase()} dark:text-white">
+				<FontAwesomeIcon icon={faCaretUp} />
+			</span>
+		{/if}
+	</span>
+</button>
+
+<style>
+	.custom-marker {
+		width: 40px;
+		height: 40px;
+		border-radius: 5px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		background-color: rgba(255, 255, 255, 0.8);
+		border: 2px solid #444;
+	}
+
+	.custom-marker:hover {
+		cursor: pointer;
+	}
+
+	.bus-icon {
+		font-size: 24px;
+		color: #000;
+	}
+
+	.direction-arrow {
+		position: absolute;
+		font-size: 20px;
+		color: #000;
+	}
+
+	.direction-arrow.n {
+		top: -18px;
+		left: 12px;
+		transform: rotate(0deg);
+	}
+	.direction-arrow.ne {
+		top: -15px;
+		right: -10px;
+		transform: rotate(45deg);
+	}
+	.direction-arrow.e {
+		right: -13px;
+		top: 5px;
+		transform: rotate(90deg);
+	}
+	.direction-arrow.se {
+		bottom: -15px;
+		right: -10px;
+		transform: rotate(135deg);
+	}
+	.direction-arrow.s {
+		bottom: -18px;
+		left: 12px;
+		transform: rotate(180deg);
+	}
+	.direction-arrow.sw {
+		bottom: -15px;
+		left: -10px;
+		transform: rotate(225deg);
+	}
+	.direction-arrow.w {
+		left: -13px;
+		top: 5px;
+		transform: rotate(270deg);
+	}
+	.direction-arrow.nw {
+		top: -15px;
+		left: -10px;
+		transform: rotate(315deg);
+	}
+</style>