brand-ui — MapGeoJSON

import { MapGeoJSON } from "@elabs-ai/components-maps";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-maps

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui MapGeoJSON component (from @elabs-ai/components-maps) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look MapGeoJSON up before writing code: `npx -y @elabs-ai/components-cli docs MapGeoJSON` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-maps is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-maps` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-maps`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Examples

3 live examples

Interactive Hover

Pattern And Vignette

Area markers for a locator: a striped fill (a second channel besides colour — it survives greyscale) and a soft vignette glow along the edge. `fillOpacity` sets the tint under the stripes.

API

`MapGeoJSON`

Prop	Type	Description
`data`required	`MapGeoJSONData<P>`	GeoJSON data (FeatureCollection, Feature, Geometry) or a URL to fetch it from. On a canvas with a `plan` extent the coordinates are PLAN units — `[x, y]` in the plan's own drawing units — and are converted for you.
`id`	`string`	Optional unique identifier prefix for the source/layers. Auto-generated if not provided.
`promoteId`	`string`	Feature property to promote to the feature `id`. Required for hover and selected feature-state (`fillHoverPaint`, `selectedId`) and stable `onHover`/`onClick` payloads.
`fillPaint`	`MapFillPaint \| false`	Paint for the polygon fill layer. Merged on top of a theme-aware neutral default (the `--border` token — a mid neutral that reads on the page surface in every theme). Pass `false` to omit the fill layer entirely (e.g. outlines only).
`linePaint`	`MapLinePaint \| false`	Paint for the outline layer. Merged on top of a hairline default (`line-color` = the `--background` token, `line-width` = 0.5) for thin separators. Override `line-color` if your container differs, or pass `false` to omit the layer.
`fillHoverPaint`	`MapFillPaint`	Paint merged onto the fill layer for the feature under the cursor, applied as a `case` expression keyed on hover feature-state. Requires `promoteId`.
`fillOpacity`	`number`	The fill layer's opacity, 0–1 — shorthand for `fillPaint["fill-opacity"]` (which wins when both are set). Default 1, or 0.25 with a `pattern`, so the stripes read over a tint of the same colour.
`pattern`	`MapGeoJSONPattern`	Hatch the areas with stripes (see {@link MapGeoJSONPattern}).
`vignette`	`MapGeoJSONVignette`	Glow around the areas' edges (see {@link MapGeoJSONVignette}).
`lineHoverPaint`	`MapLinePaint`	The outline equivalent of `fillHoverPaint`. Requires `promoteId`.
`fillSelectedPaint`	`MapFillPaint`	Paint merged onto the fill layer for the feature(s) named by `selectedId`. Applied outside hover, so a selected feature still looks selected while the cursor is over it. Requires `promoteId`.
`lineSelectedPaint`	`MapLinePaint`	The outline equivalent of `fillSelectedPaint`. Requires `promoteId`.
`selectedId`	`string \| number \| readonly (string \| number)[] \| null`	The selected feature id(s) — the promoted `promoteId` values. Selection is the consumer's state; this only paints it.
`hoveredId`	`string \| number \| null`	Take over the highlight: when set, the hover paint follows THIS id instead of the pointer. That is how `MapPlanOverlay` makes a keyboard-focused room light up exactly as a hovered one does — one channel, one appearance.
`onClick`	`(e: MapGeoJSONEvent<P>) => void`	Callback when a feature is clicked.
`onHover`	`(e: MapGeoJSONEvent<P> \| null) => void`	Callback fired when the hovered feature changes; `null` when the cursor leaves.
`interactive`	`boolean`	Whether features respond to mouse events. Defaults to `false` on a geographic canvas and `true` on a plan canvas, where the shapes ARE the subject rather than a backdrop.
`featureLabel`	`(feature: MapGeoJSONFeature<P>, index: number) => string`	The text of a feature in the keyboard list an `interactive` map renders — one visually-hidden button per feature, so the values a pointer reveals on hover are reachable by Tab and readable by a screen reader (WCAG 2.1.1 and 1.3.1). Say what the region is AND what it is worth — the same sentence a hover readout prints. Defaults to the promoted id.
`pickPadding`	`number`	How far, in px, a click may miss a shape and still land on it. Defaults to 8 px on a plan (so a 20 px seat is a 36 px touch target) and 0 elsewhere. An exact hit always wins over a padded one.
`hitWidth`	`number`	Width, in px, of the invisible line that makes an outline-only shape touchable (default 16). Only used when `fillPaint` is `false`.
`beforeId`	`string`	Optional MapLibre layer id to insert the layers before (z-order control).