歴史地図サービス「れきちず」が多言語対応（日本語・ひらがな・英語）したことを受けて、MapLibre GL JS で言語切り替えに対応した地図を実装する方法を紹介します。
れきちずとは#
れきちずは、江戸時代後期（1800〜1840年ごろ）の地図を現代風のデザインで閲覧できるWebサービスです。2025年11月に多言語対応が追加され、以下の3つのスタイルが提供されています。
| 言語 | スタイルURL |
|---|
| 日本語 | https://mierune.github.io/rekichizu-style/styles/street/style.json |
| ひらがな | https://mierune.github.io/rekichizu-style/styles/street/style_hira.json |
| 英語 | https://mierune.github.io/rekichizu-style/styles/street/style_en.json |
シンプルなHTML版#
フレームワークを使わず、素のHTML + JavaScriptだけで実装する例です。GETパラメータ（?lang=en）に応じて表示言語を切り替えます。
完全なHTMLファイル#
使い方#
- HTMLファイルをWebサーバーで配信（ローカルファイルでは動作しません）
- アクセス例：
index.html → 日本語（デフォルト）index.html?lang=en → 英語index.html?lang=ja-Hira → ひらがな
ポイント#
GETパラメータの取得
URLの更新（ページ遷移なし）
ブラウザの戻る/進む対応
注意点#
スタイル切り替え時のレイヤー再設定#
map.setStyle() を呼ぶと、追加したソースやレイヤーがすべてリセットされます。そのため、style.load イベントを監視して再設定する必要があります。
データ利用について#
れきちずのタイルデータ・スタイルは CC BY-NC-ND 4.0 の下で利用できます。商用利用の場合は、れきちずの運営（株式会社MIERUNE）にお問い合わせください。
まとめ#
- れきちずは日本語・ひらがな・英語の3つのスタイルを提供
- GETパラメータで言語を指定（
?lang=en） map.setStyle() で動的にスタイルを切り替え- スタイル変更後は
style.load イベントでレイヤーを再設定
歴史地図と多言語対応を組み合わせることで、海外の方にも日本の歴史的な地名や街道を楽しんでもらえるアプリケーションが作れます。
参考リンク#