@elabs-ai/components-maps

MapLibre GL maps: MapCanvas, markers, popups, controls, routes, arcs, GeoJSON, clusters.

Part of brand-ui, a source-owned, token-driven React component system. Published to the public npm registry under the @elabs-ai scope — it installs like any other npm dependency, with no registry configuration and no token required. See docs/CONSUMING.md.

Install

pnpm add @elabs-ai/components-tokens @elabs-ai/components-maps

Set up styling (do not skip)

Components are Tailwind v4 classes backed by semantic tokens. Two lines in your CSS entry, or everything renders unstyled — the single most common mistake:

@import "@elabs-ai/components-tokens/styles.css";
@source "../node_modules/@elabs-ai/components-maps/dist";

The @source line is required because Tailwind ignores node_modules. Add one per brand-ui package you render. Then wrap your app once:

import { ThemeProvider } from "@elabs-ai/components-tokens";

<ThemeProvider defaultTheme="light">{children}</ThemeProvider>;

This package specifically

• maplibre-gl is a peer — it owns a WebGL context and global CSS.
• No CSS import needed: MapCanvas pulls in MapLibre's stylesheet and the brand overrides itself.

What's in it

33 exported components — including DEFAULT_MAP_HEIGHT, MAP_BREAKPOINT_THRESHOLDS, MAP_BREAKPOINTS, MAP_CORNERS, MAP_LABEL_ANCHORS.

Don't guess the API — ask the CLI:

pnpm add -D @elabs-ai/components-cli
pnpm exec brand-ui search <query>   # find a component
pnpm exec brand-ui docs <Name>      # its real props, from source

Using an AI coding agent?

For Claude Code, install the plugin from this repo's checkout:

/plugin marketplace add .
/plugin install brand-ui

brand-ui docs <Name> returns intent, composition, state→token mappings and anti-patterns — tell your agent to run it instead of guessing a prop. The CLI also runs as an MCP server (brand-ui mcp).

Full guide

Tailwind and Next.js wiring, per-package extras, agent enablement and a prompt for migrating an existing project: docs/CONSUMING.md.

License

MIT

Package detail

Token-driven MapLibre GL map components for brand-ui: MapCanvas (theme-aware basemap), MapMarker (+ content/label/popup/tooltip parts), MapPopup, MapControls, MapRoute, MapArc, MapGeoJSON, MapClusterLayer.

import { MapCanvas, MapControls, MapMarker, MapMarkerContent } from "@elabs-ai/components-maps";

<div className="h-96">
  <MapCanvas center={[13.4, 52.52]} zoom={11}>
    <MapMarker longitude={13.4} latitude={52.52}>
      <MapMarkerContent />
    </MapMarker>
    <MapControls />
  </MapCanvas>
</div>;

• The basemap flavor (light/dark) follows the active theme's own color-scheme (resolveThemeIsDark), so a theme you authored yourself resolves correctly too; pass theme to pin it.
• Default layer paints (routes, arcs, clusters, GeoJSON fills) resolve semantic tokens at runtime — WebGL can't read CSS variables — and re-resolve on theme change.
• <MapCanvas> imports MapLibre's CSS and the brand popup overrides itself.
• MapLibre's attribution control is disabled by default. The default Carto basemap serves ODbL-licensed OpenStreetMap data that requires the credit, so either display it via <AttributionPanel> (@elabs-ai/components-ui) somewhere the user can reach, or re-enable the in-map control with attributionControl={{ compact: true }} (it wins through the prop spread). styles / blank avoid the requirement entirely by changing the tiles.
• Use blank for tile-less data-viz canvases (choropleths, arcs, dot maps).

Attribution

Adapted from mapcn (MIT License, © 2025 Anmoldeep Singh). maplibre-gl is BSD-3-Clause.