use store to access map object

website/src/lib/components/Data.svelte

@@ -1,11 +1,7 @@
 <script lang="ts">
-	import mapboxgl from 'mapbox-gl';
-
 	import GPX from './GPX.svelte';
 	import { GPXFile, parseGPX } from 'gpx';
 
-	export let map: mapboxgl.Map | null;
-
 	let files: GPXFile[] = [
 		parseGPX(`<?xml version="1.0" encoding="UTF-8"?>
 <gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
@@ -271,5 +267,5 @@
 </script>
 
 {#each files as file}
-	<GPX {map} {file} />
+	<GPX {file} />
 {/each}

website/src/lib/components/GPX.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
-	import mapboxgl from 'mapbox-gl';
 	import { GPXFile } from 'gpx';
 
-	export let file: GPXFile;
-	export let map: mapboxgl.Map | null;
+	import { map } from '$lib/stores';
 
-	$: if (map) {
-		map.on('load', () => {
-			console.log(map?.isStyleLoaded());
-			map.addSource('gpx', {
+	export let file: GPXFile;
+
+	$: if ($map) {
+		$map.on('load', () => {
+			$map.addSource('gpx', {
 				type: 'geojson',
 				data: file.toGeoJSON()
 			});
-			map.addLayer({
+			$map.addLayer({
 				id: 'gpx',
 				type: 'line',
 				source: 'gpx',

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}>

website/src/lib/components/custom-control/CustomControl.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
 	import CustomControl from './CustomControl';
-	import mapboxgl from 'mapbox-gl';
 
-	export let map: mapboxgl.Map | null;
+	import { map } from '$lib/stores';
+
 	export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'top-right';
 
 	let container: HTMLDivElement | null = null;
 
-	$: if (map && container) {
-		if (position.includes('right')) container.classList.add('float-right');
-		else container.classList.add('float-left');
-		container.classList.remove('hidden');
-		let control = new CustomControl(container);
-		map.addControl(control, position);
+	$: if ($map && container) {
+		$map.on('load', () => {
+			if (position.includes('right')) container.classList.add('float-right');
+			else container.classList.add('float-left');
+			container.classList.remove('hidden');
+			let control = new CustomControl(container);
+			$map.addControl(control, position);
+		});
 	}
 </script>
 

website/src/lib/components/layer-control/LayerControl.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import mapboxgl from 'mapbox-gl';
-
 	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
 	import LayerTree from './LayerTree.svelte';
 	import LayerControlSettings from './LayerControlSettings.svelte';
@@ -19,14 +17,16 @@
 		defaultBasemap
 	} from '$lib/assets/layers';
 
-	export let map: mapboxgl.Map | null;
+	import { map } from '$lib/stores';
 
-	$: if (map) {
-		map?.setStyle(basemaps[defaultBasemap]);
+	$: if ($map) {
+		$map.on('load', () => {
+			$map.setStyle(basemaps[defaultBasemap]);
+		});
 	}
 </script>
 
-<CustomControl {map} class="group min-w-[29px] min-h-[29px] overflow-hidden">
+<CustomControl class="group min-w-[29px] min-h-[29px] overflow-hidden">
 	<div
 		class="flex flex-row justify-center items-center w-[29px] h-[29px] delay-100 transition-[opacity height] duration-0 group-hover:opacity-0 group-hover:h-0 group-hover:delay-0"
 	>
@@ -42,8 +42,8 @@
 						layerTree={basemapTree}
 						name="basemaps"
 						onValueChange={(id) => {
-							if (map) {
-								map.setStyle(basemaps[id]);
+							if ($map) {
+								$map.setStyle(basemaps[id]);
 							}
 						}}
 					/>
@@ -55,12 +55,12 @@
 						name="overlays"
 						multiple={true}
 						onValueChange={(id, checked) => {
-							if (map) {
+							if ($map) {
 								if (checked) {
-									if (!map.getSource(id)) {
-										map.addSource(id, overlays[id]);
+									if (!$map.getSource(id)) {
+										$map.addSource(id, overlays[id]);
 									}
-									map.addLayer({
+									$map.addLayer({
 										id,
 										type: overlays[id].type === 'raster' ? 'raster' : 'line',
 										source: id,
@@ -73,7 +73,7 @@
 										}
 									});
 								} else {
-									map.removeLayer(id);
+									$map.removeLayer(id);
 								}
 							}
 						}}

website/src/lib/stores.ts

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+import mapboxgl from 'mapbox-gl';
+
+export const map = writable<mapboxgl.Map | null>(null);

website/src/routes/+page.svelte

@@ -1,22 +1,18 @@
 <script lang="ts">
-	import mapboxgl from 'mapbox-gl';
-
 	import Data from '$lib/components/Data.svelte';
 	import Map from '$lib/components/Map.svelte';
 	import Menu from '$lib/components/Menu.svelte';
 	import Toolbar from '$lib/components/Toolbar.svelte';
 	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
-
-	let map: mapboxgl.Map | null = null;
 </script>
 
 <div class="flex flex-col w-screen h-screen">
 	<div class="grow relative">
 		<Menu />
 		<Toolbar />
-		<Map class="h-full" bind:map />
-		<LayerControl {map} />
-		<Data {map} />
+		<Map class="h-full" />
+		<LayerControl />
+		<Data />
 	</div>
 	<div class="h-12">Test</div>
 </div>