Map

Usage

"use client";

import { useState } from "react";

import { Map } from "@thenamespace/uikit";

Anatomy

Import the Map component and compose overlays with dot notation.

import { Map } from "@thenamespace/uikit";

const styles = {
  dark: "/assets/maps/dark-matter.json",
  light: "/assets/maps/voyager.json",
};

<Map center={[-122.3927, 37.7816]} styles={styles} zoom={13.25}>
  <Map.Route coordinates={route} />
  <Map.Marker latitude={37.79519} longitude={-122.39385}>
    <Map.MarkerContent>
      <Map.MarkerDot color="#22c55e" />
      <Map.MarkerLabel>Start</Map.MarkerLabel>
    </Map.MarkerContent>
    <Map.MarkerTooltip>Ferry Building</Map.MarkerTooltip>
  </Map.Marker>
  <Map.Popup latitude={37.79519} longitude={-122.39385}>
    Pickup ready
  </Map.Popup>
  <Map.Controls>
    <Map.ZoomControl />
    <Map.CompassControl />
  </Map.Controls>
</Map>;

The examples above use CARTO basemaps for Voyager (light) and Dark Matter (dark). See the CARTO docs for available style URLs and usage terms.

Live Visitors

"use client";

import { Map } from "@thenamespace/uikit";
import { Avatar } from "@thenamespace/uikit/avatar";

Property Listings

"use client";

import { useState } from "react";

import { Map } from "@thenamespace/uikit";

Live Tracking

"use client";

import { useEffect, useState } from "react";

import { Map } from "@thenamespace/uikit";

Store Locator

"use client";

import { useState } from "react";

import { Map } from "@thenamespace/uikit";

Fleet Dispatch

"use client";

import { useState } from "react";

import { Map } from "@thenamespace/uikit";

Coverage Zones

"use client";

import { useEffect } from "react";

import { Map, useMap } from "@thenamespace/uikit";

Heatmap

"use client";

import { useEffect } from "react";

import { Map, useMap } from "@thenamespace/uikit";

Flight Paths

"use client";

import { Map } from "@thenamespace/uikit";
import { Card } from "@thenamespace/uikit/card";

Incident Monitor

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

Style

Map uses MapLibre GL internally, but it does not ship a tile provider or basemap style. Pass mapStyle for a single MapLibre-compatible style URL/object, or styles for separate light and dark styles. These demos pass CARTO Voyager and CARTO Dark Matter through styles.

Event Operations

"use client";

import { useState } from "react";

import {

Global Newsroom

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useMemo, useState } from "react";

CSS Classes

Element Classes

• .map — MapLibre container and positioning root.
• .map__marker — Marker host element.
• .map__marker-content — React-rendered marker content.
• .map__default-marker — Default marker dot.
• .map__marker-label — Marker label.
• .map__popup-content — Popup content wrapper.
• .map__tooltip — Marker tooltip.
• .map__controls — Controls container.
• .map__control-group — Grouped control surface.
• .map__control-button — Single control button.

CSS Variables

• --map-control-size — Control button size.
• --map-control-offset — Controls offset from map edges.
• --map-popup-max-width — Popup and tooltip max width.
• --map-marker-color — Default marker fill color.
• --map-marker-ring-color — Default marker ring color.
• --map-route-color — Default route stroke color.
• --map-route-width — Default route stroke width.
• --map-route-opacity — Default route stroke opacity.

API Reference

Map

The root map container. Renders a MapLibre map with Namespace UIKit themed controls and overlays.

Also supports MapLibre MapOptions except container and style.

Map.Marker

Adds a React-rendered marker at a longitude/latitude.

Marker Parts

• Map.MarkerContent — Renders marker content into the MapLibre marker element.
• Map.MarkerDot — Renders the default marker dot. Customize with className, style, color, or ringColor.
• Map.MarkerLabel — Adds a marker label with position="top" | "bottom".
• Map.MarkerTooltip — Shows a lightweight tooltip on hover.
• Map.MarkerPopup — Attaches a MapLibre popup to a marker.

Map.MarkerDot

Renders the default marker visual. Use it inside Map.MarkerContent when you want the built-in marker style plus labels or other custom content.

Map.Popup

Renders a standalone popup at a longitude/latitude.

Map.Controls

Positions map controls in a corner.

Use Map.ZoomControl, Map.CompassControl, Map.LocateControl, Map.FullscreenControl, Map.ControlGroup, Map.ControlButton, and Map.ControlSeparator inside Map.Controls.

Map.Route

Draws a GeoJSON line layer from coordinates.

Map.Route does not calculate navigation paths or snap points to roads. Pass the route geometry from your routing provider, such as Google Routes, Mapbox Directions, OSRM, Valhalla, or your own routing service.

Map.Arc

Draws curved connection lines between points. Each datum needs id, from, and to.

Map.ClusterLayer

Draws clustered points from a GeoJSON point collection or GeoJSON URL.