From 05227d203a5572af811450bd7e853ea60e815880 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Thu, 4 Nov 2021 13:43:46 +0700
Subject: [PATCH] update Map example

---
 .../16-context/00-context-api/Map.svelte      | 47 +++++++++----------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/site/content/examples/16-context/00-context-api/Map.svelte b/site/content/examples/16-context/00-context-api/Map.svelte
index 059fcca45b..99aead054b 100644
--- a/site/content/examples/16-context/00-context-api/Map.svelte
+++ b/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(() => {
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';
-
-		link.onload = () => {
-			map = new mapbox.Map({
-				container,
-				style: 'mapbox://styles/mapbox/streets-v9',
-				center: [lon, lat],
-				zoom
-			});
-		};
-
-		document.head.appendChild(link);
-
-		return () => {
-			map.remove();
-			link.parentNode.removeChild(link);
-		};
+	function load() {
+		map = new mapbox.Map({
+			container,
+			style: 'mapbox://styles/mapbox/streets-v9',
+			center: [lon, lat],
+			zoom,
+		});
+	}
+
+	onDestroy(() => {
+		if (map) map.remove();
 	});
 </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>
\ No newline at end of file
+</style>