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
This interactive demo runs inside the showcase's app-level TamboProvider, which sets a per-user context key (persisted in localStorage).
Seattle Coffee Map
Tambo Conversations
Loading threads...
Installation
Component API
Map
| Prop | Type | Default | Description |
|---|---|---|---|
| center | { lat: number; lng: number } | - | Map center coordinates |
| zoom | number | 10 | Initial zoom level (1-20) |
| markers | MapMarker[] | [] | Array of marker configurations |
| heatData | HeatData[] | - | Optional array of heatmap data points (lat, lng, intensity) |
| zoomControl | boolean | true | Whether to show zoom controls |
| size | "sm" | "md" | "lg" | "full" | "md" | Height of the map container |
| tileTheme | "default" | "dark" | "light" | "satellite" | "default" | Map tile layer theme |
| rounded | "none" | "sm" | "md" | "full" | "md" | Border radius of the map container |
| className | string | - | Additional CSS classes for customization |
MapMarker
| Prop | Type | Default | Description |
|---|---|---|---|
| lat | number | - | Latitude coordinate (-90 to 90) |
| lng | number | - | Longitude coordinate (-180 to 180) |
| label | string | - | Marker label displayed in tooltip |
| id | string | - | Optional unique identifier for the marker |