Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
Judging by this link all your options are fraught and a bit hacky, depending on what access you have to the server. – MerseyViking Dec 14 '11 at 16:21
up vote 4 down vote accepted

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

share|improve this answer
Awesome, good find! (+1). – CaptDragon Feb 13 '12 at 17:13
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
wonderful! I look forward to it, thanks. – djq Feb 13 '12 at 17:49

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.

share|improve this answer
This generates a PDF, i need an image. Close though. – CaptDragon Dec 14 '11 at 17:11
I think the MapFish printing also supports PNG output. It is the PDF that is the tricky part. – geographika Dec 14 '11 at 17:27
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. – 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 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.

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

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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