"Where is it?" is often the first question after a tool response. Geo Map renders one or many latitude/longitude markers directly in the conversation so users can see facilities, fleets, and active routes without leaving chat. **Role:** Information. For visualizing location and route data. See [Design Guidelines](/docs/design-guidelines) for role definitions. ## Getting Started Run this command from your project root. Open `app/layout.tsx` and add the Leaflet import next to your global CSS import. ```tsx import "./styles/globals.css"; import "leaflet/dist/leaflet.css"; ``` Render `GeoMap` in your UI. ```tsx import { GeoMap } from "@/components/tool-ui/geo-map"; ; ``` Register `GeoMap` in your runtime provider so tool results render as map UI instead of raw JSON. ```tsx import { type Toolkit } from "@assistant-ui/react"; import { GeoMap } from "@/components/tool-ui/geo-map"; import { safeParseSerializableGeoMap } from "@/components/tool-ui/geo-map/schema"; export const toolkit: Toolkit = { showGeoMap: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableGeoMap(result); if (!parsed) { return null; } return ; }, }, }; ``` ## Key Features Dot, emoji, and image marker icon variants with schema validation Aggregates dense markers by zoom level with click-to-expand behavior Static, styled route overlays with tooltip/popup metadata Fit markers, routes, or both using viewport target controls ## Accessibility & Keyboard - The map viewport is announced as a named region using `title` + `description`. - Marker and cluster icons expose descriptive labels for assistive tech. - Press `Escape` while focused in the map area to close any open popup. ## Popup & Tooltip Theme Tokens GeoMap shell styling is shipped with the component in a colocated CSS module (`geo-map-theme.module.css`), scoped to `[data-slot="geo-map"]`, and exposed through CSS custom properties. Import Leaflet base CSS once in your root layout, then use these token overrides to customize popup/tooltip/zoom styling. Theme behavior: - When `theme` is omitted, GeoMap inherits the environment theme (`.dark`/`.light` class or `data-theme`) and falls back to `prefers-color-scheme`. - Pass `theme="light"` or `theme="dark"` to force a tile theme. - `--geo-map-canvas-bg` is set by default from the resolved theme (`var(--background)` in dark mode, `var(--muted)` in light mode), and can still be overridden via `style`. ```tsx ``` See `geo-map-theme.module.css` for all available token keys. ## Props void", }, onRouteClick: { description: "Client callback when a route polyline is clicked", type: "(route: GeoMapRoute) => void", }, }} /> ## Marker Schema ## Marker Icon Variants `GeoMapMarkerIcon` supports: 1. `dot` — optional `color`, `borderColor`, and `radius`. 2. `emoji` — required `value`, optional `size`, `bgColor`, `borderColor`. 3. `image` — required `url` (`http/https`), optional size and border styling. ## Route Schema (min 2)", required: true, }, label: { description: "Route label for tooltip/popup", type: "string", }, description: { description: "Route detail text", type: "string", }, tooltip: { description: "Tooltip behavior", type: "'none' | 'hover' | 'always'", }, color: { description: "Polyline color", type: "string", }, weight: { description: "Polyline stroke width", type: "number (1..12)", }, opacity: { description: "Polyline opacity", type: "number (0..1)", }, dashArray: { description: "SVG dash pattern", type: "string (e.g. '6 4')", }, }} /> ## Clustering Schema ## Viewport Schema `viewport` supports two modes: 1. `fit` — auto-fit points in `target` (`markers`, `routes`, or `all`). Supports optional `padding` and `maxZoom`. 2. `center` — fixed `center` + `zoom`. ## Accessibility - Marker and route popups provide text equivalents for map points and paths - Tooltips can be made persistent using `tooltip: "always"` (and hide while the related popup is open) - Leaflet controls remain keyboard accessible ## Related - [Chart](/docs/chart): compare numeric time-series - [Data Table](/docs/data-table): inspect structured marker and route metadata

Tool UI