Export map in OpenLayers with toJPEG

Question

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?

Answer 1

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.