I realize this is a bit of an open question but are there any known open JavaScript libraries which facilitate printing an OpenLayers map? I'm looking to produce the content on the client and possibly upload it to convert to PDF or simply set the innerHTML on some DOM element.

I started a proof-of-concept but was looking for something which honors various tile sizes and vector markup (IE 8) and all the other complexities that are sure to arise.

  • What is the source of your map? If it is eg mapserver or mapguide, you could consider rendering your image there.
    – johanvdw
    Mar 28, 2012 at 21:23
  • 1
    Unknown at design time and varied (Public - Google, Bing, OSM, ArcGIS as well as ArcGIS/ArcIMS, MapGuide, WMS, ...). I'd like a client-side solution for collecting the imagery and vector markup. Once collected probably upload to convert to PDF. Need to embed map in a document.
    – ca0v
    Mar 29, 2012 at 3:44

2 Answers 2


I've asked a similar question .

Best answer was using OpenLayers.Control.ExportMap() to generate an image of the canvas.

Here's a DEMO.

  • We rolled our own few years back because there wasn't anything available. And it's significant amount of dev. And also had to support older browsers w/o Canvas. If starting anew and supporting only modern browsers this looks like the way to go.
    – Vadim
    Mar 28, 2012 at 19:44
  • 1
    I'd be curious to know the challenges you faced. I need to run in IE 8.
    – ca0v
    Mar 29, 2012 at 3:32
  • CaptDragon - had to change my question...looking for IE 8 solution otherwise ExportMap + Canvas.toDataURL() was everything I was looking for.
    – ca0v
    Mar 29, 2012 at 4:02
  • Looks like toDataURL has better support in OL3, and there has also been suggested an alternate toBlob approach: github.com/openlayers/ol3/issues/2968
    – danwild
    May 27, 2015 at 6:14

I've posted this answer on SO for a related question.

This export function will allow you to generate a dataURL for your map, which you can use to produce a PDF (I'm using jsPDF).

This solution is dependent on html2canvas.js

    function exportMap() {

        var mapElem = document.getElementById('map'); // the id of your map div here

        // html2canvas not able to render css transformations (the container holding the image tiles uses a transform)
        // so we determine the values of the transform, and then apply them to TOP and LEFT 
        var transform=$(".gm-style>div:first>div").css("transform");
        var comp=transform.split(","); //split up the transform matrix
        var mapleft=parseFloat(comp[4]); //get left value
        var maptop=parseFloat(comp[5]);  //get top value
        $(".gm-style>div:first>div").css({ //get the map container. not sure if stable

        html2canvas(mapElem, {
          useCORS: true,
          onrendered: function(canvas) {
             mapImg = canvas.toDataURL('image/png');

            // reset the map to original styling

            // do something here with your mapImg
            // e.g. I then use the dataURL in a pdf using jsPDF...
            // createPDFObject();


  • Only tested on Chrome and Firefox
  • This is a hacky solution (unfortunately I am struggling to find other options for my situation)
  • If you have the option to use Openlayers 3, there seems to be better canvas support, and I've also seen a convincing toBlob example: http://codepen.io/barbalex/pen/raagKq

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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