From 317e5a21924c635bf98080763ce0ddb8c0295180 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Thu, 4 Nov 2021 13:47:09 +0700
Subject: [PATCH] update Map tutorial

---
 .../01-context-api/app-a/Map.svelte           | 45 +++++++++---------
 .../01-context-api/app-b/Map.svelte           | 47 +++++++++----------
 2 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte b/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte
index c6a660a49f..5bc4d4b833 100644
--- a/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte
+++ b/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { onMount } from 'svelte';
+	import { onDestroy } from 'svelte';
 	import { mapbox } from './mapbox.js';
 
 	// set the context here...
@@ -11,32 +11,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>
 
@@ -45,4 +44,4 @@
 		width: 100%;
 		height: 100%;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte b/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte
index 059fcca45b..99aead054b 100644
--- a/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte
+++ b/site/content/tutorial/15-context/01-context-api/app-b/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>