diff --git a/examples/.eslintrc b/examples/.eslintrc index 1e245fa6b6..3e68618adf 100644 --- a/examples/.eslintrc +++ b/examples/.eslintrc @@ -5,6 +5,7 @@ "common": false, "createMapboxStreetsV6Style": false, "d3": false, + "domtoimage": false, "geojsonvt": false, "GyroNorm": false, "jsPDF": false, diff --git a/examples/export-map.html b/examples/export-map.html index f3f620da59..bc8f1994ac 100644 --- a/examples/export-map.html +++ b/examples/export-map.html @@ -3,12 +3,12 @@ layout: example.html title: Map Export shortdesc: Example of exporting a map as a PNG image. docs: > - Example of exporting a map as a PNG image. This example requires a browser - that supports - canvas.toBlob(). + Example of exporting a map as a PNG image. This example use the dom-to-image-more + library. tags: "export, png, openstreetmap" resources: - - https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js + - https://unpkg.com/dom-to-image-more@2.7.1/dist/dom-to-image-more.min.js ---
Download PNG + diff --git a/examples/export-map.js b/examples/export-map.js index 0b002cae7f..8a89def4a6 100644 --- a/examples/export-map.js +++ b/examples/export-map.js @@ -24,15 +24,13 @@ const map = new Map({ }); document.getElementById('export-png').addEventListener('click', function() { - map.once('rendercomplete', function(event) { - const canvas = event.context.canvas; - if (navigator.msSaveBlob) { - navigator.msSaveBlob(canvas.msToBlob(), 'map.png'); - } else { - canvas.toBlob(function(blob) { - saveAs(blob, 'map.png'); + map.once('rendercomplete', function() { + domtoimage.toPng(map.getViewport()) + .then(function(dataURL) { + const link = document.getElementById('image-download'); + link.href = dataURL; + link.click(); }); - } }); map.renderSync(); });