{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "leaflet-disaster-response-map", "title": "Leaflet Disaster Response Map", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/leaflet-disaster-response-map/leaflet-disaster-response-map.component.ts", "content": "// Incident management map on free OpenStreetMap/Esri tiles — no API key. Evacuation\n// perimeter rings, shelter capacities, and emergency staging points. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, ViewChild, signal } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiLeafletCircleComponent,\n UiLeafletMapComponent,\n UiLeafletMarkerComponent,\n} from '@/ui/leaflet-map/leaflet-map.component'\n\nexport type FacilityType = 'Shelter' | 'Medical Staging' | 'Command Post'\nexport type FacilityStatus = 'Open' | 'Near Capacity' | 'Closed'\n\nexport interface Facility {\n id: string\n name: string\n type: FacilityType\n /** [lng, lat] — Mapbox order. */\n coords: [number, number]\n capacity: number\n occupied: number\n status: FacilityStatus\n}\n\n// Module-level constants: stable references keep LeafletMap's center effect\n// from re-firing setView on every render and cancelling flyTo animations.\nconst MAP_CENTER: [number, number] = [-122.2711, 37.8044]\n\n// Wildfire incident origin in the Oakland Hills + a secondary spot fire.\nconst INCIDENT: [number, number] = [-122.165, 37.845]\nconst SPOT_FIRE: [number, number] = [-122.145, 37.856]\n\n// Evacuation perimeter rings (meter radii): hard exclusion + warning zone.\nconst EVAC_RADIUS_M = 1800\nconst WARNING_RADIUS_M = 3600\n\nexport const DEFAULT_FACILITIES: Facility[] = [\n {\n id: 's-1',\n name: 'Oakland Civic Shelter',\n type: 'Shelter',\n coords: [-122.265, 37.795],\n capacity: 500,\n occupied: 340,\n status: 'Open',\n },\n {\n id: 's-2',\n name: 'Eastmont Medical Staging',\n type: 'Medical Staging',\n coords: [-122.19, 37.77],\n capacity: 120,\n occupied: 98,\n status: 'Near Capacity',\n },\n {\n id: 's-3',\n name: 'Unified Incident Command Post',\n type: 'Command Post',\n coords: [-122.225, 37.852],\n capacity: 80,\n occupied: 45,\n status: 'Open',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-leaflet-disaster-response-map, [ui-leaflet-disaster-response-map]',\n standalone: true,\n imports: [\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiLeafletCircleComponent,\n UiLeafletMapComponent,\n UiLeafletMarkerComponent,\n ],\n host: {\n 'data-slot': 'leaflet-disaster-response-map',\n '[class]': 'hostClass',\n },\n template: `\n
\n \n \n \n \n\n \n \n
\n \n \n 🔥\n
\n
\n \n\n \n \n
\n \n \n 🔥\n
\n \n \n\n \n @for (f of facilities; track f.id) {\n \n
\n
\n {{ facilityGlyph(f) }}\n
\n \n {{ shortName(f) }}\n \n
\n \n }\n \n \n\n \n \n \n
\n \n LEVEL 3 EVACUATION\n \n {{ activeFacility().status }}\n
\n {{ activeFacility().name }}\n \n Capacity: {{ activeFacility().occupied }} / {{ activeFacility().capacity }} beds occupied\n \n \n \n \n
\n
\n Occupancy Rate\n {{ occupancyPct(activeFacility()) }}% \n
\n
\n
\n
\n
\n\n
\n
Staged Relief Sites
\n @for (f of facilities; track f.id) {\n \n }\n
\n\n
\n \n \n
\n \n \n `,\n})\nexport class UiLeafletDisasterResponseMapComponent {\n @Input() facilities: Facility[] = DEFAULT_FACILITIES\n @Input('class') className?: string\n\n @ViewChild(UiLeafletMapComponent) map?: UiLeafletMapComponent\n\n protected readonly mapCenter = MAP_CENTER\n protected readonly incident = INCIDENT\n protected readonly spotFire = SPOT_FIRE\n protected readonly evacRadiusM = EVAC_RADIUS_M\n protected readonly warningRadiusM = WARNING_RADIUS_M\n\n readonly activeId = signal(DEFAULT_FACILITIES[0]?.id ?? '')\n\n get hostClass(): string {\n return cn('grid gap-4 lg:grid-cols-[1fr_320px]', this.className)\n }\n\n activeFacility(): Facility {\n return this.facilities.find((f) => f.id === this.activeId()) ?? this.facilities[0]!\n }\n\n focusFacility(f: Facility): void {\n this.activeId.set(f.id)\n this.map?.flyTo?.({ center: f.coords, zoom: 12.5, duration: 800 })\n }\n\n focusActive(): void {\n this.focusFacility(this.activeFacility())\n }\n\n focusHazard(): void {\n this.map?.flyTo?.({ center: INCIDENT, zoom: 12, duration: 800 })\n }\n\n occupancyPct(f: Facility): number {\n return Math.round((f.occupied / f.capacity) * 100)\n }\n\n occupancyRate(f: Facility): number {\n return f.occupied / f.capacity\n }\n\n occupancyBarClass(f: Facility): string {\n return cn(\n 'h-full rounded-full transition-[width,background-color]',\n this.occupancyRate(f) > 0.8 ? 'bg-warning' : 'bg-success',\n )\n }\n\n facilityPinClass(f: Facility): string {\n return cn(\n 'flex size-7 items-center justify-center rounded-full shadow-md ring-2',\n f.type === 'Shelter'\n ? 'bg-success text-white ring-emerald-400/40'\n : f.type === 'Medical Staging'\n ? 'bg-info text-white ring-blue-400/40'\n : 'bg-primary text-primary-foreground ring-primary/40',\n )\n }\n\n facilityGlyph(f: Facility): string {\n return f.type === 'Shelter' ? '🏠' : f.type === 'Medical Staging' ? '✚' : '★'\n }\n\n shortName(f: Facility): string {\n return f.name.split(' ')[0] ?? f.name\n }\n\n rowClass(f: Facility): string {\n return cn(\n 'flex w-full items-center justify-between rounded-md px-2 py-1 text-xs transition-colors',\n this.activeId() === f.id\n ? 'bg-accent text-accent-foreground font-semibold'\n : 'hover:bg-muted text-muted-foreground',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/leaflet-disaster-response-map/leaflet-disaster-response-map.component.ts" }, { "path": "packages/registry-angular/blocks/leaflet-disaster-response-map/index.ts", "content": "export {\n UiLeafletDisasterResponseMapComponent,\n DEFAULT_FACILITIES,\n type Facility,\n type FacilityType,\n type FacilityStatus,\n} from './leaflet-disaster-response-map.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/leaflet-disaster-response-map/index.ts" } ], "dependencies": [], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/leaflet-map.json" ], "description": "Incident management map on free OpenStreetMap/Esri tiles — no API key. Evacuation perimeter rings, shelter capacities, and emergency staging points.", "categories": [ "logistics", "emergency", "map" ] }