Mapbox GL JS）トークン取得と地点名の日本語表記。

「Yahoo! JavaScriptマップAPI」が、2020年10月31日にサービス提供を終了する。

代替サービスとして「Mapbox」が紹介されているので、「Mapbox GL JS」を使ってみた。

以下、参考ドキュメント。

≪Tutorials | Help | Mapbox≫

https://docs.mapbox.com/help/tutorials/

≪Create a custom style | Help | Mapbox≫

https://docs.mapbox.com/help/tutorials/create-a-custom-style/

≪Publish your style | Mapbox Studio manual | Mapbox≫

https://docs.mapbox.com/studio-manual/overview/publish-your-style/

■ アカウント作成

最初に、Mapboxのアカウントを「Sign up」で作成する。

https://account.mapbox.com/auth/signup/

Google Cloud Platformと違って、クレジットカード情報の登録は不要。

■ アクセストークン取得

「Mapbox GL JS」を使うには「access token」が必要。Mapboxアカウントを作成すると自動でひとつ作られる「Default public token」を使う。

https://account.mapbox.com/access-tokens/

<script>
mapboxgl.accessToken = 'アクセストークン';
</script>

■ 地点名の日本語表記

通常の設定では地図の地点名が日本語表記されない。日本語表記のスタイルに切り換える必要がある。

「スタイル」ページに移動。

https://studio.mapbox.com/styles

「スタイル」ページから「Find inspiration in the style gallery」へ移動。

https://www.mapbox.com/gallery/

「Mapbox Streets Japan」を選択。

「Add Mapbox Streets Japan to your account」する。

https://www.mapbox.com/gallery/#mapbox-streets%20japan

自分のアカウントに追加されたスタイルの「Style URL（mapbox://styles/xxx/xxxxxx）」を使う。

mapboxgl.Mapで、styleに指定する。

<script>
var map = new mapboxgl.Map({
	container: 'map',
//	style: 'mapbox://styles/mapbox/streets-v11', //英語表記のスタイル
	style: 'mapbox://styles/xxx/xxxx',
	center: [lng, lat],
	zoom: 14
});
<script>

↓↓↓ 続き（現在地表示、マーカー表示、地点検索、ルート検索）。

【後日追記】MapboxよりLeafletの方が使いやすいかも。