Mapbox-glで地図を画像にする際に注意すべき点

はじめに

mapbox-glで表示した地図を印刷用に画像ファイルにする必要がありました

let image = map.getCanvas().toDataURL();

上記コードでcanvasからdataurlを取得できるかと思いました
が、結果は失敗 。。。
白紙の画像が出来ただけでした

preserveDrawingBuffer

地図初期化時にpreserveDrawingBuffer:trueを指定すれば正常に画像が作成されます
公式サイトの一番簡単な例を編集し、下記のようにします

Display a map | Mapbox GL JS | Mapbox

mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
    preserveDrawingBuffer: true // <--これを追加
});