mcpField
M
mapstage

mapstage

github.com/hopechen067Design & UI49547 installsUpdated 3d ago
Repository

About mapstage

mapstage is a skill for agents building or tuning MapStage scenes, then transferring the result to a production renderer. It covers projections, terrain, styling, settlement tiers, and JSON export.

Key features

  1. 01Adjust map and globe projections
  2. 02Switch satellite and relief rendering
  3. 03Isolate regions and tune CSS color
  4. 04Set settlement tiers
  5. 05Export and migrate version 3 JSON

Use cases

  1. 01Tune a map scene for an app
  2. 02Export a preset after locking camera and style
  3. 03Reuse tuner settings in production rendering

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/hopechen067/mapstage --skill mapstage

After installing, type/mapstagein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
city-tier-schema.md
tested-config.md
tuner-workflow.md
water-overlay.md
参数列表说明.md
schemas/
map-preset.schema.json
sample-sites.schema.json
tuner/
.nojekyll
index.html
map-tiles.config.example.js
map-tiles.config.js
preset-antique-default.json
README.md
vector-layers.html
tuner/assets/
han-city-3d.js
isolate-workbench.js
map-fx.js
polar-ice.geojson
region-isolate.js
sample-sites.json
site-nav.js
terrain-island.js
vector-paint.js
water-pack.json
tuner/presets/
antique-default.json
tuner/scripts/
patch-china-boundaries.mjs
patch-maritime-islands.mjs
patch-zangnan-region.py
tuner/vendor/
maplibre-contour.min.js

Details

From the project README

MapStage

Use this skill when building or tuning a MapStage scene: map/globe projection, satellite, hypsometric relief, Mapterhorn terrain, region isolate, CSS color grade, and JSON export.

When to use

  • Need a live MapStage tuner (map vs globe, satellite vs relief, isolate).
  • Need to lock paint / CSS / camera, then export JSON into another host.
  • Need tiered settlements (capital / large / medium / small / pass / station / ordos).

Do not use the tuner page as the final render host.

Modes

ModePurpose
Production stackEmbed MapStage in your app: optional satellite/raster + Mapterhorn DEM (encoding: 'terrarium') + hillshade + OpenFreeMap vector water + CSS filter + city extrusions. Drive look from exported JSON.
TunerHTTP page under tuner/ (or the public demo) for sliders, projection, isolate, preset load/export.

Workflow

  1. Open the tuner: public demo https://hopechen067.github.io/MapStage/ or cd tuner && python -m http.server and open the local URL printed in the terminal.
  2. Tiles: default EOX Sentinel-2 cloudless (on) + Mapterhorn (tuner/map-tiles.config.js). Override with gitignored map-tiles.config.local.js.
  3. Apply default preset tuner/preset-antique-default.json (same as tuner/presets/antique-default.json). Schema version 3.
  4. Adjust projection / satellite / relief / isolate / CSS / cities until the look locks.
  5. Export JSON (copy or download). Confirm version: 3 plus ui.projection, ui.showSatellite, ui.showRelief, ui.showCssFilter, isolate.
  6. Migrate those fields into the production MapStage scene (see references).
  7. In production: jumpTo camera; wait for idle; optionally pre-cache tiles. Avoid easeTo / flyTo for recorded frames.
  8. Always set DEM with encoding: 'terrarium'. Wrong encoding breaks hillshade/terrain.
  9. Final frames render from the production host — not from the tuner UI.

Hard rules

  • Tiles not bundled — MapStage fetches DEM and basemap at runtime from configured URLs only.
  • Only use basemap endpoints you are allowed to use — defaults are public demo tiles (EOX); swap via config when needed.
  • encoding: 'terrarium' on the terrain source — mandatory.
  • No easeTo / flyTo in recorded production paths; prefer jumpTo + idle.
  • Do not host final render on tuner.
  • Water on the public tuner is OpenFreeMap / OpenMapTiles vector layers (water / waterway). Export ui.showWater is always false (old GeoJSON overlay is off). Do not expect or commit tuner/assets/water-data.js.

Repo vs skill

git clone of this GitHub repo pulls the whole project. The agent skill is only mapstage/. Install that folder with npx skills add hopechen067/MapStage --skill mapstage -g or gh skill install hopechen067/MapStage mapstage --scope user, or copy it into the host skills directory and reload. Agents do not auto-discover mapstage/SKILL.md from a clone.

References

Agents

See agents/openai.yaml for display name / default prompt.

Comments

Markdown supported