Print library for OpenLayers?

Question

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.

Answer 1

I've asked a similar question .

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

Here's a DEMO.

Answer 2

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
          "transform":"none",
          "left":mapleft,
          "top":maptop,
        });

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

            // reset the map to original styling
            $(".gm-style>div:first>div").css({
              left:0,
              top:0,
              "transform":transform
            });

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

Note

• 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