skills.rest
lsongdev
lsongdevCOMMUNITY
Explore all skills by this author →
Website𝕏@lsongdevGitHub

openstreetmap-marker

Generate mobile-first Leaflet marker map HTML pages from landmark JSON data.

Updated Jul 20, 2026
Search Tags:#html#leaflet#markers#openstreetmap#map generation#travel itinerary#gcj-02
One-click install
npx skills add https://github.com/lsongdev/skills --skill openstreetmap-marker-lsongdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: openstreetmap-marker
Source: https://github.com/lsongdev/skills/tree/main/openstreetmap-marker
Command: npx skills add https://github.com/lsongdev/skills --skill openstreetmap-marker-lsongdev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve? Creating a shareable, visually polished map of travel landmarks usually requires a mapping API key, a web framework, and manual handling of China's GCJ-02 coordinate offset. This Skill produces a self-contained, browser-previewable HTML map styled after Amap's mobile app, with no API key required. ## Core Features & Use Cases - Custom Marker Map Generation: Builds a full-screen Leaflet + OpenStreetMap page with circular colored Font Awesome icon markers, text label pills, and a Google Maps-style bottom info card for each point. - GCJ-02 to WGS-84 Conversion: Includes a CLI script that converts coordinates from Amap/Tencent/Baidu/Apple Maps search results so mainland China markers do not drift off position. - Native App Deep Linking: Each marker's info card offers an "Open Location in..." action sheet that launches Amap, Google Maps, or Apple Maps via platform-aware URL schemes with web fallbacks. - Use Case: Planning a Hangzhou trip, you collect coordinates for West Lake and other sights, run the build script, and receive a single HTML file you can open on your phone to browse and navigate to each stop. ## Quick Start Generate an Amap-style marker map HTML page for my list of Hangzhou travel landmarks using the openstreetmap-marker skill.

Frequently Asked Questions about openstreetmap-marker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom marker map with Leaflet and OpenStreetMap?▼

Prepare a JSON array of landmarks with name, lat, and lng fields, then run the build_map.py script with your output path and optional title, header, and style flags. It renders a self-contained HTML page using Leaflet and CARTO basemap tiles with no API key required.

How to fix marker offset on OpenStreetMap for locations in China?▼

Chinese map services like Amap, Tencent, and Apple Maps return GCJ-02 coordinates, which drift on WGS-84 basemaps like OpenStreetMap. Convert them first with the included gcj_convert.py script, which automatically skips points outside mainland China.

Does this map require a Google Maps or Mapbox API key?▼

No API key is required. The map uses CARTO's free Voyager and Dark basemap tiles, which are suitable for personal and demo use but subject to rate limits. For high-traffic production use, switch the TILE_STYLES setting to a licensed provider.

Can the generated map open locations in Amap or Apple Maps?▼

Yes, tapping a marker opens an info card with an "Open Location in..." button showing platform-aware options. Amap appears only for points in mainland China, Apple Maps only on iOS, and Google Maps always, each using native URL schemes with web fallbacks.

What marker styles and icons can I use on the map?▼

Markers support six color types (red, green, blue, purple, brown, orange) that control the dot color and a default Font Awesome icon. You can override the icon with any free Font Awesome 6 solid class name such as fa-train or fa-utensils.

Related Skills

Explore More Personal & Entrepreneur Skills→
openakitaopenakita
2.0k

openakita/skills@amap-maps

Queries Amap Maps APIs for POI search, route planning, geocoding, and weather.

Community
Intermediate
escapevelocitylabsescapevelocitylabs

build-trip-book

Orchestrate a multi-stage pipeline to synthesize travel research into structured HTML trip books.

Official
Advanced
yongseongkimyongseongkim

youtube-extract-locations

Extract and geocode real-world locations from YouTube video metadata, descriptions, and transcripts.

Community
Advanced
AVOI-CEOAVOI-CEO

architecture-diagram

Generate standalone HTML architecture diagrams with inline SVG.

Community
Advanced