I need to export the current OpenLayers view into a canvas to finally save it as a image.

My problem is, that I need an image of the current user view with some interactive elements.

I saw this working example: http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/exportMapCanvas.html

There is a little addon that is not OpenLayers standard, but add a little export functionality: http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/exportMapCanvas.html

but this does no work on current open layers (2.13) any more and I don't get which version that is.

The Constant OpenLayers.Layer.Grid.ONECANVASPERLAYER does not exist (any more ?) And the option "useCanvas" is deprecated as well.

This is the broken code (summarized):

        if (layer instanceof OpenLayers.Layer.Grid){

A Grid layer has no attribute "canvas" as far as I can see it.


Well, you were using Camp-to-Camp's sandbox code which is not part of the OL releases. Rather it's more for trying out ideas, though it some cases OL may incorporate Camp-to-Camp's code in a future release. As I used their code at one point myself while exploring canvas options with OL, I believe it was a modified version of 2.11 (perhaps 2.12). However, the OL stable 2.13 release did not use Camp-to-Camp's canvas options for the layers.

That being said, you can declare an HTML5 canvas element, copy tile images and image layers onto it, and then use methods to retrieve information or manipulate those images via the canvas element. There's also a helper script called html2canvas http://html2canvas.hertzen.com/ which can take a screenshot of the web page or parts of web page. I've gotten this to work but the problem with OL 2.x is that one can't export the background map tiles when saving to an image (at least I couldn't find something that working when I was researching this issue). If that's not a problem for you, then perhaps give html2canvas a try. BTW, OL 3.x has solved the map background issue and has an example you can try.

| improve this answer | |
  • Thank you i solved the problem myself by modifying the example code. The basic idea is to put vector layers into a canvas AND for images layers every tile into the canvas ... you need some offset x and y calculations and it works quite fine. Now i can screenshot anytime and hover effects etc. are saved too. – Benjamin Eckstein Aug 13 '15 at 10:34

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.