From 93c25d4f8258565dde18216d8372aae8c890d653 Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Tue, 23 Apr 2019 10:17:14 +0200
Subject: [PATCH] Export the map viewport instead of the layers

And filter out the controls elements
---
 examples/export-map.js | 10 +++++++++-
 examples/export-pdf.js | 11 ++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/examples/export-map.js b/examples/export-map.js
index 0dba7f3ac7..f402a0fa86 100644
--- a/examples/export-map.js
+++ b/examples/export-map.js
@@ -25,9 +25,17 @@ const map = new Map({
   })
 });
 
+// export options for html-to-image.
+// See: https://github.com/bubkoo/html-to-image#options
+const exportOptions = {
+  filter: function(element) {
+    return element.className.indexOf('ol-control') === -1;
+  }
+};
+
 document.getElementById('export-png').addEventListener('click', function() {
   map.once('rendercomplete', function() {
-    toPng(map.getViewport().querySelector('.ol-layers'))
+    toPng(map.getTargetElement(), exportOptions)
       .then(function(dataURL) {
         const link = document.getElementById('image-download');
         link.href = dataURL;
diff --git a/examples/export-pdf.js b/examples/export-pdf.js
index c99c7419ef..5d9bce45fd 100644
--- a/examples/export-pdf.js
+++ b/examples/export-pdf.js
@@ -43,6 +43,15 @@ const dims = {
   a5: [210, 148]
 };
 
+
+// export options for html-to-image.
+// See: https://github.com/bubkoo/html-to-image#options
+const exportOptions = {
+  filter: function(element) {
+    return element.className.indexOf('ol-control') === -1;
+  }
+};
+
 const exportButton = document.getElementById('export-pdf');
 
 exportButton.addEventListener('click', function() {
@@ -59,7 +68,7 @@ exportButton.addEventListener('click', function() {
   const extent = map.getView().calculateExtent(size);
 
   map.once('rendercomplete', function() {
-    toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) {
+    toJpeg(map.getTargetElement(), exportOptions).then(function(dataUrl) {
       const pdf = new jsPDF('landscape', undefined, format);
       pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
       pdf.save('map.pdf');