2

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

Dennis Bauszus
  • 1,624
  • 2
  • 19
  • 44
  • 1
    can you make [fiddle](http://jsfiddle.net)? It will be helpful to debug. – Kiran Mar 06 '14 at 17:14
  • Presumably using "inspect element" you can find out the position where that white overlay hits the top left of the map, then code it to reposition the entire div back to the top left of the screen (by giving it a negative top left). – OGHaza Mar 13 '14 at 13:39
  • I got around this for now by hard coding a negative top and left using half the width of the map canvas minus half the width of the print canvas. I don't like hard coding values but this must do for now. – Dennis Bauszus Mar 13 '14 at 19:01

1 Answers1

0

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

Community
  • 1
  • 1
Mochi
  • 173
  • 1
  • 12
  • Thanks for looking into this Mochi. I already set the view of map before using the print function. Creating a new map view would probably work but I would have to pass all the map view settings not just the boundary. I got around the problem for now by hard coding the left and top offset and then hiding the overflow. I know that hard coding is not an elegant solution so I haven't posted this hear. – Dennis Bauszus Mar 13 '14 at 18:58
  • Printing was always a problem with openLayers (with webPages :)). We solved this at the server side at the end because of exactly these kind of problems. There is also a chance, that your mapServer directly supports printing (e.g. geoserver). You just send a request that you generate with the help of openLayers (your current map object settings, layers, options and so) and get an image that you open in a popup or so and call print() and that's it ;) – Mochi Mar 14 '14 at 08:47