MapMarkers

Needs review
RTL

Many markers from data on a MapView, clustered automatically: nearby markers merge into MapMarkerCluster buttons (with category segments) that zoom in when pressed. Only markers on screen are rendered, and they are reached with Tab in items order, so the map follows the list beside it.

import { MapMarkers } from "@nexera-ui/react";

Loading example…

2
examples: 8
props: 0
live controls: 1
platform: 0
WCAG criteria: 2
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

Generated code

import { MapMarkers } from "@nexera-ui/react";

<MapMarkers />

Examples 1

The same examples as Storybook, rendered live. Open Code to copy one.

Without clustering

cluster={false} shows every marker, for small sets where each one matters.

Loading example…

app.tsx

import { MapMarkerPerson, MapMarkers } from "@nexera-ui/react";

interface Person {
  id: string;
  name: string;
  status: MapMarkerWorkStatus;
  lngLat: readonly [number, number];
}

const STATUSES: MapMarkerWorkStatus[] = ["working", "remote", "on-leave", "offline"];

const PEOPLE: Person[] = Array.from({ length: 120 }, (_, i) => ({
  id: `p${String(i)}`,
  name: `Person ${String(i + 1)}`,
  status: STATUSES[i % 4] ?? "working",
  lngLat: [-0.15 + ((i * 41) % 90) / 1000, 51.495 + ((i * 59) % 40) / 1000],
}));

<MapMarkers
  items={PEOPLE.slice(0, 12)}
  getId={(p: Person) => p.id}
  getLngLat={(p: Person) => p.lngLat}
  getCategory={(p: Person) => p.status}
  categories={STATUSES}
  clusterLabel={(n: number) => `${String(n)} people`}
  renderMarker={(p: Person, { isSelected }: { isSelected: boolean }) => (
    <MapMarkerPerson name={p.name} workStatus={p.status} isSelected={isSelected} />
  )}
/>;

Props 8

items*Nexera

readonly T[]

The data: people, places, assets.

getId*Nexera

(item: T) => string

A stable, unique id per item (used by MapView selectedId).

getLngLat*Nexera

(item: T) => LngLat

The item's position as [lng, lat]. Items without a valid one are skipped (named in the console in development).

renderMarker*Nexera

(item: T, state: { isSelected: boolean; }) => ReactNode

The marker for one item, for example a MapMarkerPerson.

getCategoryNexera

(item: T) => string

The item's category, counted per cluster for MapMarkerCluster's segments (with categories).

categoriesNexera

readonly string[]

Categories in segment order.

clusterLabelNexera

(count: number) => string

The accessible name of a cluster. Translate it.

clusterNexera

boolean | { radius?: number; maxZoom?: number; }

Merge nearby markers into clusters.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

This component relies on the shared primitives' accessibility tests; no criteria are tagged to it directly yet.

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<MapMarkers className="shadow-sm" />

Theme studio