Flood Forecasting

<script setup lang="ts">
  import { VMap, VControlNavigation } from '@geoql/v-maplibre';
  import { VLayerDeckglHeatmap, VLayerDeckglScatterplot } from '@geoql/v-maplibre/deck.gl';

  const colorMode = useColorMode();
  const mapStyle = computed(() =>
    colorMode.value === 'dark'
      ? 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'
      : 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
  );

  const mapOptions = computed(() => ({
    style: mapStyle.value,
    center: [20, 10],
    zoom: 2,
  }));

  const { data } = await useFetch('/api/groundsource');

  const currentZoom = ref(2);
  const showHeatmap = computed(() => currentZoom.value < 12);
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VLayerDeckglHeatmap
      v-if="showHeatmap"
      id="floods-heat"
      :data="data.data"
      :get-position="(d) => [d[0], d[1]]"
      :get-weight="(d) => d[2]"
      :radius-pixels="40"
      :intensity="1.5"
      :threshold="0.03"
    />
    <VLayerDeckglScatterplot
      v-if="!showHeatmap"
      id="floods"
      :data="data.data"
      :get-position="(d) => [d[0], d[1]]"
      :get-fill-color="getAreaColor"
      :get-radius="getAreaRadius"
      :radius-min-pixels="3"
      :radius-max-pixels="25"
      :opacity="0.85"
      :pickable="true"
    />
  </VMap>
</template>