Introduction

ai-map provides beautifully designed, accessible, and customizable map components. Built on AMap JS API, styled with Tailwind CSS, and designed to work with shadcn/ui.

There's no proper copy-paste, easy-to-use map integration for React. Most solutions require complex configurations, API keys, or heavy wrapper libraries. ai-map solves this:

• One Command: Run the install, get a working map. Just add your AMap API key — no complex config or wrapper libraries.
• Own Your Code: Copy the components into your project. Modify anything.
• No Wrapper Overhead: Built directly on AMap. Drop to the raw API whenever you need.
• Looks Good Already: Thoughtful defaults with dark mode. Style with Tailwind as needed.
• Works Anywhere: Bring your own tiles — AMap official or custom source.

ai-map uses AMap directly instead of wrapper libraries like react-map-gl. This keeps components close to the underlying API — when you copy a ai-map component, you fully own the map instance without extra framework dependencies.

UI elements like markers, popups, and tooltips are rendered via React portals, giving you complete styling freedom. You can drop down to raw AMap APIs anytime without "escaping" a wrapper.

ai-map works with any AMap-compatible styles. This means you can use tiles from virtually any provider:

• MapTiler - Beautiful vector tiles with extensive customization options
• Carto - Clean, minimal basemaps perfect for data visualization
• OpenStreetMap - Community-driven, open-source map data
• Stadia Maps - Fast, reliable tile hosting with multiple styles
• Thunderforest - Specialized maps for outdoors, cycling, and transport
• And any other provider that supports the AMap style spec