[Mapbox]地図を日本語化する

Mapboxが公式に提供するmapbox-gl-languageパッケージでMapboxの地図表記を日本語化する手順を解説します。

地図表示はこちらの記事を参考にしてください。

Tsukurue

[Mapbox]NextjsとMapboxを利用して地図を表示する | Tsukurue Mapbox はデジタル地図の開発プラットフォームで容易に開発ができ、無料枠も多く手軽に導入ができる地図です。今回は、NextjsででMapboxを利用し、地図を表示する方法を解…

本記事のNextjsのバージョンは”13.5.4″、react-map-glを導入済みの前提で進みます。

パッケージの導入

@mapbox/mapbox-gl-languageをインストールします。

$ yarn add @mapbox/mapbox-gl-language

Mapboxの地図を日本語化

layout.tsxにMapProviderを追加します。

MapProviderはマップコンポーネントの外部でマップ操作を可能にするコンテキストです。

'use client'

import * as React from 'react'
import Mapbox2 from '@/components/Mapbox/Mapbox2'
import { MapProvider } from 'react-map-gl'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='ja'>
      <body>
        <MapProvider>
          <Mapbox2 />
        </MapProvider>
      </body>
    </html>
  )
}

useMapでmapインスタンスを取得し、useEffectでmapインスタンスに変更があったタイミングで言語設定をするようにします。

MapboxLanguageのコンストラクターに”ja”を渡すことで日本語表示されます。

import Map, { useMap } from 'react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import MapboxLanguage from '@mapbox/mapbox-gl-language'
import { useEffect } from 'react'

/**
 * Mapbox 地図表示と日本語化
 */
const Mapbox2 = () => {
  const { map } = useMap()

  useEffect(() => {
    if (map) {
      const language = new MapboxLanguage({
        defaultLanguage: 'ja'
      })
      map.addControl(language)
    }
  }, [map])

  return (
    <Map
      id='map'
      initialViewState={{
        longitude: 139.636814,
        latitude: 35.443098,
        zoom: 15
      }}
      style={{ width: '100%', height: '100vh' }}
      mapStyle={'mapbox://styles/xxx/yyy'}
      mapboxAccessToken={"Mapbox Access Token"}
    />
  )
}

export default Mapbox2

デフォルトでは、Mapbox v8 stylesの言語化をサポートしているみたいです。

GitHub

GitHub – mapbox/mapbox-gl-language: Switch language of your Mapbox GL JS style Switch language of your Mapbox GL JS style. Contribute to mapbox/mapbox-gl-language development by creating an account on GitHub.

yarn devで開発環境を実行すると地図が日本語で表示されるようになりました。

Summary

日本語化する時にMapbox GL JSを利用した記事は多かったのですが、react-map-glのものがなくてドキュメント眺めながら調べました。
useMap()で地図インスタンスを取得するため、layout.tsxにはMapProviderが必要になっています。
Nextjsをさわりたての方にとってはつまづくポイントかもしれません。

よかったらシェアしてね！

[Mapbox]地図を日本語化する

パッケージの導入

Mapboxの地図を日本語化

Summary

関連記事