Use dom-to-image-more library in export-map

examples/.eslintrc

@@ -5,6 +5,7 @@
     "common": false,
     "createMapboxStreetsV6Style": false,
     "d3": false,
+    "domtoimage": false,
     "geojsonvt": false,
     "GyroNorm": false,
     "jsPDF": false,

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
+  Example of exporting a map as a PNG image. This example use the <a href="https://www.npmjs.com/package/dom-to-image-more">dom-to-image-more</a>
-  that supports <a href="https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toBlob#Browser_compatibility">
+  library.
-  <code>canvas.toBlob()</code></a>.
 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
 ---
 <div id="map" class="map"></div>
 <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
+<a id="image-download" download="map.png"></a>

examples/export-map.js

@@ -24,15 +24,13 @@ const map = new Map({
 });
 
 document.getElementById('export-png').addEventListener('click', function() {
-  map.once('rendercomplete', function(event) {
+  map.once('rendercomplete', function() {
-    const canvas = event.context.canvas;
+    domtoimage.toPng(map.getViewport())
-    if (navigator.msSaveBlob) {
+      .then(function(dataURL) {
-      navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
+        const link = document.getElementById('image-download');
-    } else {
+        link.href = dataURL;
-      canvas.toBlob(function(blob) {
+        link.click();
-        saveAs(blob, 'map.png');
       });
-    }
   });
   map.renderSync();
 });