Documentation setContext and getContext cleanup

[bwbroersma]

Shouldn't we use the <svelte:head> in the setContext and getContext example? I'm against introducing new concepts too early for no reason, but the current code is a bit of a mess now.

Propose using:

<svelte:head>
	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css">
</svelte:head>

Instead of the current:

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

Lines 17 to 21 in e73084b

	const link = document.createElement('link');
	link.rel = 'stylesheet';
	link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';
	link.onload = () => {

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

Line 34 in e73084b

link.parentNode.removeChild(link);

[Conduitry]

There's a little more than this going on in this example (and in the corresponding tutorial). The way it's currently written, we're waiting for the CSS to load before instantiating the mapbox Map. To preserve this while also using <svelte:head>, we'd need a bind:this on the <link> and we'd still need to have the link.onload stuff.

[bwbroersma]

Is there a reason to wait for the CSS?

[jacwright]

<script>
	// ...
	let map;
	
	function createMap() {
		map = new mapbox.Map({
			container,
			style: 'mapbox://styles/mapbox/streets-v9',
			center: [lon, lat],
			zoom
		});
	}
</script>

<svelte:head>
	<link on:load={createMap} rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css">
</svelte:head>

Tested and seems to work great.