Map

The map container. Handles Mapbox GL setup, light/dark theming, and provides context for child components.

Basic Usage

Wrap your map in <Map>. It reads your token from NEXT_PUBLIC_MAPBOX_TOKEN and follows the document theme automatically.

import { Map } from "@/components/ui/map";

export function BasicMapExample() {
  return (
    <div className="h-[420px] w-full">
      <Map center={[-97.7431, 30.2672]} zoom={11} />
    </div>
  );
}

Theming

By default <Map> follows your site theme: it watches the light / dark class on <html> (the one next-themes toggles) and swaps the basemap live. No configuration needed.

To pin the basemap to a fixed theme and stop it reacting to site theme changes, pass theme:

<Map theme="dark" />

To change which Mapbox style each theme maps to, pass styles:

<Map
  styles={{
    light: "mapbox://styles/mapbox/streets-v12",
    dark: "mapbox://styles/mapbox/dark-v11",
  }}
/>

Heads up: a pinned theme is the off switch for automatic theme following - the map will ignore the document theme entirely until you remove it.

Props

Any other mapboxgl.MapOptions (such as center, zoom, pitch) are passed straight to the map.

Prop	Type	Default	Description
`theme`	`"light" \| "dark"`	`—`	Basemap theme. Follows the document theme when omitted; set it to pin a theme and disable automatic switching.
`styles`	`{ light?: string; dark?: string }`	`—`	Override the default Mapbox styles per theme.
`accessToken`	`string`	`NEXT_PUBLIC_MAPBOX_TOKEN`	Mapbox access token.
`className`	`string`	`—`	Classes for the map container.

Introduction Marker