MapMarkerPlace

Stable
WCAG 2.2 evidence
RTL

A place (an office, a site, a building) on a map: a brand-coloured rounded pin with a building icon, an optional headcount pill and a pointer. Selected, it grows, gets a halo and shows the name. The map is not part of the library: position the marker yourself with translate(-50%, -100%) so the pointer tip sits on the coordinates. It is plain (an image named "Lahore HQ, 24 people") unless you give it onPress (a button) or href (a link). Interactive markers are React Aria buttons and links: Enter and Space press, keyboard focus draws the focus ring around the pin, hover is data-hovered (WCAG 2.1.1, 2.4.7, 4.1.2). The selected marker has aria-current. That it is a place is given by the building icon and the name, and the headcount by text: colour never carries information alone (1.4.1). Consumer duties: use MapMarkerPerson for people; keep neighbouring markers 24 px apart or large enough (2.5.8).

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

Loading example…

9
examples: 13
props: 2
live controls: 1
platform: 8
WCAG criteria: 3
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…

isSelectedfalse

isDisabledfalse

Generated code

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

<MapMarkerPlace />

Examples 8

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

Without headcount

Show headcount off: the pill is shown only when a headcount is given.

Loading example…

app.tsx

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

export function WithoutHeadcount() {
  return (
    <div className="flex items-end gap-8">
      <MapMarkerPlace name="Lahore HQ" />
      <MapMarkerPlace name="Lahore HQ" isSelected />
    </div>
  );
}

Selectable

A button that selects the place; the selected marker has a halo, a larger pin and its name, and aria-current.

Loading example…

app.tsx

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

export function Selectable() {
  function Sites() {
    const [selected, setSelected] = useState("lhr");
    const sites = [
      { id: "lhr", name: "Lahore HQ", headcount: 24 },
      { id: "khi", name: "Karachi office", headcount: 11 },
      { id: "isb", name: "Islamabad site", headcount: 6 },
    ];
    return (
      <div className="flex flex-wrap items-end gap-10">
        {sites.map((site) => (
          <MapMarkerPlace
            key={site.id}
            name={site.name}
            headcount={site.headcount}
            isSelected={selected === site.id}
            onPress={() => {
              setSelected(site.id);
            }}
          />
        ))}
      </div>
    );
  }
  return <Sites />;
}

As link

A link to the place's page.

Loading example…

app.tsx

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

<MapMarkerPlace name="Lahore HQ" headcount="24" href="#lahore-hq" />;

Long name

A long name wraps inside the selected marker's label (up to 150 px wide) instead of stretching the marker.

Loading example…

app.tsx

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

<MapMarkerPlace
  name="Karachi Regional Distribution and Fulfilment Centre"
  headcount="24"
  isSelected
/>;

Long headcount

Large headcounts are never truncated: the pill grows. Abbreviate them yourself where space is tight.

Loading example…

app.tsx

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

<MapMarkerPlace name="Lahore HQ" headcount="1,248" />;

Right to left

Right-to-left: the headcount pill moves to the top-left corner of the pin; the map itself is not mirrored.

Loading example…

app.tsx

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

export function RightToLeft() {
  return (
    <div dir="rtl" lang="ar" className="flex flex-wrap items-end gap-10">
      <MapMarkerPlace name="المقر الرئيسي" headcount="24" headcountLabel="شخصًا" />
      <MapMarkerPlace name="المقر الرئيسي" headcount="24" headcountLabel="شخصًا" isSelected />
    </div>
  );
}

Narrow width

Narrow container (320 px): markers are small; a wrapping row keeps them in view.

Loading example…

app.tsx

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

export function NarrowWidth() {
  return (
    <div className="flex max-w-xs flex-wrap items-end gap-8">
      <MapMarkerPlace name="Lahore HQ" headcount="24" onPress={() => undefined} />
      <MapMarkerPlace name="Karachi office" headcount="11" onPress={() => undefined} />
      <MapMarkerPlace name="Islamabad site" onPress={() => undefined} />
    </div>
  );
}

Disabled

Disabled: dimmed, out of the tab order.

Loading example…

app.tsx

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

<MapMarkerPlace name="Lahore HQ" headcount="24" onPress={() => undefined} isDisabled />;

Props 13

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

name*Nexera

string

The place's name. It is the marker's accessible name (WCAG 1.1.1, 4.1.2) and the visible label when the marker is selected.

headcountNexera

string | number

Number of people at the place: the pill on the pin. It is shown when provided and added to the accessible name ("Lahore HQ, 24 people"). Abbreviate a large number ("1.2k").

headcountLabelNexera

string

Word that follows the headcount in the accessible name. Translate it, and use the singular or plural form yourself when it matters.

isSelectedNexera

boolean

Whether the place is the selected marker: a larger pin with a halo and the name label, and aria-current for assistive technology. Hover (State=Hover) is a pointer state that React Aria drives.

idNexera

string

DOM id.

aria-describedbyNexera

string

Id(s) of the element(s) that describe the marker (for example a card with the address).

classNameNexera

string

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

styleNexera

CSSProperties

Inline style (typically the position on the map).

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

6 direct · 2 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.1Use of ColorLevel A · tested directly
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.5.3Label in NameLevel A · 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

Usage

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

Theme studio

MapMarkerPlace

Try every prop. Copy the code.

Examples 8

Without headcount

Selectable

As link

Long name

Long headcount

Right to left

Narrow width

Disabled

Props 13

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components