CommunitySchreiben & Editierengithub.com

MapStage

Live-Tuner für Kartenszenen: Karte/Globus, Satellit, hypsometrische Reliefdarstellung, Regionsisolierung, Mapterhorn DEM, JSON-Voreinstellungen.

Was ist MapStage?

Diese Fähigkeit ist ein Live-Tuner für MapStage-Szenen, der es Entwicklern ermöglicht, interaktiv zwischen Karten- und Globusprojektionen, Satellitenbildern, hypsometrischer Reliefdarstellung und regionsisolierter Ansicht zu wechseln. Sie ist für Agenten wie Claude Code, Coder oder Codex optimiert und unterstützt die Arbeit mit tierierten Siedlungen (z. B. Hauptstadt, groß, mittel, klein) sowie die Feineinstellung von CSS-Farbgrading und Kamera-Parametern. Der Workflow umfasst das Starten eines lokalen HTTP-Servers, das Laden von Voreinstellungen, das Exportieren von JSON-Konfigurationen und die Integration in eine Produktionsumgebung. Wichtig: Die finale Darstellung erfolgt nicht im Tuner, sondern in der Produktionshost-Anwendung, wobei DEM-Quellen zwingend mit `encoding: 'terrarium'` konfiguriert werden müssen und `easeTo`/`flyTo` für aufgezeichnete Frames vermieden werden sollte.

Funktioniert mit~Claude Code✓Codex CLI~Cursor
npx skills add hopechen067/MapStage

Installed? Explore more Schreiben & Editieren skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht MapStage?

Nutze diese Fähigkeit beim Erstellen oder Optimieren einer MapStage-Szene: Karten-/Globusprojektion, Satellit, hypsometrische Reliefdarstellung, Mapterhorn-Gelände, Regionsisolierung, CSS-Farbkorrektur und JSON-Export.

Wann verwenden

  • Benötigen Sie einen Live-Tuner für MapStage (Karte vs. Globus, Satellit vs. Relief, Isolierung).
  • Müssen Sie Farbe / CSS / Kamera festlegen und dann JSON in einen anderen Host exportieren.
  • Benötigen Sie gestaffelte Siedlungen (capital / large / medium / small / pass / station / ordos).

Verwenden Sie die Tuner-Seite nicht als endgültige Render-Umgebung.

Modi

ModusZweck
ProduktionsstackBetten Sie MapStage in Ihre App ein: optionales Satelliten-/Raster + Mapterhorn DEM (encoding: 'terrarium') + Bergschattierung + OpenFreeMap-Vektor-Wasser + CSS-Filter + Stadtextrusionen. Steuern Sie das Aussehen über exportiertes JSON.
TunerLokale HTTP-Seite unter tuner/ für Schieberegler, Projektion, Isolierung, Laden/Exportieren von Voreinstellungen.

Arbeitsablauf

  1. Tuner starten: cd tuner && python -m http.server 8765 → http://localhost:8765/
  2. Kacheln: Standard EOX Sentinel-2 wolkenlos + Mapterhorn (tuner/map-tiles.config.js). Überschreiben mit gitignoriertem map-tiles.config.local.js.
  3. Standard-Voreinstellung anwenden tuner/preset-antique-default.json (identisch mit tuner/presets/antique-default.json).
  4. Projektion / Satellit / Relief / Isolierung / CSS / Städte anpassen, bis das Aussehen stimmt.
  5. JSON exportieren aus dem Tuner (kopieren oder herunterladen).
  6. Migrieren Sie Paint + Kamera + CSS-Felder in die MapStage-Produktionsszene (siehe Referenzen).
  7. In der Produktion: jumpTo Kamera; auf idle warten; optional Kacheln vorab cachen. Vermeiden Sie easeTo / flyTo für aufgezeichnete Frames.
  8. Setzen Sie das DEM immer mit encoding: 'terrarium'. Eine falsche Kodierung bricht die Bergschattierung/das Gelände.
  9. Endgültige Frames werden vom Produktionshost gerendert — nicht von der Tuner-Oberfläche.

Harte Regeln

  • Kacheln nicht gebündelt — MapStage ruft DEM und Basiskarte zur Laufzeit nur von konfigurierten URLs ab.
  • Verwenden Sie nur Basiskarten-Endpunkte, die Sie nutzen dürfen — Standard sind öffentliche Demo-Kacheln (EOX); bei Bedarf über Konfiguration austauschen.
  • encoding: 'terrarium' auf der Geländequelle — zwingend erforderlich.
  • Kein easeTo / flyTo in aufgezeichneten Produktionspfaden; stattdessen jumpTo + idle bevorzugen.
  • Hosting der finalen Darstellung nicht auf dem Tuner.
  • Wasser sind die integrierten OpenFreeMap / OpenMapTiles Vektorebenen. Erwarten oder committen Sie keine tuner/assets/water-data.js.

Referenzen

Agents

Siehe agents/openai.yaml für Anzeigename / Standard-Prompt.

Verwandte Skills