Search code examples
javascripthtmlopenlayers

OpenLayers printing using innerHTML

I run into a problem while trying to create a formatted print page from my full screen OpenLayers web mapping application.

When I call my print function I create a new window using css styled HTML. I get the innerHTML from the OpenLayers canvas and paste the content into a new canvas div on the print page.

    {
var widthPx = document.getElementById('OpenLayers_canvas').offsetWidth;
var heightPX = document.getElementById('OpenLayers_canvas').offsetHeight;

var html =
    '<html><head>'
    + '<link rel="stylesheet" href="styles/olStyle_printing.css" type="text/css" />'
    + '</head><body>'
    + '<div id="OpenLayers_printcanvas">'
    + '<div style="width:' + widthPx + 'px;height:' + heightPX + 'px" id="OpenLayers_canvas">'
    + document.getElementById('OpenLayers_canvas').innerHTML
    + '</div>'
    + '</div>'
    + '</body></html>';

var w = window.open();
    w.document.write(html);
    w.document.close();
    w.focus();
    w.print();
    //w.close();
}

The problem is that I don't know how to center the content.

The map is tied to the top left corner. What I am trying to do is to have the center of the original map being in the center of the frame on the print page.

Edit: I added a container div with a border. I can hide the overflow. However, the problem is that I don't know how to center the div within its container.

First screenshot shows the OpenLayers app:

enter image description here

Second screenshot shows the document which I create with the innerHTML content in a div within a container div.

enter image description here

Solution

  • I believe your problem lies in the fact, that if you use the innerHTML you do nothing else then just send the same request as you sent in the page before. if you want to show something else, you have to change the request.

    The workflow should be like:

    1. change the view of the map, centre to the polygon you want
    2. send this view to the innerHTML of your print object
    3. return to the previous view, before you changed the characteristics of your map view

    the second chance would be to create new map view in you print object, where you set boundaries of the map according to the boundaries of the print function.

    or you can try this: Openlayers Print Function

    or this (new request to the map server): http://trac.osgeo.org/openlayers/wiki/Printing