Mapping and Visualization - seojedaperez/IgnisMap GitHub Wiki

This document covers the mapping and visualization components in IgnisMap, including the three primary map implementations, their data sources, visualization capabilities, and user interaction patterns. The system provides multiple mapping solutions for different use cases: Leaflet-based maps for fire monitoring and spread prediction, Azure Maps for professional geospatial services, and a lazy loading system for performance optimization.

For emergency response coordination features, see Emergency Response Management. For risk assessment algorithms that feed into map visualizations, see Risk Assessment and Prediction.

Map Component Architecture

The mapping system is built around three main map components that serve different purposes within the emergency response workflow. 2 Each component handles specific data types and user interactions while sharing common patterns for legend display and popup management.

graph TB
    subgraph "Map Component Layer"
        LazyMapComponent["LazyMapComponent<br/>Dynamic Map Loader"]
        LazyMapComponent --> TacticalMap["TacticalMapVisualization<br/>Tactical Planning"]
        LazyMapComponent --> ActiveFires["ActiveFiresMap<br/>Fire Monitoring"]  
        LazyMapComponent --> AzureMap["AzureMapComponent<br/>Professional Mapping"]
    end
    
    subgraph "Data Sources"
        MonitoringZones["MonitoringZone[]<br/>Polygon Boundaries"]
        ActiveAlerts["FireAlert[]<br/>Satellite Detections"] 
        SpreadPrediction["FireSpreadPrediction<br/>AI Analysis"]
        EvacuationZones["EvacuationZone[]<br/>Population Areas"]
        ResourceAllocation["ResourceAllocation<br/>Emergency Resources"]
        FireRiskZones["FireRiskZone[]<br/>Risk Assessment"]
    end
    
    subgraph "Rendering Engines"
        Leaflet["Leaflet<br/>Open Source Mapping"]
        AzureMaps["Azure Maps SDK<br/>Microsoft Geospatial"]
    end
    
    ActiveFires --> Leaflet
    TacticalMap --> Leaflet
    AzureMap --> AzureMaps
    
    MonitoringZones --> ActiveFires
    ActiveAlerts --> ActiveFires
    SpreadPrediction --> TacticalMap
    EvacuationZones --> TacticalMap
    ResourceAllocation --> TacticalMap
    FireRiskZones --> AzureMap
Loading

Leaflet-Based Fire Monitoring

FireSpreadMap Component

The FireSpreadMap specializes in visualizing fire spread predictions, evacuation zones, and emergency resource deployment. 3 It uses circular overlays to represent time-based fire progression and generates evacuation routes dynamically.

graph LR
    subgraph "FireSpreadMap Layers"
        Fire24h["Circle<br/>24h Spread Area"]
        Fire72h["Circle<br/>72h Spread Area"] 
        EvacZones["Circle[]<br/>Evacuation Zones"]
        EvacRoutes["Polyline[]<br/>Evacuation Routes"]
        FireStations["Marker[]<br/>Fire Stations"]
        Aircraft["Marker[]<br/>Aircraft"]
    end
    
    subgraph "Data Processing"
        SpreadCalc["Math.sqrt(area/PI) * 1000<br/>Radius Calculation"]
        RouteGen["generateEvacuationRoute()<br/>Vector Calculation"]
        ResourcePos["Random Position Generation<br/>Around Fire Center"]
    end
    
    SpreadCalc --> Fire24h
    SpreadCalc --> Fire72h
    RouteGen --> EvacRoutes
    ResourcePos --> FireStations
    ResourcePos --> Aircraft
Loading

The component generates evacuation routes that lead away from the fire center using vector mathematics. 4 Fire spread areas are calculated using circular radius formulas based on predicted hectare coverage. 5

TacticalMapVisualization Component

The TacticalMapVisualization provides comprehensive tactical planning capabilities with real-time resource tracking and route progress monitoring. 6 It includes specialized visualization for fire spread prediction, evacuation zones, and emergency resource deployment.

graph TB
    subgraph "Tactical Map Features"
        FireMarker["Fire Location Marker<br/>Animated Pulse Effect"]
        SpreadCircles["Fire Spread Circles<br/>24h and 72h Predictions"]
        EntryRoutes["Entry Routes<br/>Color-coded by Difficulty"]
        EvacRoutes["Evacuation Routes<br/>Vector-based Generation"]
        WaterSources["Water Sources<br/>Capacity and Distance"]
        CivilianAreas["Civilian Areas<br/>Hospitals, Veterinary"]
    end
    
    subgraph "Interactive Controls"
        ToggleFireSpread["Fire Spread Toggle"]
        ToggleEvacuation["Evacuation Zones Toggle"]
        ToggleResources["Resources Toggle"]
        ToggleVeterinary["Veterinary Toggle"]
        ToggleHospitals["Hospitals Toggle"]
    end
    
    ToggleFireSpread --> SpreadCircles
    ToggleEvacuation --> EvacRoutes
    ToggleResources --> WaterSources
    ToggleVeterinary --> CivilianAreas
    ToggleHospitals --> CivilianAreas
Loading

The tactical map calculates evacuation routes that move away from the fire center using normalized vector mathematics. 7 Fire spread visualization uses circular overlays with radius calculations based on predicted area coverage. 8

Azure Maps Integration

AzureMapComponent Architecture

The Azure Maps integration provides professional mapping capabilities through Microsoft's geospatial services. 9 The system loads fire risk zones, evacuation routes, and emergency facilities as interactive data layers. 10

graph TB
    subgraph "Azure Maps Loading"
        LoadCSS["Load atlas.min.css<br/>Stylesheet"]
        LoadJS["Load atlas.min.js<br/>SDK Script"] 
        CheckAtlas["window.atlas<br/>Global Check"]
        InitMap["new atlas.Map()<br/>Map Instance"]
    end
    
    subgraph "Data Sources"
        ZonesSource["DataSource('fireRiskZones')<br/>Point Features"]
        RoutesSource["DataSource('evacuationRoutes')<br/>Line Features"]
        FacilitiesSource["DataSource('emergencyFacilities')<br/>Point Features"]
    end
    
    subgraph "Layer Types"
        BubbleLayer["BubbleLayer<br/>Risk Zone Visualization"]
        LineLayer["LineLayer<br/>Evacuation Routes"]
        SymbolLayer["SymbolLayer<br/>Emergency Facilities"]
    end
    
    LoadCSS --> LoadJS
    LoadJS --> CheckAtlas
    CheckAtlas --> InitMap
    InitMap --> ZonesSource
    InitMap --> RoutesSource 
    InitMap --> FacilitiesSource
    ZonesSource --> BubbleLayer
    RoutesSource --> LineLayer
    FacilitiesSource --> SymbolLayer
Loading

The Azure Maps implementation includes comprehensive fire risk zone data with temperature, humidity, and wind speed measurements. 11 Emergency facilities are categorized by type (hospitals, fire stations, police, shelters) with operational status tracking. 12

Lazy Loading System

LazyMapComponent Implementation

The LazyMapComponent provides dynamic loading of map components to improve initial page load performance. 1 It uses React's Suspense and lazy loading to defer map component loading until needed.

graph LR
    subgraph "Lazy Loading Flow"
        UserRequest["User Requests Map"]
        TypeCheck["Check Map Type"]
        LazyLoad["React.lazy() Import"]
        Suspense["Suspense Boundary"]
        LoadingSpinner["MapLoadingSpinner"]
        MapRender["Render Map Component"]
    end
    
    subgraph "Map Types"
        TacticalType["type: 'tactical'"]
        FiresType["type: 'fires'"]
        AzureType["type: 'azure'"]
    end
    
    UserRequest --> TypeCheck
    TypeCheck --> LazyLoad
    LazyLoad --> Suspense
    Suspense --> LoadingSpinner
    Suspense --> MapRender
    
    TacticalType --> LazyLoad
    FiresType --> LazyLoad
    AzureType --> LazyLoad
Loading

The component accepts a union of all possible props from the three map types and provides a loading spinner during component initialization. 13 Map selection is handled through a type discriminator that determines which component to render. 14

Data Visualization Features

Interactive Popups and Information Display

All map components implement detailed popup systems for displaying contextual information about map features. The popup content varies by component but follows consistent patterns for data presentation.

graph LR
    subgraph "Popup Content Types"
        FireData["Fire Alert Data<br/>Satellite Information"]
        ZoneData["Zone Information<br/>Priority and Area"]
        RiskData["Risk Assessment<br/>Temperature, Humidity, Wind"]
        ResourceData["Resource Status<br/>Personnel and Equipment"]
        FacilityData["Facility Information<br/>Type and Operational Status"]
    end
    
    subgraph "Interactive Events"
        MarkerClick["Marker Click<br/>Fire Alerts"]
        PolygonClick["Polygon Click<br/>Monitoring Zones"]
        BubbleClick["Bubble Click<br/>Risk Zones"]
        SymbolClick["Symbol Click<br/>Emergency Facilities"]
    end
    
    MarkerClick --> FireData
    PolygonClick --> ZoneData
    BubbleClick --> RiskData
    SymbolClick --> FacilityData
Loading

Fire spread popups display comprehensive prediction data including area coverage and spread speed. 15 Tactical map popups include detailed fire analysis with magnitude scoring and satellite confidence levels. 16

Legend Systems and User Guidance

Each map component includes positioned legend overlays that explain the visualization elements. Legends are consistently positioned and styled across components for user familiarity.

graph TB
    subgraph "Legend Categories"
        ZoneColors["Zone Priority Colors<br/>Critical, High, Medium, Low"]
        FireIndicators["Fire Markers<br/>Magnitude-based Coloring"]
        RouteTypes["Route Classifications<br/>Entry and Evacuation"]
        ResourceIcons["Resource Symbols<br/>Water Sources, Facilities"]
        SpreadAreas["Temporal Indicators<br/>24h, 72h Predictions"]
    end
    
    subgraph "Color Schemes"
        CriticalRed["#dc2626 - Critical"]
        HighOrange["#ea580c - High"]
        MediumYellow["#d97706 - Medium"]
        LowGreen["#65a30d - Low"]
    end
    
    ZoneColors --> CriticalRed
    ZoneColors --> HighOrange
    ZoneColors --> MediumYellow
    ZoneColors --> LowGreen
Loading

The tactical map includes comprehensive legend information for route difficulty classification and resource type identification. 17 Fire risk zones use consistent color coding across all map components for immediate visual recognition. 18

Progressive Web Application Integration

The mapping system is integrated into IgnisMap's PWA architecture with offline caching capabilities. 19 Azure Maps resources are cached with network-first strategy for optimal performance. 20

graph TB
    subgraph "PWA Integration"
        ServiceWorker["Service Worker<br/>Offline Capabilities"]
        MapCache["Map Tile Caching<br/>Azure Maps Cache"]
        WeatherCache["Weather API Cache<br/>24-hour Expiration"]
        AssetCache["Static Asset Cache<br/>Icons and Styles"]
    end
    
    subgraph "Caching Strategies"
        NetworkFirst["NetworkFirst<br/>Azure Maps"]
        CacheFirst["CacheFirst<br/>Weather Data"]
        StaleWhileRevalidate["StaleWhileRevalidate<br/>Static Assets"]
    end
    
    ServiceWorker --> MapCache
    ServiceWorker --> WeatherCache
    ServiceWorker --> AssetCache
    
    NetworkFirst --> MapCache
    CacheFirst --> WeatherCache
    StaleWhileRevalidate --> AssetCache
Loading

Notes

The mapping system provides comprehensive visualization capabilities through three specialized components: FireSpreadMap for fire prediction visualization, TacticalMapVisualization for emergency response planning, and AzureMapComponent for professional geospatial services. The LazyMapComponent orchestrates dynamic loading to optimize performance. All components share consistent design patterns for popups, legends, and user interactions while supporting both online and offline operations through PWA caching strategies.

Wiki pages you might want to explore:

⚠️ **GitHub.com Fallback** ⚠️