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.

Example

Seattle Landmarks

Interactive Demo

Use natural language to generate and modify maps in real time. This interactive demo runs inside the showcase's app-level TamboProvider, which sets a per-user context key (persisted in localStorage).

AI-Generated Map

Tambo Conversations

Installation

npx tambo add map

Try It Yourself

1. Install the component

npx tambo add map

2. Register with Tambo

tsx

import { Map, mapSchema } from "@/components/tambo/map";
import { MessageThreadFull } from "@/components/tambo/message-thread-full";
import { useTambo } from "@tambo-ai/react";
import { useEffect } from "react";

export function App() {
  const { registerComponent } = useTambo();

  useEffect(() => {
    registerComponent({
      name: "Map",
      description: "Interactive map for visualizing geographic data.",
      component: Map,
      propsSchema: mapSchema,
    });
  }, [registerComponent]);

  return <MessageThreadFull />;
}

3. Send a prompt

Try these example prompts:

→ "Plot offices in New York, Austin, and Seattle"
→ "Show a map of coffee shops around downtown Portland"
→ "Create a heatmap of support ticket hotspots in San Francisco"

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