update Map example

site/content/examples/16-context/00-context-api/Map.svelte

@@ -1,9 +1,9 @@
 <script>
-	import { onMount, setContext } from 'svelte';
+	import { onDestroy, setContext } from 'svelte';
 	import { mapbox, key } from './mapbox.js';
 
 	setContext(key, {
-		getMap: () => map
+		getMap: () => map,
 	});
 
 	export let lat;
@@ -13,32 +13,31 @@
 	let container;
 	let map;
 
-	onMount(() => {
+	function load() {
-		const link = document.createElement('link');
+		map = new mapbox.Map({
-		link.rel = 'stylesheet';
+			container,
-		link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';
+			style: 'mapbox://styles/mapbox/streets-v9',
-
+			center: [lon, lat],
-		link.onload = () => {
+			zoom,
-			map = new mapbox.Map({
+		});
-				container,
+	}
-				style: 'mapbox://styles/mapbox/streets-v9',
+
-				center: [lon, lat],
+	onDestroy(() => {
-				zoom
+		if (map) map.remove();
-			});
-		};
-
-		document.head.appendChild(link);
-
-		return () => {
-			map.remove();
-			link.parentNode.removeChild(link);
-		};
 	});
 </script>
 
+<svelte:head>
+	<link
+		rel="stylesheet"
+		href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
+		on:load={load}
+	/>
+</svelte:head>
+
 <div bind:this={container}>
 	{#if map}
-		<slot></slot>
+		<slot />
 	{/if}
 </div>
 
@@ -47,4 +46,4 @@
 		width: 100%;
 		height: 100%;
 	}
-</style>
+</style>