Allow the user to print the current viewed map

Refs #88
umap-project · May 3, 2023 · 0e7561b · 0e7561b
1 parent 4251a65
commit 0e7561b
Show file tree

Hide file tree

Showing 5 changed files with 827 additions and 1 deletion.
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
@@ -93,6 +93,39 @@ L.U.UpdatePermsAction = L.U.BaseAction.extend({
 
 });
 
+L.U.PrintAction = L.U.BaseAction.extend({
+
+    options: {
+        className: 'print-map dark',
+        tooltip: L._('Print the current view')
+    },
+
+    addHooks: function () {
+        // dom-to-image creates the image from the map which is then inserted
+        // and opened within a new tab to be able to print it, we close the
+        // window in case the body regain the focus (printing cancelled).
+        domtoimage
+            .toPng(this.map._container)
+            .then(function (dataUrl) {
+                var win = window.open('about:blank', "_new");
+                win.document.open();
+                win.document.write(`
+                    <html>
+                       <body
+                           onload="window.print()"
+                           onafterprint="window.close()"
+                           onfocus="window.close()"
+                           >
+                           <img src="${dataUrl}" style="max-width: 100%;"/>
+                       </body>
+                    </html>
+                `);
+                win.document.close();
+            });
+    }
+
+});
+
 L.U.DrawMarkerAction = L.U.BaseAction.extend({
 
     options: {