MapLibre GL JS + れきちず で多言語対応の歴史地図を実装する
歴史地図サービス「れきちず」が多言語対応（日本語・ひらがな・英語）したことを受けて、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ファイル < < < < ! h h / b / / D t e < < < < < < h o < < < b h O m a m m t s l s / e d d / d s / o t C l d e e i c i t b # . } . } . . } s a y i < < < d i c c } f } l c } m f } f } f } d } w } u s d m T > t t t r n y o m c l l l t d > v b b b i v r o ; u e o ) a u u u o ) i ) p c y l Y l a a l i k l { d a o h d a j g b b a p b b b c f t a a b c b y > u u u v i n ' ' ' n c c r t n c s c z ; p n d } n c u w n i c m u u c b ; n c i } ; d r > > P a e p e y p n e i l u a a o n a o o a u o r n n a o o l c t t t > i p れ s j j e G c o o e 現 地 s o t e o . ボ c o ) U c o r i 言 c f u a p p ボ u t ブ d o f 初 a i E n c n > t h > m t i s i s p c r g d r r c r n a g g c l r e l t t t d t き t a a n E t n n t 在 c 図 t n y n o a タ t c b ; R t n l n 語 t r p d d タ m n ラ o n c m u 期 t p g h a れ r a { { r g p g t : k d - d d d k s t n - - k o d > a o o o = > ち ' - ' T i s s u の u を t l t m d ン i u t L i s . d 切 i ( r . a a ン e . ウ w s ( u a p 状 e t h = a m き s e r o h l n i g e b i e e g o - s b b g r e s n n n " ず S : H : パ o t t r 言 r 初 m a e e : d の o m n を o t s o り o l e s t t の n a ザ . t l r p d 態 B > t " r e ち r f g f w l t a - f 8 r r t n r r r r s i t t r : r s m の T i ラ n n 語 r 期 a i : r C ア n e . 更 n e w 替 n a n e e e ク t d の a a r . a を u m j s = ず c = i o i s : y i y p o - n g : - o : i t n n o - = c c c a ス Y ' r ' メ p l e 化 p n : 1 o ク n c 新 u a . え n t t U B リ . d 戻 d l n e s t 設 t l a e " = " n n d : t - x u b : r u z i : . u w c " l l l p タ L h a h ー g a a S n e S 2 n テ u t l （ u r r h s g L S r u ッ q E る d a g n e e 定 t > " t v 多 " h : t t { 5 e c ; n o { 1 a n p e o h a n h o c a a a " イ E t ' t タ e r n T t = r T [ t ィ p . a 履 p l c i w a t l t ク u v / E n t t B o > = i 言 h t - h 0 f m o d t 8 p d d o : n o c d i l o s s s > ル S t : t か t a g Y L : Y 1 r ブ d q s 歴 d h s i = n y ( t イ e e 進 v g ! L S u n " e 語 t t 0 f : p l s n : t p x i : i : v t : t o n s s s < U p p ら L m L a n L 3 o 状 a u s に a = P t t = g l l o ベ r n む e = a t t s U w 対 t p ; a x e : t o x u n 1 e i e r t = = = / R = s ' s 言 a s = E n e ' E 9 l 態 t e L 追 t a o c = e a n ン y t に n = = n y t ( T p 応 p s m 1 ; x e # m s s w t 4 a r v # ; : r " " " d L : h : 語 n S g w m S . ( を e r i 加 e n r r h = ( n s ト S L 対 t g l o ) F o デ s : p i 0 ; c n f : 1 o : h e p l e 2 o l l l i { / t / を g = p [ a [ 7 n 更 B y s ） U e a y L c S g ( e i 応 L g c e n ; - r モ : a l 0 e t 5 6 l i r x l { 1 # l a a a v / t / 取 F a l = m p c 6 e 新 u S t r w m . a u l T ) ) l s i e u = ( s 8 t < d y % n : f 1 p i 4 t ; ; { 9 2 s n n n > m p m 得 r n r a a ' u 7 w t e . l s p n r a Y ; ; e t s t r S ( " " u d : ; t 5 p x d p e 0 b 6 1 " g g g i s i o e a n g p , r 1 t l t ( U . u g r n L c e t L r l T ) > t u n i e c f x ; x ; . a F 9 > - - - e : e m w m g e l r , m o e o l R s s ( e g E t n e a e a Y ; c i n p n s h r e 5 # ; 2 c 3 6 b b b r / r U s ] t i e a n c g a L e h l n ; S o e n n n n L o t p k g a e ; n ; s c s k ; F t t t u / u r U . L b n 3 p s t g n ( t S a t [ r r e g t g E n l k g : n i t o c ; g 3 n n n n m n l R g ? a r t 5 l ( o l g w ( t n L l A ( r F L ; S t e g . s g e l c r ; " " " e i e ( L e n e L . i ) r e ) i ' a g a a l ' ( r a [ e > . c 0 - h r i ; o . e . ) S t l g g a 6 b A ( n l t ) n n l c ' o n l n c o ; s t ; d u d d d g r g e ( a F l n 8 r { l ' { d a e g g ( l p m g a t o m e : n a a a i u i { a ' n r . g 1 e l a o n ( { ) ] ' i o U ) n = m b r # d t t t t n t r l g o M ] 2 g ( c w g { ) . c p r g " m o i c d : a a a h e h c a m a , ] l ' t . ' } r ; l k s l { ] w m a x f a d - - - u . u h n : U p , . . i l , , e a ' t ( ) i a p - ; l d # l l l b g b P g r ( N l v o t n , a ) ; d p l s c ; e a a a . i . a ' ' l { a a e c l u g t ; t l i i } ( 0 n n n i t i r ) j ( v n ' a a ' r - e h i b z 1 e g g g o h o a ; a ) i g , t n , n b ' = b r i 0 0 = = = / u / m ' ; 東 g - i g ; t , d r e n 0 e " " " r b r s ; 京 a b b o ) u n = e e - g v 0 j j e e . e ( 駅 t t t n ; r ' > v - g : h ; a a n k i k w i n n ) l ) i g l " - " i o i i o ' . ; ) . s c l @ b - } > H > c / c n n ) d ; f w = e @ 4 o 日 i E h r h d デ C . a o i > - 4 . r 5 本 r n i e i o フ o f t r t w . 7 d 0 語 a g z k z w ォ n o a E c { i 7 . e p < " l u i u . ル t r s a h d . 1 r x / > i - c - l ト r E e c L t 1 - ) b ひ s s h s o は o a t h a h d b ; u ら h t i t c 日 l c . ( n , d i o t が < y z y a 本 ( h l b g i s x } t な / l u l t 語 ) ( a t ( i s t ; o < b e - e i , b n n b n t n / u / s / o t g t i m } > b t s t s n ' n = n t m a u t t y t . t = > . i a p t o y l y s o = = d a p l t n l e l e p > = { a l l i o > e / e a - t - i b n s s s r r { c a s b r > / t / c i u s c r e s y s h g r e a e - t l t ) h r t l - g r e r ; t e . e g l e s e ' n l = l . e / e ) t a 1 . c t s t ; L n . j s / t / a g 0 s s s r s n ) " " " t e t g ) > > y e y ) ; < r l t l ; / e e e s l . s _ c = j t e r " s y n i s o l . p t n e j t y ' _ s > l , h o e i n s r ' h a e . e j t s " o n ' , 使い方 HTMLファイルをWebサーバーで配信（ローカルファイルでは動作しません） アクセス例： index.html → 日本語（デフォルト） index.html?lang=en → 英語 index.html?lang=ja-Hira → ひらがな ポイント GETパラメータの取得 ...