-
Notifications
You must be signed in to change notification settings - Fork 4
/
Map.svelte
58 lines (49 loc) · 1.36 KB
/
Map.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script lang="ts">
import { onMount, onDestroy, setContext } from "svelte";
import { Map, NavigationControl, ScaleControl } from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import { map as mapStore } from "../stores";
export let style: string;
let map: Map;
let mapContainer: HTMLDivElement;
let loaded = false;
// Before creating the map, check if there's a hash, because one will get set below
// TODO Supposed to use a phantom type, not a string, as the key
setContext("setCamera", !window.location.hash);
onMount(() => {
map = new Map({
container: mapContainer,
style: `https://api.maptiler.com/maps/${style}/style.json?key=MZEJTanw3WpxRvt7qDfo`,
hash: true,
});
map.addControl(new ScaleControl({}));
map.addControl(
new NavigationControl({ visualizePitch: true }),
"bottom-right"
);
map.on("load", () => {
loaded = true;
mapStore.set(map);
});
const resizeObserver = new ResizeObserver(() => {
map.resize();
});
resizeObserver.observe(mapContainer);
});
onDestroy(() => {
map.remove();
});
</script>
<div class="map" bind:this={mapContainer}>
{#if loaded}
<slot />
{/if}
</div>
<style>
.map {
position: relative;
flex-grow: 1;
/* TODO: Hack, can't figure out why height broken */
min-height: 100vh;
}
</style>