|
|
@ -1,5 +1,5 @@
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import { onMount } from 'svelte';
|
|
|
|
import { onDestroy } from 'svelte';
|
|
|
|
import { mapbox } from './mapbox.js';
|
|
|
|
import { mapbox } from './mapbox.js';
|
|
|
|
|
|
|
|
|
|
|
|
// set the context here...
|
|
|
|
// set the context here...
|
|
|
@ -11,32 +11,32 @@
|
|
|
|
let container;
|
|
|
|
let container;
|
|
|
|
let map;
|
|
|
|
let map;
|
|
|
|
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
function load() {
|
|
|
|
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({
|
|
|
|
map = new mapbox.Map({
|
|
|
|
container,
|
|
|
|
container,
|
|
|
|
style: 'mapbox://styles/mapbox/streets-v9',
|
|
|
|
style: 'mapbox://styles/mapbox/streets-v9',
|
|
|
|
center: [lon, lat],
|
|
|
|
center: [lon, lat],
|
|
|
|
zoom
|
|
|
|
zoom,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
document.head.appendChild(link);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
onDestroy(() => {
|
|
|
|
map.remove();
|
|
|
|
if (map) map.remove();
|
|
|
|
link.parentNode.removeChild(link);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- this special element will be explained in a later section -->
|
|
|
|
|
|
|
|
<svelte:head>
|
|
|
|
|
|
|
|
<link
|
|
|
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
|
|
|
href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
|
|
|
|
|
|
|
|
on:load={load}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</svelte:head>
|
|
|
|
|
|
|
|
|
|
|
|
<div bind:this={container}>
|
|
|
|
<div bind:this={container}>
|
|
|
|
{#if map}
|
|
|
|
{#if map}
|
|
|
|
<slot></slot>
|
|
|
|
<slot />
|
|
|
|
{/if}
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|