How can I print Openlayers with base OSM and Geoserver WMS layers?

Question

I have a map I want to print once the user open some layers. The layers are geoserver wms and the base layer is OSM.

I know geoserver has printing module (which is installed and working because I get reply from geoserver/pdf/info.json?var=printCapabilities

What I dont understand is how I use it to print the current map with visible layers.

I've looked at GeoExt example (mapfish) but it didn't help me understand.

Update 1 : I've generated the following URL by code :

http://77.235.53.170/geoserver/pdf/print.pdf?spec={%22units%22:%22degrees%22,%22srs%22:%22EPSG:4326%22,%22layout%22:%22A4%22,%22dpi%22:%22300%22,%22mapTitle%22:%22This%20is%20the%20map%20title%22,%22comment%22:%22This%20is%20the%20map%20comment%22,%22resourcesUrl%22:%20%22http://77.235.53.170/img%22,%22layers%22:[{%22baseURL%22:%22http://77.235.53.170/geoserver/Lehavim/wms%22,%22opacity%22:1,%22singleTile%22:true,%22type%22:%22WMS%22,%22layers%22:[%22%D7%A7%D7%95%20%D7%9E%D7%99%D7%9D%22],%22format%22:%22image/jpeg%22,%22styles%22:[%22%22]}],%22pages%22:[{%22center%22:[3875254.1134954,3680894.557955],%22scale%22:32000,%22rotation%22:0}]}

and I'm getting empty PDF (only with title)... What could be wrong ?

Answer 1

Geoserver print process involves two steps.

First at the server side, you have to configure your yaml file, called config.yaml. Go through the detailed documentation at MapFish print module documentation page.

Once this done, the second step is for client side. Considering you are using openlayers for your front-end, in order to get the list of visible layers, you will need a simple loop with visibility check, e.g.

var layers = "";
for (var i = 0; i < map.layers.length; i++) {
    if(map.layers[i].visibility == true){
        //get a string of visible layers
        layers = layers + map.layers[i].name + ','
    }
}
//remove the trailing ','
layers = layers.slice(0, -1);

Now you have to pass this to your print url. e.g

var maptitle= "This is the map title";
var mapcomment= "This is the map comment"
var printurl = "http://host:post/geoserver/pdf/print.pdf?spec={"units":"degrees","srs":"EPSG:4326","layout":"A4","dpi":"300","maptitle":"This is the map title","comment":"This is the map comment","resourcesUrl": "http://host:port/img","layers":[{"baseURL":"http://host:port/geoserver/workspace/wms","opacity":1,"singleTile":true,"type":"WMS","layers":["' + layers + '"],"format":"image/jpeg","styles":[""]}],"pages":[{"center":[' + map.getCenter().lon + ',' + map.getCenter().lat + '],"scale":' + getMapScale(Math.ceil(map.getScale())) + ',"rotation":0}]}'

Of course you will have to make relevant changes in the URL. Next assign this URL to your print button and then call a click function pragmatically.

$("#btnprint").attr("href", printUrl);
$('#btnprint')[0].click();

And done!!!

Answer 2

If you are a Chrome User, a quick and simple way is Google Cloud Print, but it is designed for printing the whole web page, but you could use a full screen display and print that.

Another advantage is that you can print to a connected printer anywhere you have registered printers on your account, so mobile printing is available to your desktop PC with a connected printer, or any Pc and Printer you have registered against your Google account. It does support Legacy Printers and network printers specifically designed to work with Google Cloud Print.

Answer 3

I think that you are going down the right track with geoserver and the mapfish plugin. It is what I use to do printing for my WMS and OSM baselayers. There is one thing to note if you are going to use this method though. If you want your printed maps to be scalled correctly you will not be able to use OSM directly from there site as the projection it is in doesn't scale correctly. You will need to load the data into a database and use a different SRS.

Having said this I will give you a quick rundown on how to get printing working with the mapfish plugin in geoserver.

First you will need to download the mapfish plugin and install it in your geoser installation. When I first did this that step didn't seem to be documented anywhere in the tutorials or demos for printing so it was awhile before I figured it out. Also it was somewhat difficult to find the plugin.

This page show the instructions from Geoserver on how to install the plugin and use it. Basically it breaks down to:

• Go to this page and download the geoserver-2.1-SNAPSHOT-printing-plugin.zip file.
• Extract the contents of the ZIP archive into the /WEB-INF/lib/ in the GeoServer webapp
• Restart Geoserver

Ok now that the plugin is installed the you will need to conifure the plugin which is done by modifying the config.yaml file that 'thelastray' talks about in their answer above. The file should be created when GeoServer is restarted and is found in the following location:

GEOSERVER_DATA_DIR/printing/config.yaml

There are lots of options for this so you will need to go through the documentation on the Mapfish website here.

The next step is to create an application that uses this plugin to do printing. An example of an application using this setup for printing using GeoEXT can be found here. If you would like to see some more examples look on this page.

Hopefully that will get you started.

Answer 4

Please check out http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/exportMapCanvas.html i hope it will help.

Answer 5

"Map into paper" can be more than simple "fit the image to the page"... The history of the Cartography was written into paper, and today some cartographic products still demand paper.

Today, paper is PDF — forget EPUB or "print by browser", they are waiting standards, CSS3, etc., are for future... And good quality (paper) cartographic products need XSLT-FO or CSS2. With (X)HTML+CSS2 you can produce good PDF (!)... That HTML is not "for browser", is for a "PDF generation" tool (that generates PDF on-fly or offline).

The only professional "tool to generate good PDF with HTML+CSS2" that I know of, is PrinceXML: I tested with "on-fly images" (SVG, JPG and PNG) from WFS and WMS protocols, and with OpenLayers, and it works so good (!).

Answer 6

I've just done this:

Downloaded html2canvas.js (https://github.com/niklasvh/html2canvas/releases)

Downloaded html2canvas-proxy.php(https://github.com/adjdred/html2canvas-proxy-php)

Installed them both on my server + ref to .js in tag and in my JS:

html2canvas(document.getElementById("map"), {
    proxy: "../lib/html2canvasproxy.php",
    logging : true,
    onrendered: function (canvas) {
        var img = canvas.toDataURL("image/png");
        window.open(img);
    }
});

Gives me a .png of the current map - which I can do whatever with - takes less than a second on my pc.

Mini

Answer 7

It is possible to print directly on the web with the tools that you have but that would require some skills that you don't posses.

My solution for you would be to use QGIS. By installing the OpenLayers plugin in QGIS you can access the OSM layer that you want and add the Geoserver WMS layer (by adding a WMS layer).

Then you can print with the look that you want and more with the help of this powerful tool. All the best, Tudor

PS. I know that my answer is probably not what you expected but it will work and provides more printing customizing than any web solution.