mapbox-gl-jsで地図を日本語化する方法【2023】

mapbox-gl-jsで地図を日本語化する方法

ちょっとハマったので共有。

公式ドキュメントにはsetLayoutPropertyで地図の言語を変えられると書いてあるが、こちらは現在日本語は未対応だそう。

日本語にするにはmapbox-gl-languageで実装する必要がある。
https://github.com/mapbox/mapbox-gl-language

①パッケージインストール
npm install --save mapbox-gl @mapbox/mapbox-gl-language

②サンプルコード

import mapboxgl from 'mapbox-gl';
import MapboxLanguage from '@mapbox/mapbox-gl-language';

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v10',
    center: [-77.0259, 38.9010],
    zoom: 9
});

// 言語変更設定
const language = new MapboxLanguage();
map.addControl(language);

この設定をしたら地図が日本語になりました。

対応している地図スタイルはこちら

インスタンス化したものを変数に入れ直している場合はエラーになるかも
https://github.com/mapbox/mapbox-gl-language/issues/37