Map
An interactive map component with markers, pan/zoom functionality, and tooltip support powered by Leaflet and OpenStreetMap. Perfect for location-based visualizations and geographic data displays.
Examples
Seattle Coffee Map
Tambo Conversations
Loading threads...
Installation
Component API
Map
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Map title displayed above the map |
| description | string | - | Optional description text below the title |
| center | [number, number] | [0, 0] | Map center coordinates [latitude, longitude] |
| zoom | number | 10 | Initial zoom level (1-18) |
| markers | MapMarker[] | [] | Array of marker configurations |
| variant | "solid" | "bordered" | "solid" | Visual style of the map container |
| size | "small" | "medium" | "large" | "medium" | Height of the map container |
| className | string | - | Additional CSS classes for customization |
MapMarker
| Prop | Type | Default | Description |
|---|---|---|---|
| position | [number, number] | - | Marker coordinates [latitude, longitude] |
| label | string | - | Marker label displayed in popup |
| tooltip | string | - | Tooltip text shown on hover |
| icon | string | - | Custom marker icon URL |