openstreetmap-marker

OpenStreetMap Marker

Generates a self-contained, browser-previewable custom marker map HTML page styled after Amap's mobile app (light minimal basemap + circular colored icon + text label + immersive full-screen layout with safe-area support).

Core Workflow

1. Get marker coordinates: prefer apple-maps search --query "place name city" --lat <city lat> --lon <city lng> --limit 1 -q --compact, which returns JSON with lat/lon/coordinate_system.
2. Coordinate conversion (critical, do not skip): Apple Maps / Amap / Tencent / Baidu almost always return GCJ-02 coordinates in mainland China, while this skill's Leaflet+OSM/CartoDB basemap uses WGS-84. Using GCJ-02 directly causes markers to drift tens to hundreds of meters (often landing in a river or the sea). Coordinates within mainland China MUST be converted with scripts/gcj_convert.py before writing to landmarks.json; the script automatically skips conversion for points outside China (out_of_china check).

   python3 /var/minis/skills/openstreetmap-marker/scripts/gcj_convert.py <lng> <lat>
   # outputs "wgs_lat,wgs_lng"
   

3. Assemble landmarks.json: an array where each item is:

   {"name": "West Lake", "desc": "UNESCO World Heritage Site, Hangzhou's iconic landmark", "address": "Xihu District, Hangzhou", "lat": 30.2614, "lng": 120.1443, "type": "green", "icon": "fa-tree"}
   

   • name/lat/lng are required; desc/address/type/icon are optional.
   • type determines the marker dot color: red (government/medical/core attraction), green (park/nature), blue (transport/building), purple (commercial/venue), brown (heritage/university), or orange (other). Defaults to blue. Each type also has a sensible default Font Awesome icon (red→fa-star, green→fa-tree, blue→fa-building, purple→fa-bag-shopping, brown→fa-landmark, orange→fa-circle-dot). Leave icon empty to use it.
   • icon (optional): a Font Awesome 6 solid-style icon class name, e.g. "fa-train", "fa-utensils", "fa-mosque", "fa-museum", "fa-mountain". Overrides the type default. Look up icon names at fontawesome.com/icons (free "solid" set). Do NOT use emoji; all icons are unified Font Awesome glyphs rendered via <i class="fa-solid ..."> for a consistent cross-device look.
   • Write this JSON array to a temp file with file_write, e.g. /tmp/landmarks.json.
4. Generate the page:

   python3 /var/minis/skills/openstreetmap-marker/scripts/build_map.py \
     /tmp/landmarks.json /var/minis/workspace/<descriptive-filename>.html \
     --title "West Lake Area Landmarks" --header "⚡ Hangzhou Trip" \
     --style light
   

   • --style light (default, light minimal, Amap-like palette) or --style dark (dark immersive).
   • Without --center/--zoom, the script automatically centers and zooms to fit all points with padding; a single point defaults to zoom 14.
5. Deliver: present the result to the user as a Markdown link [Preview](minis://workspace/<filename>.html), tappable to open in the built-in browser.