use store to access map object

website/src/lib/components/Map.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount } from 'svelte';
 
 	import mapboxgl from 'mapbox-gl';
 	import 'mapbox-gl/dist/mapbox-gl.css';
@@ -7,14 +7,15 @@
 	import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 	import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
 
+	import { map } from '$lib/stores';
+
 	mapboxgl.accessToken =
 		'pk.eyJ1IjoiZ3B4c3R1ZGlvIiwiYSI6ImNrdHVoM2pjNTBodmUycG1yZTNwcnJ3MzkifQ.YZnNs9s9oCQPzoXAWs_SLg';
 
-	export let map: mapboxgl.Map | null = null;
 	export let distanceUnits: 'metric' | 'imperial' = 'metric';
 
 	onMount(() => {
-		map = new mapboxgl.Map({
+		$map = new mapboxgl.Map({
 			container: 'map',
 			style: { version: 8, sources: {}, layers: [] },
 			projection: { name: 'mercator' },
@@ -24,15 +25,15 @@
 			logoPosition: 'bottom-right'
 		});
 
-		map.addControl(
+		$map.addControl(
 			new mapboxgl.AttributionControl({
 				compact: true
 			})
 		);
 
-		map.addControl(new mapboxgl.NavigationControl());
+		$map.addControl(new mapboxgl.NavigationControl());
 
-		map.addControl(
+		$map.addControl(
 			new MapboxGeocoder({
 				accessToken: mapboxgl.accessToken,
 				mapboxgl: mapboxgl,
@@ -40,7 +41,7 @@
 			})
 		);
 
-		map.addControl(
+		$map.addControl(
 			new mapboxgl.GeolocateControl({
 				positionOptions: {
 					enableHighAccuracy: true
@@ -50,18 +51,12 @@
 			})
 		);
 
-		map.addControl(
+		$map.addControl(
 			new mapboxgl.ScaleControl({
 				unit: distanceUnits
 			})
 		);
 	});
-
-	onDestroy(() => {
-		if (map) {
-			map.remove();
-		}
-	});
 </script>
 
 <div {...$$restProps}>