「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の方が使いやすいかも。