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 '12 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 '12 at 3:44

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 '12 at 19:44
  • 1
    I'd be curious to know the challenges you faced. I need to run in IE 8. – ca0v Mar 29 '12 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 '12 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 '15 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, privacy policy and cookie policy

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