Marker map

Playground#

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

<GeoMarkerMap
  label="Requests by city"
  projection="equalEarth"
  grid="honeycomb"
  pitch={4}
  maxHalo={28}
  labels="all"
  reveal="view"
/>

Installation#

pnpm dlx shadcn@latest add @lumesec/geo-marker-map

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/geo-marker-map.json

Usage#

import { GeoMarkerMap, type MapMarker } from "@/components/lumesec/geo-marker-map";

const markers: MapMarker[] = [
  { id: "lhr", label: "London", lat: 51.507, lon: -0.128, value: 4200, pulse: true },
  { id: "jfk", label: "New York", lat: 40.713, lon: -74.006, value: 5100 },
  { id: "nrt", label: "Tokyo", lat: 35.676, lon: 139.65, value: 3100 },
  { id: "gru", label: "São Paulo", lat: -23.551, lon: -46.633, value: 1800, tone: "warning" },
];

export function Example() {
  return <GeoMarkerMap markers={markers} label="Requests by city" className="max-w-[660px]" />;
}

Behaviour#

A flat map of land dots with markers. Markers with a value grow a halo of lit dots sized by that value, so the busiest places read at a glance without circles drawn over the map.

Halos grow and shrink behind an uneven front when values change, markers can pulse as rings of light, and labels place themselves so they do not overlap.

API reference#

Props#

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

Ref#

ref points at the root HTMLDivElement.

Keyboard#

Accessibility#

• The root has role="group", aria-roledescription="map" and the label as its aria-label.
• Each marker is a native <button> with aria-pressed and an aria-label of its label (or id) and formatted value, for example "London, 48.2K".
• The markers share one roving tab stop, so the map is a single Tab stop however many markers it has.
• A marker focused from the keyboard shows its label chip and a 2 px accent focus ring.
• The canvases and the label chips are aria-hidden; the chips repeat what the buttons already say.
• Reduced motion: the land is drawn at once, halos appear at their size without the growth front, pulsing markers show a still ring of brighter dots, a selection changes without the ring, pop and sparks, and chip values change without rolling.

Theming#

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --lumesec, --lumesec-glint, --lumesec-shine, --lumesec-info, --lumesec-success, --lumesec-warning, --destructive, --foreground, --muted-foreground, --muted, --card and --border.

Notes#

• Halo area is proportional to the value: the radius is maxHalo · √(value / largest value), scaled with the map width. Zero, negative and missing values have no halo.
• Halos light land dots only, so a coastal marker lights the land around it. Some coastal cities fall on water cells of the 0.5° land mask and show a partial halo.
• Where halos overlap, each dot takes the brighter halo; nothing stacks.
• With labels="all", the largest values get chips, at most one per 120 px of map width. A chip that would cover another marker stays hidden.
• Changing projection, grid, pitch or latRange after the first reveal prints the new lattice again from the selected marker, or from revealFrom.
• A click on the map outside the markers clears the selection.
• The root fills its container's width and keeps the projection's aspect ratio, so the server markup reserves the height and already places the markers.
• Marker ids must be unique; a repeated id keeps its first marker.
• Pulsing markers keep the animation running while the map is on screen. Without them it stops once everything has settled.