/ Directory / Playground / jsapi-skills
← All servers ↗ GitHub
● Community baidu-maps ⚡ Instant

jsapi-skills

by baidu-maps · baidu-maps/jsapi-skills

Official Baidu Maps JSAPI skills — 2D/2.5D (BMapGL), 3D with three.js, and the jsapi-ui-kit for PlaceSearch/PlaceDetail components.

baidu-maps/jsapi-skills is the official Baidu Maps team's Claude skill set. Three sub-skills: bmap-jsapi-gl (WebGL map init, overlays, events, layers, routing, geocoding), bmap-jsapi-three (3D maps with three.js — multi-source base map, 3D models, natural environment, digital twin), and jsapi-ui-kit (PlaceSearch with keyword/nearby/bounds search + PlaceDetail components). Claude gets accurate docs and code examples for Baidu Maps development.

▶ Watch demo 📦 Install 💡 Use Cases

Why use it

Key features

Live Demo

What it looks like in practice

jsapi-skill.replay ▶ ready
0/0

Install

Author repository · Claude Skills documentation

Use Cases

Real-world ways to use jsapi-skills

Embed a Baidu map with markers and routing into a web app

👤 Devs serving Chinese users where Baidu Maps is the default ⏱ ~30 min intermediate

When to use: Google Maps isn't viable for your audience; Baidu Maps is the standard.

Flow
  1. Scaffold with bmap-jsapi-gl
    Use bmap-jsapi-gl skill — init a BMapGL map in <div id='map'>, center on Beijing, add markers for 5 lat/lng pairs.✓ Copied
    → Claude uses correct BMapGL constructors, not the old BMap JSAPI
  2. Add routing
    Now add driving directions between the first two markers.✓ Copied
    → DrivingRoute usage with correct event wiring

Outcome: A working map component in your app.

Pitfalls
  • Mixing legacy BMap JSAPI with BMapGL (WebGL) APIs — Skill keeps them distinct; pick one family and stick with it
Combine with: filesystem

Render a 3D digital-twin scene over a Baidu Maps base layer

👤 Devs building industrial / smart-city visualizations ⏱ ~120 min advanced

When to use: You need 3D models overlaid on a geospatial base.

Flow
  1. Set up bmap-jsapi-three
    bmap-jsapi-three — base map + three.js scene, load a glTF building model at given coords.✓ Copied
    → Correct camera sync between Baidu base and three.js scene
  2. Visualize data
    Add a heatmap from sensor data points on top.✓ Copied
    → Geodata visualization layered correctly

Outcome: A 3D scene anchored to real-world coordinates.

Drop-in a PlaceSearch + PlaceDetail UI with jsapi-ui-kit

👤 Devs who don't want to hand-build place-search UI ⏱ ~30 min intermediate

When to use: You need a functional 'find nearby' UI fast.

Flow
  1. Scaffold components
    jsapi-ui-kit — PlaceSearch by keyword within current bounds + PlaceDetail panel.✓ Copied
    → Components mounted with bind to the map instance

Outcome: A working place-search UX without writing the UI shell.

Combinations

Pair with other MCPs for X10 leverage

jsapi-skill + filesystem

Scaffold across your actual project structure

Create BaiduMap.tsx under src/components and wire it into the search page.✓ Copied
jsapi-skill + github

Commit integration with proper config separation

Add the map component and open a PR; keep the ak key in .env, not source.✓ Copied

Tools

What this MCP exposes

ToolInputsWhen to callCost
bmap-jsapi-gl 2D/2.5D map intent Standard map embedding 0
bmap-jsapi-three 3D scene intent + models 3D visualization 0
jsapi-ui-kit component intent (PlaceSearch / PlaceDetail) Need place-search UI without building it 0

Cost & Limits

What this costs to run

API quota
Baidu Maps API has per-day quotas depending on tier
Tokens per call
Moderate per sub-skill
Monetary
Free for dev usage; production tiers vary — check lbsyun.baidu.com
Tip
Use staging ak for dev, production ak with quota monitoring for prod.

Security

Permissions, secrets, blast radius

Credential storage: Baidu Maps ak goes in env var / server-side; don't commit to source
Data egress: Map tiles and API calls go to Baidu Maps servers

Troubleshooting

Common errors and fixes

Wrong trigger keywords — three.js scene mis-aligned with base map

Use bmap-jsapi-three explicitly rather than generic 'three.js' prompts.

Alternatives

jsapi-skills vs others

AlternativeWhen to use it insteadTradeoff
Google Maps JavaScript APIYour audience is outside ChinaDoesn't work reliably inside China
Mapbox / MapLibreYou want OSM-based vector tilesDifferent coordinate systems; more DIY

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills

Continue exploring

Related tools and workflows

Choose another guide for your workflow, or explore a collection.

Browse all topic collections → · See 29 new official additions →