I would like to allow the user to generate a thumbnail image of what the user is seeing in the OpenLayers map canvas so the user may print, save, share, email, or whatever.

Any ideas of how i would go about doing this?

I'm looking for solutions that generate an image. I don't want to save the innerHTML, feature data or anything other than an image. An image is much easier to share and cannot later be modified.


enter image description here

or this will also work:

enter image description here


I've been looking at some of the new functionality in the development version of the OpenLayers library, and there is a demo of this exact feature. In this example, it enables an image to be generated using the basemap, a wms and a vector overlay. The example seems to work on Firefox ok (but every so often I get a string of errors while the page load), Safari seems fine as does Chrome. I'm having a hard time getting it to work on my own server for my own application as it does require lots of reworking of code. Many pieces are not compatible with the current openlayers library.

enter image description here

  • I'd love to see other examples! I'm unfamiliar with the Openlayers development process, so I'm not sure if it's necessary for me to change all of my code so it works with this development version, or whether to wait.... – djq Feb 13 '12 at 17:21
  • I'll try to put together a test example that would work with my app ( with WFS and WMS layers) and i'll post back here. – CaptDragon Feb 13 '12 at 17:28

Could you use the GeoExt javascript library? They have a demo of printing to a pdf here:

enter image description here

It does require the Mapfish or Geoserver printing module.

  • This generates a PDF, i need an image. Close though. – CaptDragon Dec 14 '11 at 17:11
  • 1
    I think the MapFish printing also supports PNG output. It is the PDF that is the tricky part. mapfish.org/doc/print/protocol.html – geographika Dec 14 '11 at 17:27
  • 2
    Are you using PostGIS to store the data? There is a PostGIS output to geoJson, and then using advice from @geographika's blog you can convert geoJson to png. geographika.co.uk/visualising-geojson-in-15-minutes – djq Dec 14 '11 at 18:11
  • Final thought - it seems like this might be most easily done using the webserver, rather than in browser. Geoserver (for example) can output to png opengeo.org/technology/geoserver as could Mapserver, Mapnik .... – djq Dec 14 '11 at 18:15

If you are willing to accept a Google-Chrome-only solution I have created a Chrome plugin that takes a screenshot of the current tab, crops out the ol div and renders it on a canvas.

From there thumbnailing, printing, sharing, whatever is just a matter of spicing up to taste the HTML.

It's on github:


p.s.: parts of the text are in Italian, but I'll translate it if needed.

p.s.2: it might require some slight modifications to work in your app, but I'll be glad to help.

  • what a shame, sorry, i need it to work on all modern browsers. – CaptDragon Dec 14 '11 at 17:09

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.