You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte

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>