mirror of https://github.com/sveltejs/svelte
50 lines
692 B
50 lines
692 B
<script>
|
|
import { onDestroy, setContext } from 'svelte';
|
|
import { mapbox, key } from './mapbox.js';
|
|
|
|
setContext(key, {
|
|
getMap: () => map,
|
|
});
|
|
|
|
export let lat;
|
|
export let lon;
|
|
export let zoom;
|
|
|
|
let container;
|
|
let map;
|
|
|
|
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 />
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
div {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|