diff --git a/examples/.eslintrc b/examples/.eslintrc index c404b2e6e6..769357d35a 100644 --- a/examples/.eslintrc +++ b/examples/.eslintrc @@ -5,7 +5,6 @@ "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 bc8f1994ac..4ab8686cbb 100644 --- a/examples/export-map.html +++ b/examples/export-map.html @@ -3,11 +3,9 @@ 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 use the dom-to-image-more + Example of exporting a map as a PNG image. This example use the html-to-image library. tags: "export, png, openstreetmap" -resources: - - 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 e57598c26a..0dba7f3ac7 100644 --- a/examples/export-map.js +++ b/examples/export-map.js @@ -4,6 +4,8 @@ import GeoJSON from '../src/ol/format/GeoJSON.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {toPng} from 'html-to-image'; + const map = new Map({ layers: [ new TileLayer({ @@ -25,7 +27,7 @@ const map = new Map({ document.getElementById('export-png').addEventListener('click', function() { map.once('rendercomplete', function() { - domtoimage.toPng(map.getViewport().querySelector('.ol-layers')) + toPng(map.getViewport().querySelector('.ol-layers')) .then(function(dataURL) { const link = document.getElementById('image-download'); link.href = dataURL; diff --git a/examples/export-pdf.html b/examples/export-pdf.html index 00269ff4dc..c335d609a1 100644 --- a/examples/export-pdf.html +++ b/examples/export-pdf.html @@ -7,7 +7,6 @@ docs: > tags: "export, pdf, openstreetmap" resources: - https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js - - https://unpkg.com/dom-to-image-more@2.7.1/dist/dom-to-image-more.min.js ---
diff --git a/examples/export-pdf.js b/examples/export-pdf.js index 1454339e6b..c99c7419ef 100644 --- a/examples/export-pdf.js +++ b/examples/export-pdf.js @@ -4,6 +4,8 @@ import WKT from '../src/ol/format/WKT.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {toJpeg} from 'html-to-image'; + const raster = new TileLayer({ source: new OSM() }); @@ -57,7 +59,7 @@ exportButton.addEventListener('click', function() { const extent = map.getView().calculateExtent(size); map.once('rendercomplete', function() { - domtoimage.toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) { + toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) { const pdf = new jsPDF('landscape', undefined, format); pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]); pdf.save('map.pdf'); diff --git a/package.json b/package.json index 589f420136..9fd1627c64 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "glob": "^7.1.2", "globby": "^9.2.0", "handlebars": "4.1.2", + "html-to-image": "^0.1.0", "istanbul": "0.4.5", "jquery": "3.4.0", "jsdoc": "3.5.5",