gitmyhub

amapcn

TypeScript ★ 33 updated 2mo ago

🗺️ Beautiful map components. 100% Free, Zero config, one command setup.

Ready-made map components for building China-focused maps on top of the AMap Gaode Maps API.

TypeScriptAMapTailwindshadcn/uisetup: moderatecomplexity 2/5

amapcn is a set of ready-made map components built specifically for displaying maps of China. It wraps the AMap (also known as Gaode Maps, a popular Chinese mapping service) API so you don't have to write low-level mapping code yourself.

To use it, you install the package with a single command and then drop map components into your project's user interface like building blocks. It supports markers (pins on the map), popups, tooltips, routes and paths, and controls like zoom, compass, and fullscreen buttons. The maps automatically switch between light and dark visual themes to match your app's design.

The project is styled with Tailwind (a popular utility-based styling tool) and is designed to work with shadcn/ui (a popular set of interface building blocks), so it fits neatly into projects already using those tools. It also has a plugin for Claude Code, an AI coding assistant, so you can build map features using conversational AI help.

You need to register for a free AMap API key before the maps will load — the README points to AMap's developer platform for this step. Commercial use requires reviewing AMap's licensing terms; there is a free tier for personal or development use.

This would suit developers building Chinese-market web apps — for example a business directory, delivery tracker, or travel site — who want interactive maps without the complexity of setting up mapping libraries from scratch. It is written in TypeScript and published under the MIT open-source license.

Where it fits