Z

MapPanel

An interactive map panel organism for displaying location markers with risk levels. Ideal for showing outbreak locations, monitoring zones, and geographic health data.

Basic Map Panel

Outbreak Locations

Current monitored areas in your region

Interactive Map

Map integration will display location markers here

No Risk
Risk Levels:
High Risk
Moderate Risk
Low Risk
Unknown

With Location Markers

Risk Assessment Map

Click on a location to view details

Interactive Map

Map integration will display location markers here

4 Locations

No Risk
Risk Levels:
High Risk
Moderate Risk
Low Risk
Unknown

Compact Without Legend

Quick View

Interactive Map

Map integration will display location markers here

No Risk

Usage Example

<x-interface-frameworks.map-panel
    title="Outbreak Locations"
    description="Current monitored areas"
    :markers="[
        ['name' => 'Location A', 'risk' => 'high', 'description' => 'Details...'],
        ['name' => 'Location B', 'risk' => 'low', 'description' => 'Details...'],
    ]"
    height="400px"
    :showLegend="true"
    :showControls="true"
/>

Props

Prop Type Default Description
title string 'Location Map' Panel title
description string '' Panel description
markers array [] Location markers with name, risk, description
height string '400px' Map container height
showLegend boolean true Show risk level legend
showControls boolean true Show map controls

Marker Data Structure

[
    'name' => 'Location Name',        // Required: Display name
    'risk' => 'high',                 // Risk level: high, moderate, low, unknown
    'description' => 'Details...',    // Optional: Location description
    'lat' => 0.0,                     // Optional: Latitude
    'lng' => 0.0,                     // Optional: Longitude
]

Accessibility Features

  • Keyboard navigable marker list
  • ARIA labels on interactive elements
  • Color-coded risk levels with text labels
  • Focus management for detail panel
  • Screen reader announcements for selections