JAPAN PREFECTURE MAP

BROWSER RUNTIME

即時更新的制縣元件。

這個頁面載入真正的 <japan-prefecture-map>。切換資料、地圖語言或主題後，Custom Element 會在瀏覽器內立刻重新輸出 Shadow DOM，不需要重新建置頁面。

直接操作元件 比較零 JavaScript 輸出

這是一個真正的 Custom Element

levels · locale · theme

<japan-prefecture-map>

這不是截圖或字串輸出。下方 controls 會直接設定 element.levels、element.locale 與 element.theme。

和 Static HTML 的分工

同一資料模型，兩條不同的呈現路徑

Web Component

需要瀏覽器 module

適合篩選器、使用者互動、即時切換地圖語言或主題。用屬性或 JavaScript property 更新，不必重建或替換 host element。

Static HTML renderer

沒有 client runtime

適合 SEO、SSG 與內容頁。HTML 在建置時固定輸出；互動僅使用原生元素，例如 <details>。

查看 Static HTML demo

最小嵌入與更新方式

載入一次 module，之後更新 element 屬性

HTML + module 最小可用的 Web Component 嵌入。

這條路徑把顯示邏輯留在瀏覽器。套件註冊 Custom Element 後，HTML 內的地圖就會自行 render。

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>

<japan-prefecture-map
  locale="zh-TW"
  theme="auto"
  levels='{"13": 3, "27": 4}'
></japan-prefecture-map>
element.levels = nextLevels 不重載頁面，直接更新資料、地圖語言或主題。

這正是上方 controls 使用的介面。設定 property 後元件會重新 render 自己的 Shadow DOM。

const map = document.querySelector('japan-prefecture-map');

map.levels = { '13': 4, '27': 5 };
map.locale = 'ja';
map.theme = 'dark';

外觀客製

公開 token 與 part，不碰 Shadow DOM 內部 class

--jpm-* + ::part() 將 token 設在 element 本身，並只選取公開區塊。

Web Component 自帶 Shadow DOM 與完整 CSS。外部無法選取 .jpm-*；用 token 改配色，用 ::part() 調整已承諾的版面區塊。

japan-prefecture-map {
  --jpm-accent: #58c9a2;
  --jpm-level-4: #2a8f70;
  --jpm-level-5: #17684e;
  --jpm-map-glow: none;
}

japan-prefecture-map::part(summary) {
  padding-block: 2rem 1rem;
}

japan-prefecture-map::part(widget) {
  border-radius: 1.5rem;
}

不要再插入 mapStyles、legendStyles 或 widgetStyles。完整 token 與 part 對照見 Styling guide。

READY TO BUILD?

用自己的旅行資料開始

你已確認需要 browser runtime。回到 Editor 後可設定全部 47 縣，並直接取得這條互動式整合路徑的程式碼。

用互動路徑建立地圖 改看 Static HTML