MapMarker

Needs review
RTL

Places one marker on its MapView at real coordinates ([lng, lat]). The marker keeps its own role, name and focus behaviour; markers are reached with Tab in the order they are rendered.

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

Loading example…

2
examples: 4
props: 2
live controls: 1
platform: 0
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…

anchor

children

Generated code

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

<MapMarker />

Examples 1

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

Centre anchor

anchor="center" for markers whose middle is the point, such as MapMarkerYou.

Loading example…

app.tsx

import { MapMarker, MapMarkerYou, MapView } from "@nexera-ui/react";

export function CentreAnchor() {
  return (
    <MapView
      aria-label="Your location"
      defaultCenter={[-0.1057, 51.5323]}
      defaultZoom={15}
      height={360}
    >
      <MapMarker lngLat={[-0.1057, 51.5323]} anchor="center">
        <MapMarkerYou />
      </MapMarker>
    </MapView>
  );
}

Props 4

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

idNexera

string

Lets MapView selectedId fly to this marker.

lngLat*Nexera

LngLat

Where it stands, as [lng, lat].

anchorNexera

"bottom" | "center"

Which point of the marker sits on lngLat: the pin's tip (bottom) or its centre (center, for MapMarkerYou and clusters).

children*Nexera

ReactNode

The marker: MapMarkerPerson, MapMarkerPlace, MapMarkerYou or MapMarkerCluster.

* 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

<MapMarker className="shadow-sm" />

Theme studio