mirror of https://github.com/sveltejs/svelte
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.
48 lines
764 B
48 lines
764 B
6 years ago
|
<script>
|
||
|
|
import { onMount } from 'svelte';
|
||
|
|
import { mapbox } from './mapbox.js';
|
||
|
|
|
||
|
|
// set the context here...
|
||
|
|
|
||
|
|
export let lat;
|
||
|
|
export let lon;
|
||
|
|
export let zoom;
|
||
|
|
|
||
|
|
let container;
|
||
|
|
let map;
|
||
|
|
|
||
|
|
onMount(() => {
|
||
|
|
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({
|
||
|
|
container,
|
||
|
|
style: 'mapbox://styles/mapbox/streets-v9',
|
||
|
|
center: [lon, lat],
|
||
|
|
zoom
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
document.head.appendChild(link);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
map.remove();
|
||
|
|
link.parentNode.removeChild(link);
|
||
|
|
};
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div bind:this={container}>
|
||
|
|
{#if map}
|
||
|
|
<slot></slot>
|
||
|
|
{/if}
|
||
|
|
</div>
|