Add image control to download and print map #202

paul121 · 2024-07-12T20:33:11Z

Adds an image control (naming?) that allows the user to download an image of the current map view or, using printjs, opens a print dialog with the map.

I implemented this as a OL Control and wrapped it with a behavior (similar to snapping grid). It won't be added to maps by default unless the behavior is explicitly added.

paul121 · 2024-07-12T20:37:53Z

First, click the "Capture image" button. Then the "Download" and "Print" buttons will appear. The download is a link like: <a href={data url} download/> and the print button will open print dialog. If the map is clicked, moved or changed then the "Download" and "Print" buttons are hidden again, and the "Capture image" button must be clicked again.

symbioquine

This is a good start! Thanks for working on this @paul121

examples/simple-html-consumer/static/index.html

symbioquine · 2024-07-13T13:40:43Z

src/control/Image/Image.js

+    // Create the image button element.
+    const className = options.className || 'ol-image';
+    const button = document.createElement('button');
+    button.innerHTML = options.label || '<svg id="Layer_1" style="enable-background:new 0 0 30 30;" version="1.1" viewBox="0 0 30 30" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M6,19V17c0-0.552-0.448-1-1-1H5c-0.552,0-1,0.448-1,1V19c0,0.552,0.448,1,1,1H5C5.552,20,6,19.552,6,19z"/><path d="M10,5L10,5c0,0.553,0.448,1,1,1H13c0.552,0,1-0.448,1-1V5c0-0.552-0.448-1-1-1H11C10.448,4,10,4.448,10,5z"/><path d="M5,14L5,14c0.553,0,1-0.448,1-1V11c0-0.552-0.448-1-1-1H5c-0.552,0-1,0.448-1,1V13C4,13.552,4.448,14,5,14z"/><path d="M23,6h1l0,1c0,0.552,0.448,1,1,1h0c0.552,0,1-0.448,1-1V6c0-1.105-0.895-2-2-2h-1c-0.552,0-1,0.448-1,1v0   C22,5.552,22.448,6,23,6z"/><path d="M16,5L16,5c0,0.552,0.448,1,1,1h2c0.552,0,1-0.448,1-1v0c0-0.552-0.448-1-1-1h-2C16.448,4,16,4.448,16,5z"/><path d="M7,24H6v-1c0-0.552-0.448-1-1-1H5c-0.552,0-1,0.448-1,1v1c0,1.105,0.895,2,2,2h1c0.552,0,1-0.448,1-1V25   C8,24.448,7.552,24,7,24z"/><path d="M6,7V6h1c0.552,0,1-0.448,1-1V5c0-0.552-0.448-1-1-1H6C4.895,4,4,4.895,4,6v1c0,0.552,0.448,1,1,1H5C5.552,8,6,7.552,6,7z"/><path d="M24,11l0,2.001c0,0.552,0.448,1,1,1h0c0.552,0,1-0.448,1-1V11c0-0.552-0.448-1-1-1h0C24.448,10,24,10.448,24,11z"/></g><g><path d="M25,16h-1.764c-0.758,0-1.45-0.428-1.789-1.106l-0.171-0.342C21.107,14.214,20.761,14,20.382,14h-4.764   c-0.379,0-0.725,0.214-0.894,0.553l-0.171,0.342C14.214,15.572,13.521,16,12.764,16H11c-0.552,0-1,0.448-1,1v8c0,0.552,0.448,1,1,1   h14c0.552,0,1-0.448,1-1v-8C26,16.448,25.552,16,25,16z M18,25c-2.209,0-4-1.791-4-4c0-2.209,1.791-4,4-4s4,1.791,4,4   C22,23.209,20.209,25,18,25z"/><circle cx="18" cy="21" r="2"/></g></svg>';


Can you try applying my minification/standardization process to this SVG? #179 (comment)

symbioquine · 2024-07-13T13:40:55Z

src/control/Image/Image.js

+
+    // Create a print button.
+    const print = document.createElement('button');
+    print.innerHTML = '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title/><g><path d="M359,184H147a15,15,0,0,1-15-15V63a15,15,0,0,1,15-15H359a15,15,0,0,1,15,15V169A15,15,0,0,1,359,184ZM162,154H344V78H162Z"/><path d="M359,450H147a15,15,0,0,1-15-15V272.09a15,15,0,0,1,15-15H359a15,15,0,0,1,15,15V435A15,15,0,0,1,359,450ZM162,420H344V287.09H162Z"/><path d="M407.25,379H359a15,15,0,0,1,0-30h48.25a18.9,18.9,0,0,0,18.88-18.88V202.89A18.9,18.9,0,0,0,407.25,184H98.75a18.9,18.9,0,0,0-18.88,18.89V330.12A18.9,18.9,0,0,0,98.75,349H147a15,15,0,0,1,0,30H98.75a48.94,48.94,0,0,1-48.88-48.88V202.89A48.94,48.94,0,0,1,98.75,154h308.5a48.94,48.94,0,0,1,48.88,48.89V330.12A48.94,48.94,0,0,1,407.25,379Z"/><path d="M131,236a14.66,14.66,0,0,1-1.48-.07c-.48-.05-1-.13-1.45-.22s-1-.22-1.43-.36-.93-.31-1.38-.5-.89-.4-1.32-.63a12.45,12.45,0,0,1-1.27-.75c-.4-.27-.8-.56-1.18-.87s-.75-.65-1.1-1-.68-.72-1-1.1a14.34,14.34,0,0,1-.87-1.18q-.41-.62-.75-1.26c-.23-.43-.44-.88-.63-1.33s-.35-.92-.5-1.38-.26-1-.36-1.43-.17-1-.22-1.45a15.68,15.68,0,0,1,0-3c.05-.48.13-1,.22-1.45s.22-1,.36-1.43.31-.93.5-1.38.4-.9.63-1.33.48-.85.75-1.26a14.34,14.34,0,0,1,.87-1.18c.31-.38.65-.75,1-1.1s.72-.68,1.1-1,.78-.6,1.18-.87a12.45,12.45,0,0,1,1.27-.75q.65-.34,1.32-.63c.45-.19.92-.35,1.38-.5s1-.26,1.43-.36,1-.17,1.45-.22a16.15,16.15,0,0,1,2.95,0c.49.05,1,.13,1.46.22s1,.22,1.42.36.94.31,1.39.5.89.4,1.32.63a13.63,13.63,0,0,1,1.27.75c.4.27.8.56,1.18.87s.75.65,1.1,1,.67.72,1,1.1.6.78.87,1.18.52.83.75,1.26.44.88.63,1.33.35.92.5,1.38.26,1,.36,1.43.17,1,.22,1.45a15.68,15.68,0,0,1,0,3c-.05.48-.13,1-.22,1.45s-.22,1-.36,1.43-.31.93-.5,1.38-.4.9-.63,1.33-.48.85-.75,1.26-.57.8-.87,1.18-.65.75-1,1.1-.72.68-1.1,1-.78.6-1.18.87a13.63,13.63,0,0,1-1.27.75q-.65.34-1.32.63c-.45.19-.92.35-1.39.5s-.94.26-1.42.36-1,.17-1.46.22A14.46,14.46,0,0,1,131,236Z"/><path d="M175,236c-.49,0-1,0-1.48-.07s-1-.13-1.45-.22-1-.22-1.43-.36-.93-.31-1.38-.5-.9-.4-1.33-.63-.85-.48-1.26-.75a14.34,14.34,0,0,1-1.18-.87c-.38-.31-.75-.65-1.1-1s-.68-.72-1-1.1-.6-.78-.87-1.18a14.69,14.69,0,0,1-.76-1.27c-.22-.43-.43-.87-.62-1.32s-.35-.92-.5-1.38-.26-1-.36-1.43-.17-1-.22-1.45a15.68,15.68,0,0,1,0-3c.05-.48.13-1,.22-1.45s.22-1,.36-1.43.31-.93.5-1.38.4-.89.62-1.32a14.69,14.69,0,0,1,.76-1.27c.27-.4.56-.8.87-1.18s.65-.75,1-1.1.72-.68,1.1-1a14.34,14.34,0,0,1,1.18-.87q.62-.41,1.26-.75c.43-.23.88-.44,1.33-.63s.92-.35,1.38-.5,1-.26,1.43-.36,1-.17,1.45-.22a16.26,16.26,0,0,1,3,0c.48.05,1,.13,1.45.22s1,.22,1.43.36.93.31,1.38.5.89.4,1.32.63.86.48,1.27.75.8.56,1.18.87.75.65,1.1,1,.67.72,1,1.1.6.78.87,1.18a14.6,14.6,0,0,1,.75,1.27q.34.65.63,1.32c.19.45.35.92.5,1.38s.26,1,.36,1.43.17,1,.22,1.45a15.68,15.68,0,0,1,0,3c-.05.48-.13,1-.22,1.45s-.22,1-.36,1.43-.31.93-.5,1.38-.4.89-.63,1.32a14.6,14.6,0,0,1-.75,1.27c-.27.4-.57.8-.87,1.18s-.65.75-1,1.1-.72.68-1.1,1-.78.6-1.18.87-.84.52-1.27.75-.87.44-1.32.63-.92.35-1.38.5-1,.26-1.43.36-1,.17-1.45.22S175.49,236,175,236Z"/><path d="M312,344H194a15,15,0,0,1,0-30H312a15,15,0,0,1,0,30Z"/><path d="M312,397H194a15,15,0,0,1,0-30H312a15,15,0,0,1,0,30Z"/></g></svg>';


Same for this one.

src/control/Image/Image.js

mstenta

This will be a great option! Thanks for working on it @paul121!

Great feedback @symbioquine. I don't have anything to add at this point.

paul121 · 2024-07-18T18:14:39Z

src/control/Snapshot/Snapshot.js

+    // Draw each canvas from this map into the new canvas.
+    // Logic for transforming and drawing canvases derived from ol export-pdf example.
+    // https://github.com/openlayers/openlayers/blob/6f2ca3b9635f273f6fbddab834bd9126c7d48964/examples/export-pdf.js#L61-L85
+    Array.from(this.getMap().getTargetElement().querySelectorAll('.ol-layer canvas'))
+      .filter(canvas => canvas.width > 0)
+      .forEach((canvas) => {
+        const { opacity } = canvas.parentNode.style;
+        outputContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
+
+        // Get the transform parameters from the style's transform matrix.
+        // This is necessary so that vectors align with raster layers.
+        const { transform } = canvas.style;
+        const matrix = transform
+          .match(/^matrix\(([^(]*)\)$/)[1]
+          .split(',')
+          .map(Number);
+
+        // Apply the transform to the export map context.
+        CanvasRenderingContext2D.prototype.setTransform.apply(
+          outputContext,
+          matrix,
+        );
+        outputContext.drawImage(canvas, 0, 0);
+      });


What do you think about this @symbioquine ? Implementing the transform + draw logic in a more declarative way. Also linked to the reference - I was torn because as a whole the example is overly complex and we only need this portion - but still good to reference 👍

paul121 · 2024-07-18T18:17:13Z

Yes - thanks for the great feedback @symbioquine ! I renamed to "Snapshot" and have implemented the code changes you requested.

Still remaining is to simplify the SVG, I'll need to download the program and go through the steps but agree we should do this.

paul121 · 2024-12-12T19:57:23Z

Hey @symbioquine how do these SVGs look now? I was able to transform/optimize to 24x24 with https://www.svgviewer.dev/ before optimizing again in SVGOMG (maybe not necessary) and it seemed to work well.

symbioquine · 2024-12-14T15:54:10Z

src/control/Snapshot/Snapshot.js

+
+    // Create a print button.
+    const print = document.createElement('button');
+    print.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M16.828 8.625H6.891a.703.703 0 0 1-.703-.703V2.953a.703.703 0 0 1 .703-.703h9.938a.703.703 0 0 1 .703.703v4.969a.703.703 0 0 1-.703.703M7.595 7.219h8.531V3.656H7.594Zm9.233 13.875H6.891a.703.703 0 0 1-.703-.703v-7.637a.703.703 0 0 1 .703-.703h9.938a.703.703 0 0 1 .703.703v7.637a.703.703 0 0 1-.703.703m-9.234-1.406h8.531v-6.231H7.594Z"/><path d="M19.09 17.766h-2.262a.703.703 0 0 1 0-1.406h2.262a.886.886 0 0 0 .885-.885V9.51a.886.886 0 0 0-.885-.885H4.629a.886.886 0 0 0-.885.885v5.964a.886.886 0 0 0 .885.885h2.262a.703.703 0 0 1 0 1.406H4.629a2.294 2.294 0 0 1-2.291-2.291V9.51a2.294 2.294 0 0 1 2.291-2.291H19.09a2.294 2.294 0 0 1 2.291 2.292v5.964a2.294 2.294 0 0 1-2.291 2.291"/><path d="m6.141 11.063-.069-.003a1 1 0 0 1-.135-.027l-.065-.023-.062-.03-.06-.035q-.029-.019-.055-.041a.7.7 0 0 1-.099-.099l-.041-.055q-.019-.029-.035-.059a1 1 0 0 1-.053-.127c-.007-.022-.012-.047-.017-.067s-.008-.047-.01-.068a1 1 0 0 1 0-.141 1 1 0 0 1 .027-.135l.023-.065q.013-.032.03-.062c.017-.03.022-.04.035-.059l.041-.055a1 1 0 0 1 .099-.099q.027-.022.055-.041l.06-.035q.03-.016.062-.03t.065-.023c.033-.01.047-.012.067-.017s.047-.008.068-.01a1 1 0 0 1 .138 0 .7.7 0 0 1 .135.027l.065.023.062.03.06.035q.029.019.055.041c.026.022.035.03.052.047s.031.034.047.052.028.037.041.055.024.039.035.059.021.041.03.062.016.043.023.065.012.047.017.067.008.047.01.068a1 1 0 0 1 0 .141 1 1 0 0 1-.027.135l-.023.065q-.013.032-.03.062c-.017.03-.022.04-.035.059a.8.8 0 0 1-.14.154q-.027.022-.055.041l-.06.035q-.03.016-.062.03t-.065.023c-.033.01-.044.012-.067.017s-.047.008-.068.01zm2.062 0q-.035 0-.069-.003c-.034-.003-.047-.006-.068-.01s-.047-.01-.067-.017l-.065-.023q-.032-.013-.062-.03c-.03-.017-.04-.022-.059-.035l-.055-.041a1 1 0 0 1-.099-.099q-.022-.027-.041-.055l-.036-.06-.029-.062q-.013-.032-.023-.065c-.01-.033-.012-.047-.017-.067s-.008-.047-.01-.068a1 1 0 0 1 0-.141 1 1 0 0 1 .027-.135l.023-.065q.013-.032.029-.062l.036-.06q.019-.029.041-.055a.7.7 0 0 1 .099-.099l.055-.041q.029-.019.059-.035a1 1 0 0 1 .127-.053c.022-.007.047-.012.067-.017s.047-.008.068-.01a1 1 0 0 1 .141 0 1 1 0 0 1 .135.027l.065.023q.032.013.062.03c.03.017.04.022.06.035s.038.026.055.041.035.03.052.047.031.034.047.052.028.037.041.055l.035.06q.016.03.03.062t.023.065c.01.033.012.047.017.067s.008.047.01.068a1 1 0 0 1 0 .141 1 1 0 0 1-.027.135l-.023.065-.03.062-.035.06a.8.8 0 0 1-.14.154q-.027.022-.055.041c-.028.019-.039.024-.06.035a1 1 0 0 1-.127.053c-.022.007-.047.012-.067.017a.5.5 0 0 1-.139.013m6.421 5.062H9.094a.703.703 0 0 1 0-1.406h5.531a.703.703 0 0 1 0 1.406m0 2.484H9.094a.703.703 0 0 1 0-1.406h5.531a.703.703 0 0 1 0 1.406"/></svg>';


Did you do the Inkscape part of my procedure? I was able to get it down to closer to 1.8KB instead of ~2.7KB like it is here...

Sorry, I should have mentioned that. I did not. I had trouble getting the extensions to work, I believe due to how I installed Inkscape with Flatpak. I just had limited time and found that https://www.svgviewer.dev/ could also resize and merge paths/groups.

Do you know, was most of this decrease in size from the transform extension?

paul121 added 3 commits July 12, 2024 13:26

Add image control and behavior

ffae237

Add button to print map

2cfba21

Add changelog

87f1c13

paul121 requested review from symbioquine and mstenta July 12, 2024 20:34

paul121 added 2 commits July 12, 2024 13:40

Remove the canvas element after generating data url

fc4f2fc

Set image download title to document title

c5ba759

paul121 mentioned this pull request Jul 12, 2024

Mapping: Print maps from viewer Rothamsted-Ecoinformatics/farm_rothamsted#669

Open

symbioquine requested changes Jul 13, 2024

View reviewed changes

mstenta reviewed Jul 15, 2024

View reviewed changes

paul121 added 4 commits July 18, 2024 11:07

Rename behavior and control to snapshot

47ef5ca

Fix movestart event

77f575a

Make canvas transformation and drawing more declarative

6b71469

Rename output canvas

8191595

paul121 commented Jul 18, 2024

View reviewed changes

paul121 added 3 commits December 12, 2024 11:36

Minify snapshot svg

bbed4c9

Minify print svg

408c9c1

Standardize download link

7c9d963

paul121 requested a review from symbioquine December 12, 2024 19:57

symbioquine reviewed Dec 14, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add image control to download and print map #202

Add image control to download and print map #202

paul121 commented Jul 12, 2024

paul121 commented Jul 12, 2024

symbioquine left a comment

symbioquine Jul 13, 2024

symbioquine Jul 13, 2024

mstenta left a comment

paul121 Jul 18, 2024

paul121 commented Jul 18, 2024

paul121 commented Dec 12, 2024

symbioquine Dec 14, 2024

paul121 Dec 17, 2024

Add image control to download and print map #202

Are you sure you want to change the base?

Add image control to download and print map #202

Conversation

paul121 commented Jul 12, 2024

paul121 commented Jul 12, 2024

symbioquine left a comment

Choose a reason for hiding this comment

symbioquine Jul 13, 2024

Choose a reason for hiding this comment

symbioquine Jul 13, 2024

Choose a reason for hiding this comment

mstenta left a comment

Choose a reason for hiding this comment

paul121 Jul 18, 2024

Choose a reason for hiding this comment

paul121 commented Jul 18, 2024

paul121 commented Dec 12, 2024

symbioquine Dec 14, 2024

Choose a reason for hiding this comment

paul121 Dec 17, 2024

Choose a reason for hiding this comment