mirror of https://github.com/sveltejs/svelte
45 lines
717 B
45 lines
717 B
<script>
|
|
import { onDestroy } from 'svelte';
|
|
import { mapbox } from './mapbox.js';
|
|
|
|
// set the context here...
|
|
|
|
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>
|
|
|
|
<!-- 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}>
|
|
{#if map}
|
|
<slot />
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
div {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|