Skip to content

Commit 2484ace

Browse files
ignatiusmbignatiusmb
authored
[docs] use svelte:header + event for link load (#6903)
1 parent e3380e3 commit 2484ace

File tree

3 files changed

+70
-71
lines changed

3 files changed

+70
-71
lines changed

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

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script>
2-
import { onMount, setContext } from 'svelte';
2+
import { onDestroy, setContext } from 'svelte';
33
import { mapbox, key } from './mapbox.js';
44
55
setContext(key, {
6-
getMap: () => map
6+
getMap: () => map,
77
});
88
99
export let lat;
@@ -13,32 +13,31 @@
1313
let container;
1414
let map;
1515
16-
onMount(() => {
17-
const link = document.createElement('link');
18-
link.rel = 'stylesheet';
19-
link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';
20-
21-
link.onload = () => {
22-
map = new mapbox.Map({
23-
container,
24-
style: 'mapbox://styles/mapbox/streets-v9',
25-
center: [lon, lat],
26-
zoom
27-
});
28-
};
29-
30-
document.head.appendChild(link);
31-
32-
return () => {
33-
map.remove();
34-
link.parentNode.removeChild(link);
35-
};
16+
function load() {
17+
map = new mapbox.Map({
18+
container,
19+
style: 'mapbox://styles/mapbox/streets-v9',
20+
center: [lon, lat],
21+
zoom,
22+
});
23+
}
24+
25+
onDestroy(() => {
26+
if (map) map.remove();
3627
});
3728
</script>
3829

30+
<svelte:head>
31+
<link
32+
rel="stylesheet"
33+
href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
34+
on:load={load}
35+
/>
36+
</svelte:head>
37+
3938
<div bind:this={container}>
4039
{#if map}
41-
<slot></slot>
40+
<slot />
4241
{/if}
4342
</div>
4443

@@ -47,4 +46,4 @@
4746
width: 100%;
4847
height: 100%;
4948
}
50-
</style>
49+
</style>

‎site/content/tutorial/15-context/01-context-api/app-a/Map.svelte

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import { onMount } from 'svelte';
2+
import { onDestroy } from 'svelte';
33
import { mapbox } from './mapbox.js';
44
55
// set the context here...
@@ -11,32 +11,32 @@
1111
let container;
1212
let map;
1313
14-
onMount(() => {
15-
const link = document.createElement('link');
16-
link.rel = 'stylesheet';
17-
link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';
18-
19-
link.onload = () => {
20-
map = new mapbox.Map({
21-
container,
22-
style: 'mapbox://styles/mapbox/streets-v9',
23-
center: [lon, lat],
24-
zoom
25-
});
26-
};
27-
28-
document.head.appendChild(link);
29-
30-
return () => {
31-
map.remove();
32-
link.parentNode.removeChild(link);
33-
};
14+
function load() {
15+
map = new mapbox.Map({
16+
container,
17+
style: 'mapbox://styles/mapbox/streets-v9',
18+
center: [lon, lat],
19+
zoom,
20+
});
21+
}
22+
23+
onDestroy(() => {
24+
if (map) map.remove();
3425
});
3526
</script>
3627

28+
<!-- this special element will be explained in a later section -->
29+
<svelte:head>
30+
<link
31+
rel="stylesheet"
32+
href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
33+
on:load={load}
34+
/>
35+
</svelte:head>
36+
3737
<div bind:this={container}>
3838
{#if map}
39-
<slot></slot>
39+
<slot />
4040
{/if}
4141
</div>
4242

@@ -45,4 +45,4 @@
4545
width: 100%;
4646
height: 100%;
4747
}
48-
</style>
48+
</style>

‎site/content/tutorial/15-context/01-context-api/app-b/Map.svelte

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script>
2-
import { onMount, setContext } from 'svelte';
2+
import { onDestroy, setContext } from 'svelte';
33
import { mapbox, key } from './mapbox.js';
44
55
setContext(key, {
6-
getMap: () => map
6+
getMap: () => map,
77
});
88
99
export let lat;
@@ -13,32 +13,32 @@
1313
let container;
1414
let map;
1515
16-
onMount(() => {
17-
const link = document.createElement('link');
18-
link.rel = 'stylesheet';
19-
link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';
20-
21-
link.onload = () => {
22-
map = new mapbox.Map({
23-
container,
24-
style: 'mapbox://styles/mapbox/streets-v9',
25-
center: [lon, lat],
26-
zoom
27-
});
28-
};
29-
30-
document.head.appendChild(link);
31-
32-
return () => {
33-
map.remove();
34-
link.parentNode.removeChild(link);
35-
};
16+
function load() {
17+
map = new mapbox.Map({
18+
container,
19+
style: 'mapbox://styles/mapbox/streets-v9',
20+
center: [lon, lat],
21+
zoom,
22+
});
23+
}
24+
25+
onDestroy(() => {
26+
if (map) map.remove();
3627
});
3728
</script>
3829

30+
<!-- this special element will be explained in a later section -->
31+
<svelte:head>
32+
<link
33+
rel="stylesheet"
34+
href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
35+
on:load={load}
36+
/>
37+
</svelte:head>
38+
3939
<div bind:this={container}>
4040
{#if map}
41-
<slot></slot>
41+
<slot />
4242
{/if}
4343
</div>
4444

@@ -47,4 +47,4 @@
4747
width: 100%;
4848
height: 100%;
4949
}
50-
</style>
50+
</style>

0 commit comments

Comments
 (0)