Map Monitor

Code

const regions: MapRegionPreset[] = [  { id: "ksa", label: "Saudi Arabia", labelAr: "السعودية", center: { lat: 23.9, lng: 45.1 }, zoom: 5 },  { id: "riyadh", label: "Riyadh", labelAr: "الرياض", center: { lat: 24.71, lng: 46.67 }, zoom: 10 },];<MapMonitor  regions={regions}  alerts={alerts} // { id, lat, lng, title, severity, at, detail? }  defaultRange="24h"  onVisibleAlertsChange={(list) => setBadge(list.length)}  tileUrl={tiles}  attribution="© OpenStreetMap"/>;

Charts & Maps · beta

Live examples and controls: Map Monitor in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/map-monitor.json

An operations map: incidents, outages or warnings on a MapView. People jump between regions you define, narrow to the last day or week, and read the alerts as a list ordered by severity. Choosing an alert in the list selects its pin and centres the map on it.

When to useCopy Anchor Link

• Dispatch, field operations, security or service monitoring, where place and recency both matter.

When not to useCopy Anchor Link

• Just pins, routes or areas: use MapView.
• Alerts with no location: use a list or ActivityFeed.

ImportCopy Anchor Link

import { MapMonitor, type MapAlert, type MapRegionPreset } from "@fadymondy/nasaq";

Quick startCopy Anchor Link

const regions: MapRegionPreset[] = [
  { id: "ksa", label: "Saudi Arabia", labelAr: "السعودية", center: { lat: 23.9, lng: 45.1 }, zoom: 5 },
  { id: "riyadh", label: "Riyadh", labelAr: "الرياض", center: { lat: 24.71, lng: 46.67 }, zoom: 10 },
];

<MapMonitor
  regions={regions}
  alerts={alerts} // { id, lat, lng, title, severity, at, detail? }
  defaultRange="24h"
  onVisibleAlertsChange={(list) => setBadge(list.length)}
  tileUrl={tiles}
  attribution="© OpenStreetMap"
/>;

AnatomyCopy Anchor Link

• data-slot="map-monitor": a section named by its heading.
• Header: heading, the region toggle group, the time-range toggle group, the Alerts button (count badge, controls the panel), your actions.
• The MapView, with alerts drawn as pins (tone and icon by severity, the time in the card).
• map-monitor-alerts: an aside with counts per severity and the list (map-monitor-alert, data-severity). It sits beside the map on large screens and below it on small ones.

APICopy Anchor Link

Every MapView prop passes through (pins, routes, areas, layers, tiles, actions, clustering and so on), except view, which the monitor drives.

HelpersCopy Anchor Link

From map-monitor-logic.ts, pure: filterMapAlerts(alerts, ms, now) keeps the alerts in a range, most severe then newest first (an unreadable time only shows under "all"); countMapAlerts counts per severity; mapAlertTime, mapAlertSeverity, isMapRegionView; MAP_ALERT_SEVERITIES, DEFAULT_MAP_TIME_RANGES. Types MapAlert, MapAlertSeverity, MapRegionPreset, MapTimeRange.

AccessibilityCopy Anchor Link

• Regions and time ranges are toggle groups with names ("Region", "Time range").
• The Alerts button says whether it shows or hides the panel and how many alerts there are, and has aria-expanded and aria-controls.
• Severity is never colour alone: each alert has an icon and the severity in words, and the count badges carry the level as screen-reader text. The chosen alert has aria-current.
• Everything the map offers (keyboard pan and zoom, pin cards) comes from MapView.

RTL & i18nCopy Anchor Link

English and Arabic strings are built in, and titleAr, detailAr and labelAr are used in Arabic. Relative times and counts use the locale. The severity rule sits on the inline start and the panel moves to the inline end, so both mirror.

Styling & tokensCopy Anchor Link

bg-card, border-border; severity uses nq-danger, nq-warning, nq-info and neutral, the same tones as the pins. The chosen alert uses bg-nq-selected.

Do / Don'tCopy Anchor Link

• Do set now from your server clock when it matters, so the filter and the times agree with the data.
• Do keep the region list short (up to six); add a search for more.
• Don't reuse an alert id as a pin id.

RelatedCopy Anchor Link

map-view, heatmap, activity-feed, alert.

LabCopy Anchor Link

Charts & Maps › Map Monitor: Default, Closed panel, Empty, Arabic.