feat: Add InteractiveMap component using react‑leaflet

[revogabe]

Description

Adds a new InteractiveMap component to address issue #675. The component:

• Renders an interactive map with pan and zoom via react‑leaflet
• Accepts props:
  • markers: Array<{ lat: number; lng: number; label: string }>
  • Optional heatData: Array<[number, number, number]>
• Displays tooltips on marker hover
• Supports marker clustering when zoomed out
• Uses zod schema for props validation
• Integrates Tambo-specific streaming via useTamboComponentState, useTamboStreamingProps, useTamboStreamStatus, and TamboPropStreamProvider
• Structured similarly to the existing graph.tsx example
• Style Variations

---

Related Issue

• Interactive Map component with react‑leaflet #675 – interactive-map component

---

Preview

Recording.2025-07-21.031339.mp4

---

Next Steps

• Fix re-render component
• Allow custom cluster icons
• Optimize performance for large datasets

[vercel]

@revogabe is attempting to deploy a commit to the tambo ai Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
showcase	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 28, 2025 1:58am
tambo-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 28, 2025 1:58am

[michaelmagan]

The demo looks great! I wonder if we can show the map after the first pin is generated, and then upon each complete of a full pin we show it to to the graph?

I'm working on something similar for our graph component right now. We an swap notes tomorrow.

[revogabe]

In my last commits I made some adjustments and we’re no longer seeing any errors. This is a temporary solution to handle Next.js, and we can look for a better way in the future to avoid this split between server-side and client-side.

[MichaelMilstead]

looks like we have a ts-node dependency in package-lock that's needed for running tests, but it was removed from a package.json a while ago, so the new package-lock here doesn't contain it.

To get this PR through, how about we remove the package-lock changes and we can clean that up later

[alecf]

so in order to seperate out these issues, I just landed #703 which adds back ts-node. It seems like someone deleted the package-lock.json and then re-ran npm install which is generally not a good pattern (it can cause all sorts of sub-packages to update that you didn't intend)

My request for the above is:

1. restore the original package-lock.json + various package.json files
2. npm ci to make sure you get a clean package install
3. npm install all the various leaflet libraries at the correct versions

that should make sure only the minimal changes are made to the various package*.json files.

[revogabe]

I'm running into this same issue again after reverting back to react-leaflet v4. I remember this was the main reason I originally moved to v5. I'm trying to find a workaround, but so far nothing seems to work consistently.

PaulLeCam/react-leaflet#936
PaulLeCam/react-leaflet#1073

cc: @alecf

[revogabe]

so in order to seperate out these issues, I just landed #703 which adds back ts-node. It seems like someone deleted the package-lock.json and then re-ran npm install which is generally not a good pattern (it can cause all sorts of sub-packages to update that you didn't intend)

My request for the above is:

1. restore the original package-lock.json + various package.json files
2. npm ci to make sure you get a clean package install
3. npm install all the various leaflet libraries at the correct versions

that should make sure only the minimal changes are made to the various package*.json files.

done, but I’m still working on the issue I mentioned above.

[alecf]

@revogabe I found a few fixes - and I turned off strict mode for the showcase to let the map run - turns out strict mode for development is what is causing that map container error. As much as I'd like to use strict mode, turning it off is preferred to upgrading to react 19.

Please see my changes here:
https://github.com/tambo-ai/tambo/commits/interactive-map/

[revogabe]

Nice! this works well and is stable for merged, we can work on improvements later. Thanks for the help @alecf