From 9b759a40c53fc894dbb9e0660e64c37a0c69873d Mon Sep 17 00:00:00 2001
From: viglino <jean-marc.viglino@ign.fr>
Date: Mon, 18 Mar 2024 10:59:50 +0100
Subject: [PATCH] [ADD] PrintDailog2x

---
 .../canvas/map.control.printdialog2x.html     | 144 ++++++++++++++++++
 1 file changed, 144 insertions(+)
 create mode 100644 examples/canvas/map.control.printdialog2x.html
diff --git a/examples/canvas/map.control.printdialog2x.html b/examples/canvas/map.control.printdialog2x.html
new file mode 100644
index 00000000..444bd48e
--- /dev/null
+++ b/examples/canvas/map.control.printdialog2x.html
@@ -0,0 +1,144 @@
+﻿<!DOCTYPE html>
+<html>
+<head>
+<!--
+  Copyright (c) 2019 Jean-Marc VIGLINO, 
+  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
+-->
+  <title>ol-ext: Print dialog</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+	<meta name="description" content="Print control for Openlayers" />
+	<meta name="keywords" content="openlayers, control, print, canvas" />
+
+  <meta name="msapplication-tap-highlight" content="no" />
+  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
+
+  <link rel="stylesheet" href="../style.css" />
+
+  <!-- jQuery -->
+  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
+
+  <!-- Openlayers -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
+  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
+
+  <!-- ol-ext -->
+  <link rel="stylesheet" href="../../dist/ol-ext.css" />
+  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
+  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
+  <script src="https://unpkg.com/elm-pep"></script>
+
+  <!-- https://github.com/MrRio/jsPDF -->
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
+  <!-- filesaver-js -->
+  <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>
+
+  <style>
+    #map,
+    #map2 {
+      width:50%; 
+      height:calc(100vh - 10em);
+      display: inline-block;
+      margin: 0;
+    }
+  </style>
+</head>
+<body >
+  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
+
+  <a href="../../index.html">
+    <h1>ol-ext: print dialog</h1>
+  </a>
+  <div class="info">
+    The <b>ol/control/PrintDialog</b> is dialog to format the map for printing or exporting.
+    <br/>
+    It can handle <a href="../canvas/map.canvas.control.html">canvas controls</a> and 
+    <a href="../legend/map.control.legend.html">legend control</a> customisation on print.
+    <br/>
+    See <a href="map.control.printdialog.fr.html">internationalization example</a>...
+    <br/>
+    Use <a href="https://github.com/eligrey/FileSaver.js/">eligrey/FileSaver</a> 
+    or <a href="https://github.com/MrRio/jsPDF">MrRio/jsPDF</a>
+    to save resulting image on print.
+  </div>
+
+  <!-- Map div -->
+  <div id="map"></div><div id="map2"></div>
+
+  <script type="text/javascript">
+
+// The map
+var map = new ol.Map({
+  target: 'map',
+  view: new ol.View ({
+    zoom: 5,
+    center: [266812, 5960201]
+  }),
+  controls: ol.control.defaults.defaults({ "attribution": false }),
+  layers: [
+    new ol.layer.Geoportail({layer: 'ORTHOIMAGERY.ORTHOPHOTOS' }),
+    new ol.layer.Geoportail({layer: 'GEOGRAPHICALNAMES.NAMES' }),
+  ]
+});
+map.addControl(new ol.control.CanvasAttribution({ canvas: true }));
+
+var map2 = new ol.Map({
+  target: 'map2',
+  view: new ol.View ({
+    zoom: 5,
+    center: [266812, 5960201]
+  }),
+  controls: ol.control.defaults.defaults({ "attribution": false }),
+  layers: [
+    new ol.layer.Geoportail({ layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' }),
+  ]
+});
+map2.addControl(new ol.control.CanvasAttribution({ canvas: true }));
+
+// Synchronize the maps 
+map.addInteraction( new ol.interaction.Synchronize({ maps: [map2] }) );
+map2.addInteraction( new ol.interaction.Synchronize({ maps: [map] }) );
+
+// Print control
+var printControl = new ol.control.PrintDialog2x({ 
+  // target: document.querySelector('.info'),
+  // targetDialog: map.getTargetElement() 
+  // save: false,
+  // copy: false,
+  // pdf: false
+});
+printControl.setSize('A4');
+map.addControl(printControl);
+printControl.setMap2(map2)
+
+/* On print > save image file */
+printControl.on(['print', 'error'], function(e) {
+  // Print success
+  if (e.image) {
+    if (e.pdf) {
+      // Export pdf using the print info
+      var pdf = new jsPDF({
+        orientation: e.print.orientation,
+        unit: e.print.unit,
+        format: e.print.size
+      });
+      pdf.addImage(e.image, 'JPEG', e.print.position[0], e.print.position[0], e.print.imageWidth, e.print.imageHeight);
+      pdf.save(e.print.legend ? 'legend.pdf' : 'map.pdf');
+    } else  {
+      // Save image as file
+      e.canvas.toBlob(function(blob) {
+        var name = (e.print.legend ? 'legend.' : 'map.')+e.imageType.replace('image/','');
+        saveAs(blob, name);
+      }, e.imageType, e.quality);
+    }
+  } else {
+    console.warn('No canvas to export');
+  }
+});
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
