SHJTX — Metro Viewer

Live demo: https://macos-node.github.io/shjtx-viewer/

Repo: https://github.com/macos-node/shjtx-viewer

An interactive stylised map of the Shanghai metro system as of 2016, with a comparison layer for lines and stations added since. Recreated from the original SHJTX iPad app (Adobe Flash / AIR, 2016) — all vector data authored from the original artwork; overlay data adapted from public sources.

Live app

Open viewer/index.html — but browsers block file:// fetches, so serve it locally:

cd SHJTX-pwa
python3 -m http.server 8000
# then open http://localhost:8000/viewer/

Or deploy to any static host (GitHub Pages, Netlify, Cloudflare Pages).

Features

• Pan (drag), zoom (wheel, slider, +/− buttons, double-click, pinch), all with smooth animated transitions
• Search stations by Chinese, English, or Pinyin — jumps to the station and pulses a highlight
• Hover any station, transfer cluster, airport, or park for a tooltip
• Click for a detailed info panel with line pills
• Comparison toggle: 2016 baseline / new since 2016 / current
• Historical stations (closed/renamed) can be marked via viewer/historical.json
• All layers are addressable in the SVG (#districts, #water, #metro, #features, #labels, #metro-new) — future features can hook in without touching the base

Project layout

SHJTX-pwa/
├── viewer/                       ← THE LIVE APP
│   ├── index.html
│   ├── style.css
│   ├── app.js
│   ├── data.json                 comparison data (2016 baseline + additions)
│   └── historical.json           list of closed/renamed stations
│
├── baseline/
│   └── districts.svg             ← THE CANONICAL MAP (edit this in Inkscape/Illustrator)
│   └── districts_*.svg           historical snapshots (rollback safety)
│
└── (legacy top-level files)      earlier experimental comparison-PWA — kept for history

Editing the map

Open baseline/districts.svg in Inkscape or any vector editor. Every element has a stable id and data-* attributes:

• Districts: <path id="district-{slug}" data-cn="…" data-en="…" data-source="…">
• Water: <g id="water"> with <path id="water-sea"> and <path id="water-inland">
• Metro lines: <path data-line="N"> inside <g id="metro-lines">
• Stations: <circle data-cn="…" data-en="…" data-pinyin="…" data-line="N">
• Transfer clusters: <g data-station="…" data-en="…" data-pinyin="…" data-transfer="N">

After edits, save; the viewer picks up changes on next reload.

Deploying

• Static hosting — copy the whole folder to GitHub Pages / Netlify / etc.
• Desktop app — wrap with Tauri (~5 MB binary) or Electron
• Android/iOS — wrap with Capacitor
• PWA — the deprecated top-level index.html + sw.js + manifest.json contain the scaffolding for a Progressive Web App; adapt for the new viewer if desired

Data sources

• Map artwork: originally authored by the project owner in Adobe Flash Pro (2014–2016), extracted from the source .xfl files
• Metro line/station positions: derived from lat/lng-anchored fit using the SHMetro dataset (2016 baseline) and generate-china-subways-geojson (2020 additions)
• Transfer station line memberships: parsed from the original artwork's authored text labels

License

Personal / non-commercial. Map artwork is the author's original work.