Leaflet Disaster Response Map

Installation

Variants

Props

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface Facility {
  id: string
  name: string
  type: FacilityType
  /** [lng, lat] — Mapbox order. */
  coords: [number, number]
  capacity: number
  occupied: number
  status: FacilityStatus
}

Files installed (1)

• app/components/blocks/LeafletDisasterResponseMap.vue8.5 kB

  Copy

  <script setup lang="ts">
  import type { HTMLAttributes } from 'vue'
  import { computed, ref } from 'vue'
  import { cn } from '@/lib/utils'
  import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
  import { Badge } from '@/components/ui/badge'
  import { Button } from '@/components/ui/button'
  import { LeafletMap, LeafletMarker, LeafletCircle, type LeafletMapRef } from '@/components/ui/leaflet-map'
  
  export type FacilityType = 'Shelter' | 'Medical Staging' | 'Command Post'
  export type FacilityStatus = 'Open' | 'Near Capacity' | 'Closed'
  
  export interface Facility {
    id: string
    name: string
    type: FacilityType
    /** [lng, lat] — Mapbox order. */
    coords: [number, number]
    capacity: number
    occupied: number
    status: FacilityStatus
  }
  
  export interface LeafletDisasterResponseMapProps {
    class?: HTMLAttributes['class']
    facilities?: Facility[]
  }
  
  const props = defineProps<LeafletDisasterResponseMapProps>()
  
  // Module-level constants: stable references keep LeafletMap's `center` watcher
  // from re-firing setView on every re-render and cancelling flyTo animations.
  const MAP_CENTER: [number, number] = [-122.2711, 37.8044]
  
  // Wildfire incident origin in the Oakland Hills + a secondary spot fire.
  const INCIDENT: [number, number] = [-122.165, 37.845]
  const SPOT_FIRE: [number, number] = [-122.145, 37.856]
  
  // Evacuation perimeter rings (meter radii): hard exclusion + warning zone.
  const EVAC_RADIUS_M = 1800
  const WARNING_RADIUS_M = 3600
  
  const DEFAULT_FACILITIES: Facility[] = [
    {
      id: 's-1',
      name: 'Oakland Civic Shelter',
      type: 'Shelter',
      coords: [-122.265, 37.795],
      capacity: 500,
      occupied: 340,
      status: 'Open',
    },
    {
      id: 's-2',
      name: 'Eastmont Medical Staging',
      type: 'Medical Staging',
      coords: [-122.19, 37.77],
      capacity: 120,
      occupied: 98,
      status: 'Near Capacity',
    },
    {
      id: 's-3',
      name: 'Unified Incident Command Post',
      type: 'Command Post',
      coords: [-122.225, 37.852],
      capacity: 80,
      occupied: 45,
      status: 'Open',
    },
  ]
  
  const facilities = computed(() => props.facilities ?? DEFAULT_FACILITIES)
  const activeId = ref(DEFAULT_FACILITIES[0]?.id ?? '')
  const activeFacility = computed(() => facilities.value.find((f) => f.id === activeId.value) ?? facilities.value[0])
  
  const mapRef = ref<LeafletMapRef | null>(null)
  
  function focusFacility(f: Facility) {
    activeId.value = f.id
    mapRef.value?.flyTo?.({ center: f.coords, zoom: 12.5, duration: 800 })
  }
  
  function focusHazard() {
    mapRef.value?.flyTo?.({ center: INCIDENT, zoom: 12, duration: 800 })
  }
  </script>
  
  <template>
    <div data-slot="leaflet-disaster-response-map" :class="cn('grid gap-4 lg:grid-cols-[1fr_320px]', props.class)">
      <div class="border-border bg-card relative h-[480px] overflow-hidden rounded-xl border">
        <LeafletMap ref="mapRef" variant="light" :center="MAP_CENTER" :zoom="11" class="h-full w-full">
          <!-- Evacuation perimeter rings (radii in meters) -->
          <LeafletCircle
            :center="INCIDENT"
            :radius="EVAC_RADIUS_M"
            color="#dc2626"
            :weight="2"
            :opacity="0.9"
            dash-array="6 4"
            fill-color="#ef4444"
            :fill-opacity="0.15"
            @click="focusHazard"
          />
          <LeafletCircle
            :center="INCIDENT"
            :radius="WARNING_RADIUS_M"
            color="#d97706"
            :weight="1.5"
            :opacity="0.7"
            dash-array="4 6"
            fill-color="#f59e0b"
            :fill-opacity="0.05"
          />
  
          <!-- Active fire origin -->
          <LeafletMarker :lng-lat="INCIDENT" anchor="center" @click="focusHazard">
            <div class="relative flex cursor-pointer items-center justify-center">
              <span class="bg-destructive/30 absolute size-9 animate-ping rounded-full" />
              <div
                class="bg-destructive flex size-7 items-center justify-center rounded-full font-mono text-xs font-bold text-white shadow-lg ring-2 ring-white"
              >
                🔥
              </div>
            </div>
          </LeafletMarker>
  
          <!-- Secondary spot fire -->
          <LeafletMarker :lng-lat="SPOT_FIRE" anchor="center" @click="focusHazard">
            <div class="relative flex cursor-pointer items-center justify-center">
              <span class="bg-warning/30 absolute size-6 animate-ping rounded-full" />
              <div
                class="bg-warning flex size-6 items-center justify-center rounded-full font-mono text-xs font-bold text-white shadow-md ring-2 ring-white"
              >
                🔥
              </div>
            </div>
          </LeafletMarker>
  
          <!-- Shelters and Medical Staging -->
          <LeafletMarker
            v-for="f in facilities"
            :key="f.id"
            :lng-lat="f.coords"
            anchor="bottom"
            @click="focusFacility(f)"
          >
            <div class="group flex cursor-pointer flex-col items-center">
              <div
                class="flex size-7 items-center justify-center rounded-full shadow-md ring-2"
                :class="
                  f.type === 'Shelter'
                    ? 'bg-success text-white ring-emerald-400/40'
                    : f.type === 'Medical Staging'
                      ? 'bg-info text-white ring-blue-400/40'
                      : 'bg-primary text-primary-foreground ring-primary/40'
                "
              >
                {{ f.type === 'Shelter' ? '🏠' : f.type === 'Medical Staging' ? '✚' : '★' }}
              </div>
              <span
                class="border-border bg-background/90 mt-1 rounded border px-1 py-0.5 font-mono text-xs font-bold whitespace-nowrap shadow-xs"
              >
                {{ f.name.split(' ')[0] }}
              </span>
            </div>
          </LeafletMarker>
        </LeafletMap>
      </div>
  
      <!-- Incident Control Dashboard -->
      <Card class="flex flex-col justify-between">
        <CardHeader>
          <div class="flex items-center justify-between">
            <Badge variant="outline" class="border-destructive/30 bg-destructive/10 text-destructive font-mono text-xs"
              >LEVEL 3 EVACUATION</Badge
            >
            <Badge class="border-success/20 bg-success/10 text-success">{{ activeFacility.status }}</Badge>
          </div>
          <CardTitle class="mt-2 text-lg">{{ activeFacility.name }}</CardTitle>
          <CardDescription class="text-xs"
            >Capacity: {{ activeFacility.occupied }} / {{ activeFacility.capacity }} beds occupied</CardDescription
          >
        </CardHeader>
        <CardContent class="space-y-4">
          <!-- Capacity Bar -->
          <div class="border-border space-y-1.5 border-t pt-3">
            <div class="flex items-center justify-between font-mono text-xs">
              <span class="text-muted-foreground">Occupancy Rate</span>
              <span class="text-foreground font-bold"
                >{{ Math.round((activeFacility.occupied / activeFacility.capacity) * 100) }}%</span
              >
            </div>
            <div class="bg-muted h-2 w-full overflow-hidden rounded-full">
              <div
                class="h-full rounded-full transition-[width,background-color]"
                :class="activeFacility.occupied / activeFacility.capacity > 0.8 ? 'bg-warning' : 'bg-success'"
                :style="{ width: `${(activeFacility.occupied / activeFacility.capacity) * 100}%` }"
              />
            </div>
          </div>
  
          <div class="border-border space-y-1 border-t pt-3">
            <div class="text-muted-foreground mb-1 font-mono text-xs tracking-wider uppercase">Staged Relief Sites</div>
            <button
              v-for="f in facilities"
              :key="f.id"
              type="button"
              class="flex w-full items-center justify-between rounded-md px-2 py-1 text-xs transition-colors"
              :class="
                activeId === f.id
                  ? 'bg-accent text-accent-foreground font-semibold'
                  : 'hover:bg-muted text-muted-foreground'
              "
              @click="focusFacility(f)"
            >
              <span class="max-w-[170px] truncate">{{ f.name }}</span>
              <span class="font-mono text-xs opacity-75">{{ f.occupied }}/{{ f.capacity }}</span>
            </button>
          </div>
  
          <div class="flex gap-2 pt-2">
            <Button variant="outline" size="sm" class="flex-1 font-mono text-xs" @click="focusHazard">
              Exclusion Zone
            </Button>
            <Button variant="outline" size="sm" class="flex-1 font-mono text-xs" @click="focusFacility(activeFacility)">
              Focus Site
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  </template>
  

Raw manifest:https://uipkge.dev/r/vue/leaflet-disaster-response-map.json