73 lines
1.9 KiB
Svelte
73 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import maplibregl from 'maplibre-gl';
|
|
import ToolbarProductSelector from '$lib/ToolbarProductSelector.svelte';
|
|
import { Button } from '$lib/components/ui/button';
|
|
import { onMount } from 'svelte';
|
|
import type { LayerList } from './layerList';
|
|
|
|
interface Props {
|
|
categories: LayerList;
|
|
}
|
|
let { categories }: Props = $props();
|
|
|
|
const id = $props.id();
|
|
let map: maplibregl.Map | null = $state(null);
|
|
|
|
let selectedPrimaryLayer: string | null = $state(null);
|
|
let pickingSiteForCategory: boolean = $state(false);
|
|
let selectedSite: string | null = $state(null);
|
|
|
|
onMount(() => {
|
|
map = new maplibregl.Map({
|
|
container: id,
|
|
style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
|
|
center: [0, 0],
|
|
zoom: 1
|
|
});
|
|
map.on('load', async () => {
|
|
if (!map) return;
|
|
const img = document.createElement('img');
|
|
img.src = '/radar-rect-gray.svg';
|
|
img.onload = () => {
|
|
map?.addImage('radar-rect-gray', img);
|
|
};
|
|
map.addSource('kcys-bref-0.5', {
|
|
type: 'raster',
|
|
tiles: [
|
|
'http://localhost:3000/nexrad/base_reflectivity_halfdegree/KCYS/{z}/{x}/{y}@2x.png'
|
|
],
|
|
'tileSize': 512
|
|
});
|
|
map.addLayer({
|
|
id: 'kcys',
|
|
type: 'raster',
|
|
source: 'kcys-bref-0.5'
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div class="flex flex-1 flex-col">
|
|
<div class="flex flex-row items-center px-2">
|
|
{#if map}
|
|
<!-- left -->
|
|
<div class="flex flex-1 grow flex-row justify-start">
|
|
<Button variant="ghost"><b>1</b></Button>
|
|
</div>
|
|
|
|
<!-- center -->
|
|
<div class="flex flex-1 grow flex-row justify-center">
|
|
<ToolbarProductSelector
|
|
bind:pickingSiteForCategory
|
|
bind:selectedSite
|
|
bind:selectedPrimaryLayer
|
|
{categories}
|
|
{map}
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-1 grow flex-row justify-end gap-1"></div>
|
|
{/if}
|
|
</div>
|
|
<div class="map flex-1" {id}></div>
|
|
</div>
|