2

Recently, we set up a web app with OpenLayers that allows exporting a map as a jpeg image. The map contains XYZ, WMS and/or WFS layers.

We used the toJpeg function of the html-to-image library, as it was proposed in the OpenLayers "map export" example page a while ago, with a function similar to this:

const printMap = (mapPrintDiv) => 
toJpeg(mapPrintDiv, exportOptions)
   .then(dataURL => {
       try {
          const link = document.getElementById('imageDownload');
          link.href = dataURL;
          link.click();
       } catch (error) {
          console.log(error);
       }
})

Everything was working fine for a while but sometimes, the customer told us that this function was not working (the Promise of toJpeg was not fullfilled but the error message was not informative at all). Recently, the problem was more and more reported. It has been tested by dozens of people by the customer and by us, and it is EXTREMELY hard to see in what configuration this bug could be reproduced (no apparent effect of OS, browser, network, map layers, ...). Sometimes, it works and the next day it does not work.

Then, we saw that the "map export" example of OpenLayers actually changed 7 months ago: the example no longer relies on html-to-image but now use a custom function for printing (with the native canvas.toDataURL).

Why has it changed? What is the best method for exporting an OpenLayers map in 2020?

2
  • It was changed because of the browser compatibility issues with html-to-image (it will not work on IE, Safari and some other browsers). If you only want to export the map canvas it is best to use the method in the latest example, but that will not export controls or overlays - if you need those you will need to continue using html-to-image (or try the very similar dom-to-image-more as in openlayers.org/en/latest/examples/print-to-scale.html which has similar browser limitations).
    – Mike
    Sep 22, 2020 at 11:00
  • Thanks. Since I need to export some controls as well, I started to programmatically add them to the canvas and then use the toDataURL function
    – juminet
    Sep 22, 2020 at 11:54

1 Answer 1

0

It sounds like your question might be best directed at the html-to-image project, provided you can come up with a solid reproduction case.

Regarding exporting OpenLayers image, this library was removed since it was deemed not necessary any more: a more consistent result can be obtained using just a few more lines of code.

There is still no high-level API to do that in OpenLayers unfortunately. So to answer your question, the best method is probably the one shown in the example.

Note that it also depends on whether you want to export the current map or print another map in a different format. You can take a look at this project which takes the latter approach (albeit still being a prototype). Disclaimer: I'm the author.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.