World Map

Charts

Analytics

Interactive world map components for analytics, server locations, and regional data visualization.

Preview

Dashboard-style map with traffic metrics and city markers

Global Traffic

2.4M↑ +12.5%

High Traffic Medium Traffic

Server Location Map

Infrastructure visualization with server status and latency

Select Server Location

Choose the region closest to your users

Compact Map Cards

Small stat cards with decorative map background

Active Regions

127+8%

Total Users

45.2K+12.3%

Connections

892-2.1%

Continent Cards

Regional cards with continent SVG previews

North America

1.8M+8.2%

5 active markers

Europe

1.4M+5.1%

8 active markers

Asia

2.1M+15.3%

6 active markers

South America

680K+3.2%

3 active markers

Africa

420K-1.5%

2 active markers

Oceania

320K+6.8%

2 active markers

Props

Component API reference

WorldMap

Prop	Type	Default	Description
`title`	`string`	—	Map title
`metric`	`string`	—	Main metric value
`trend`	`string`	—	Trend percentage
`trendUp`	`boolean`	—	Trend direction
`markers`	`MapMarker[]`	—	City markers with values
`showZoomControls`	`boolean`	`false`	Show zoom buttons
`showLegend`	`boolean`	`false`	Show status legend

ServerLocationMap

Prop	Type	Default	Description
`locations*`	`ServerLocation[]`	—	Array of server locations
`onSelect`	`(id: string) => void`	—	Selection callback

ContinentCard

Prop	Type	Default	Description
`continent*`	`'northAmerica' \| 'europe' \| 'asia' \| 'southAmerica' \| 'africa' \| 'oceania'`	—	Continent identifier
`value*`	`string`	—	Metric value
`trend`	`string`	—	Trend percentage
`trendUp`	`boolean`	—	Trend direction
`markers`	`number`	—	Number of location markers

Usage

Import and implementation examples

import {
  WorldMap,
  CompactMapCard,
  ServerLocationMap,
  ContinentCard,
} from '@/blocks/data-display/world-map'

// Analytics map with markers
<WorldMap
  title="Global Traffic"
  metric="2.4M"
  trend="+12.5%"
  trendUp={true}
  showZoomControls={true}
  markers={[
    { city: 'New York', value: '2.4M', variant: 'default' },
    { city: 'London', value: '1.8M', variant: 'pulse' },
  ]}
/>

// Compact stat card
<CompactMapCard
  title="Active Regions"
  value="127"
  trend="+8%"
  trendUp={true}
/>

// Server infrastructure map
<ServerLocationMap
  locations={[
    { id: 'us-east', name: 'US East', city: 'New York', latency: '12ms', status: 'online' },
    { id: 'asia-east', name: 'Asia East', city: 'Tokyo', latency: '89ms', status: 'degraded' },
  ]}
  onSelect={(id) => console.log('Selected:', id)}
/>

// Continent card
<ContinentCard
  continent="europe"
  value="1.4M"
  trend="+5.1%"
  trendUp={true}
  markers={8}
/>

Features

Built-in functionality

5 map variants: WorldMap, ServerLocation, Compact, Continent, Regional
Zoom controls: Interactive zoom in/out
City markers: Positioned markers with hover tooltips
Server status: Online/offline/degraded indicators
Trend indicators: Up/down arrows with percentage
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses role="img" for map SVGaria-label describes map contentInteractive elements are focusable

Keyboard Navigation

Key	Action
`Tab`	Navigate between interactive elements
`Enter`	Select server location

Notes

Tooltips provide detailed information
Status colors supplemented with text
Consider data table for complex data

Related Components

Heatmap Stat Card Statistic