Real-Time Flood Monitoring

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

  const { data } = await useFetch('/api/flood-forecasting', {
    method: 'POST',
    query: { endpoint: 'floodStatus:searchLatestFloodStatusByArea' },
    body: { regionCode: 'IN', pageSize: 200, includeNonQualityVerified: true },
  });

  const markers = computed(() =>
    data.value?.floodStatuses?.map(s => ({
      gaugeId: s.gaugeId,
      coordinates: [s.gauge.location.longitude, s.gauge.location.latitude],
      severity: s.severity,
    })) ?? [],
  );
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VLayerDeckglScatterplot
      id="flood-gauges"
      :data="markers"
      :get-position="(d) => d.coordinates"
      :get-fill-color="getSeverityColor"
      :get-radius="getSeverityRadius"
      :radius-min-pixels="5"
      :radius-max-pixels="30"
      :pickable="true"
    />
  </VMap>
</template>