MapMarkerCluster

Stable
WCAG 2.2 evidence
RTL

A number on a map that stands for several nearby places: a white disc with a segmented ring and the count. The map is not part of the library: position the marker yourself, centred on the cluster (translate(-50%, -50%)). It is plain (an image named by aria-label, such as "12 places") unless you give it onPress (a button, for example to zoom in or list the places) or href (a link). Interactive markers are React Aria buttons and links: Enter and Space press, keyboard focus shows the focus ring, and the 36 px minimum size meets the target size (WCAG 2.1.1, 2.4.7, 2.5.8, 4.1.2). The marker's type is the count in text, never the ring colours (1.4.1). Consumer duties: write the name with the number first ("12 places"); announce changes when the map re-clusters while the user zooms (4.1.3); keep the 24 px target spacing between neighbouring markers (2.5.8).

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

Loading example…

8
examples: 14
props: 2
live controls: 1
platform: 6
WCAG criteria: 0
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…

size

isDisabledfalse

Generated code

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

<MapMarkerCluster />

Examples 7

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

As button

A button that zooms into the cluster: Tab to it, Enter or Space presses; the name starts with the visible count.

Loading example…

app.tsx

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

export function AsButton() {
  function Zoom() {
    const [zoomed, setZoomed] = useState(false);
    return (
      <div className="flex flex-col items-start gap-3">
        <MapMarkerCluster
          count={12}
          size="md"
          aria-label="12 places, zoom in"
          onPress={() => {
            setZoomed(true);
          }}
        />
        <p className="m-0 text-body-small text-secondary" aria-live="polite">
          {zoomed ? "Zoomed in: showing 12 places" : "Press the marker to zoom in"}
        </p>
      </div>
    );
  }
  return <Zoom />;
}

As link

A link to a list of the places.

Loading example…

app.tsx

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

<MapMarkerCluster count={12} aria-label="12 places, show list" size="md" href="#places" />;

Weighted segments

Segment weights (decorative): here a cluster that is mostly the first kind of place. The count and name stay the source of truth.

Loading example…

app.tsx

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

export function WeightedSegments() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <MapMarkerCluster count={20} size="lg" aria-label="20 places" segments={[10, 5, 3, 2]} />
      <MapMarkerCluster count={20} size="lg" aria-label="20 places, all one kind" segments={[1]} />
      <MapMarkerCluster count={20} size="lg" aria-label="20 places, two kinds" segments={[1, 1]} />
    </div>
  );
}

Long count

Large counts are never clipped: abbreviate them yourself ("99+", "1.2k") and keep the exact number in the name.

Loading example…

app.tsx

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

export function LongCount() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <MapMarkerCluster count="99+" size="sm" aria-label="124 places" />
      <MapMarkerCluster count="1.2k" size="md" aria-label="1,248 places" />
      <MapMarkerCluster count="12.5k" size="lg" aria-label="12,480 places" />
    </div>
  );
}

On map surfaces

On map surfaces (the map-* tokens, light and dark): the surface-coloured base and shadow keep the marker readable.

Loading example…

app.tsx

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

export function OnMapSurfaces() {
  return (
    <div className="flex flex-wrap gap-4">
      {["bg-map-land", "bg-map-water", "bg-map-park", "bg-map-building"].map((surface) => (
        <div
          key={surface}
          className={`flex size-28 items-center justify-center rounded-md ${surface}`}
        >
          <MapMarkerCluster count={8} size="md" aria-label="8 places" onPress={() => undefined} />
        </div>
      ))}
    </div>
  );
}

Right to left

Right-to-left: a symmetric disc, so nothing mirrors; the count keeps its digits.

Loading example…

app.tsx

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

export function RightToLeft() {
  return (
    <div dir="rtl" lang="ar" className="flex flex-wrap items-center gap-6">
      <MapMarkerCluster count="١٢" size="md" aria-label="١٢ مكانًا" />
      <MapMarkerCluster
        count={12}
        size="md"
        aria-label="12 مكانًا، تكبير"
        onPress={() => undefined}
      />
    </div>
  );
}

Disabled

Disabled: dimmed, out of the tab order.

Loading example…

app.tsx

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

<MapMarkerCluster
  count={8}
  aria-label="8 places, unavailable"
  size="md"
  onPress={() => undefined}
  isDisabled
/>;

Props 14

Press "Try it" on a card to load that prop into the playground.

count*Nexera

string | number

Number of places the cluster stands for. Show a short count: the number is never clipped, so abbreviate large ones ("99+", "1.2k"). Keep the exact number in the accessible name.

sizeNexera

"sm" | "md" | "lg"

Diameter and type size: 36 px with Component/Badge text, 48 px with Body/Strong, 60 px with Heading/H4.

segmentsNexera

readonly number[]

Relative weights of the four ring segments, in the Figma colours chart/1, chart/2, chart/5, chart/3 (for example the share of each kind of place in the cluster). The ring is decorative: it never replaces text, so describe the mix in the accessible name or next to the map if it matters (WCAG 1.4.1). Weights of zero or less are ignored; without usable weights the four segments are equal, as drawn in Figma.

idNexera

string

DOM id.

aria-describedbyNexera

string

Id(s) of the element(s) that describe the marker (for example a summary of what the cluster holds).

classNameNexera

string

Extra classes, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style (typically the position on the map).

aria-labelNexera

string

Accessible name, for example "12 places" or "12 places, zoom in" (WCAG 4.1.2). It should start with the visible count (2.5.3). Translate it.

aria-labelledbyNexera

string

Id(s) of the element(s) that name the cluster; wins over aria-label. Id(s) of the element(s) that name the cluster.

onPressNexera

((event: PressEvent) => void) | ((event: PressEvent) => void)

Called when the marker is pressed (pointer, Enter or Space). Makes the marker a button. Also called when the link is pressed.

hrefNexera

string

Makes the marker a link to this URL.

targetNexera

string

Link target.

relNexera

string

Link relationship.

isDisabledNexera

boolean

Disables the button. Disables the link.

* 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.

WCAG 2.2 evidence

5 direct · 1 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.1Use of ColorLevel A · tested directly
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

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:.

data-disabled
data-hovered

Usage

<MapMarkerCluster className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

No block uses MapMarkerCluster yet.

Theme studio

MapMarkerCluster

Try every prop. Copy the code.

Examples 7

As button

As link

Weighted segments

Long count

On map surfaces

Right to left

Disabled

Props 14

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components