<script lang="ts">
    import type {ActionReturn} from "svelte/action";
    import type {TileLayer, Map as LeafletMap} from "leaflet";

    let mapEl: HTMLElement;
    let map: LeafletMap;
    let L;

    async function mapAction(node: HTMLElement): ActionReturn {
        L = await import('leaflet');

        map = L.map(mapEl, {
            center: [51.505, -0.09],
            zoom: 13
        });

        L.control.layers(
            {
                "OpenStreetMap": L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "&copy;" })
            },
            {
                "NOAA/MRMS CONUS Reflectivity at Lowest Altitude": L.tileLayer("http://localhost:8080/noaa_mrms_merged_composite_reflectivity_qc/{z}/{x}/{y}.png", { attribution: "&copy; NOAA" })
            }
        ).addTo(map);

        return {
            destroy: () => {

            }
        }
    }
</script>

<div class="container">
    <div class="map" bind:this={mapEl} use:mapAction></div>
</div>

<style>
    :global(html body) {
        margin: 0;
        padding: 0;
    }
    .container {
        display: flex;
        flex-direction: column;
    }
    .map {
        width: 100vw;
        height: 100vh;
    }
</style>