Map

Interactive dotted world map with no tile server: zoom buttons, Ctrl/⌘+wheel zoom, drag to pan, and keyboard-focusable markers that open popovers. Focus the map for arrow-key panning (Shift = bigger steps), + / − to zoom and 0 to reset. Markers are buttons in DOM order; focusing one that is out of view pans it into view.

Import

import { MapView } from '@marbleui/ui'

Props

<MapView>

Prop	Type	Default
markers *required	`MapMarker[]`	`—`
className	`string`	`—`
height	`number`	`360`
label	`string`	`'Map'`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Dialog · React Aria DialogTrigger · React Aria Heading. Follow the primitive's docs for the full keyboard map.

Usage notes

Dotted world map with markers for a handful of locations. The map is built in: no tiles, streets or geocoding.

<MapView
  label="Office locations"
  markers={[
    { id: 'ams', lat: 52.37, lng: 4.9, label: 'Amsterdam HQ', content: '42 people · Keizersgracht 123' },
    { id: 'sg', lat: 1.35, lng: 103.82, label: 'Singapore', content: '7 people', tone: 5 },
  ]}
/>

Each marker is a button named by its label. Pressing it opens a popover with label as the heading and content below. Tab order follows the array.
tone picks the color from --chart-1…8 (default 1); don’t let color carry meaning the label lacks.
Zoom with the corner buttons or Ctrl/⌘+wheel, and drag to pan. The map itself is focusable: arrow keys pan (Shift for bigger steps), + and − zoom, 0 resets. Zoom stays centered; a marker that gets focus while out of view is panned to the center.
label names the map region (default “Map”); height is in pixels (default 360).

Example source · show

import { MapView } from './map'

const offices = [
  { id: 'ams', lat: 52.37, lng: 4.9, label: 'Amsterdam HQ', content: '42 people · Keizersgracht 123', tone: 1 },
  { id: 'sf', lat: 37.77, lng: -122.42, label: 'San Francisco', content: '18 people · Sales and support', tone: 6 },
  { id: 'ny', lat: 40.71, lng: -74, label: 'New York', content: '9 people · Partnerships', tone: 6 },
  { id: 'sg', lat: 1.35, lng: 103.82, label: 'Singapore', content: '7 people · APAC support', tone: 5 },
  { id: 'lag', lat: 6.52, lng: 3.38, label: 'Lagos', content: '5 people · Engineering', tone: 4 },
]
export const styles = { Default: () => <MapView label="Office locations" markers={offices} className="w-[40rem] max-w-full" /> }

Source: packages/ui/src/map/map.tsx

Catalog

Category: data-display
Priority: Extra
Primitive: custom