故事地圖 Story Player

把 .trailpaint.json 變成自動導覽的地圖故事。獨立入口 /app/player/，適合展場、教學、部落格嵌入。

示範影片

核心功能

• Fly-to 動畫：逐個景點飛過去，Leaflet 平滑 pan + zoom
• Popup 展示：景點卡自動開合，顯示照片與說明
• 播放控制：可設定每點停留時間、是否循環、是否自動播放
• 背景音樂：專案內設定 MP3 URL，播放時自動 loop
• 歷史地圖疊加：中研院 1897（台灣堡圖）/ 1921（日治地形圖）/ 1966（經建版）三種老地圖圖磚，疊在現代底圖上
• 全螢幕模式：適合展場、教學投影、電視屏
• 多底圖切換：Voyager、Positron、Dark Matter、OSM Standard、Protomaps

兩種啟動方式

A. 直接開啟 Player

打開 https://trailpaint.org/app/player/，用左上「載入專案」上傳 .trailpaint.json。

B. 從 Editor 切換故事模式

Editor 右下的「故事模式」按鈕切到 Player，同 project state 沿用。

URL 參數

Player 支援以下 query string：

• ?src=<url> — 自動載入指定的 .trailpaint.json（同源或 CORS 允許的外部 URL）
• ?embed=1 — 嵌入模式，隱藏控制列，適合 iframe
• ?autoplay=1 — 自動開始播放
• ?interval=<seconds> — 每點停留時間（預設 3 秒）
• ?loop=1 — 結束後重頭播

iframe 嵌入範例

<iframe
  src="https://trailpaint.org/app/player/?src=https://example.com/my-trail.trailpaint.json&embed=1&autoplay=1&interval=4&loop=1"
  width="100%"
  height="500"
  frameborder="0"
  allow="autoplay">
</iframe>

可直接貼到 WordPress、Notion、Ghost、HackMD（支援 HTML）、教會網站等。

Story Page 故事集合

官方策展的故事集合入口在 /stories/，目前有：

• 台灣宣教士腳蹤 — 馬偕、巴克禮、蘭大衛、布勞姆、馬雅各等五位 19-20 世紀宣教士的宣教路線
• 耶穌受難週 — 從進城、受難、復活三段共 12+ 個聖經地點，搭配古典繪畫（達文西、卡拉瓦喬、林布蘭、Giotto、東正教 icon 等）

故事展示 schema

Story Page 用兩層分離 schema：

• <filename>.trailpaint.json — 地理結構（Editor 產出）
• story.json — 展示 metadata（標題、描述、章節切分、scripture_refs 聖經經文引用）

Editor 不編輯 story.json 欄位，保持一般使用者介面單純。

打開 Story Player 看既有故事