Zenn
🗺️

mapbox-gl.jsで地図スタイルデータの読み込み終了イベント

2023/02/27に公開
JavaScript
GIS
Mapbox
tech

やりたかったこと

mapbox-gl.jsで読み込んだ地図スタイルを、あとから変更したい場合、スタイル読み込み終了イベントを活用したいと思います。そのイベントの発火タイミングが思ってたのと違ったので（個人的な思い込みかもですが）メモ兼ねて共有します。印刷用ボタン押下時を想定ください。

検証した環境

  • mapbox-gl.jsのヴァージョン: v2.7.0

間違った書き方

document.querySelector('#printBtn').addEventListener('click', () => {
    mapObject.setStyle(ANOTHER_MAP_STYLE);
    mapObject.on('data', () => {
	    window.print();
    });
});

こう書けばよかった

document.querySelector('#printBtn').addEventListener('click', () => {
    mapObject.setStyle(ANOTHER_MAP_STYLE);
    mapObject.on('data', (e) => {
        if (e.isSourceLoaded == true) {
            window.print();
        } else {
        }
    });
});

追加でひとこと

イベントのタイプが、"data"、"styledata"のどちらでも同じイベント関数を使っているようですが、イベントのタイプ "data" で上手くいきました。"styledata"だとそもそも発火しないようでした。

Discussion