OL3 and geoserver print module with OSM as background layer

Question

I have an application built in OL3 and geoserver. I am using bootstrap and jQuery in my application.

I am trying to print the maps in pdf. I have OSM as a base layer in my application and other layers come from my local geoserver.

Now I have a situation where I need to print my map in pdf(with all the visible layers and OSM layer).

I have installed printing plugin in my geoserver and it works fine I have tested my printing module with the following codes:

http://localhost:8080/geoserver/pdf/print.pdf?spec={
    "layout":"A4 portrait",
    "srs":"EPSG:4326",
    "units":"degrees",
    "dpi":300,
    "outputFilename": "map",
    "mapTitle":"This is the map title",
    "layers":[
    {
        "baseURL":"http://localhost:8080/geoserver/genesis/wms",
        "opacity":0.5,
        "singleTile":false,
        "type":"WMS",
        "layers":["District_Boundary", "DevelopmentRegions"],
        "format":"image/png",
        "styles":[]
    } 
    ],
    "pages":[
    {
        "center":[84.25,28.1],
        "mapTitle":"",
        "comment":"",
        "scale":4000000,
        "rotation":0
    }
    ] }

But the problem is how should I print my OSM layer in this?? I am not using Extjs in my application so I don't want to use that just for my printing functionality.

Can anyone suggest how should I do with just jQuery and bootstrap and plain javascript without Extjs??

Thanks.

Answer 1

You just need to add osm as another layer to your request payload like this

http://localhost:8080/geoserver/pdf/print.pdf?spec={
    "layout":"A4 portrait",
    "srs":"EPSG:4326",
    "units":"degrees",
    "dpi":300,
    "outputFilename": "map",
    "mapTitle":"This is the map title",
    "layers":[
       {  
         "baseURL":"http://a.tile.openstreetmap.org",
         "maxExtent":[  
            //your extent of map in the correct projection
         ],
         "tileSize":[  
            256,
            256
         ],
         "extension":"png",
         "type":"OSM",
         "opacity":1
      },{
        "baseURL":"http://localhost:8080/geoserver/genesis/wms",
        "opacity":0.5,
        "singleTile":false,
        "type":"WMS",
        "layers":["District_Boundary", "DevelopmentRegions"],
        "format":"image/png",
        "styles":[]
    }
    ],
    "pages":[
    {
        "center":[84.25,28.1],
        "mapTitle":"",
        "comment":"",
        "scale":4000000,
        "rotation":0
    }
    ] }

You need to change the extent based on your need

Once you send the request Geoserver will populate the osm tiles and put it on the map

Be aware that you should put the osm layer before other layers in your json string otherwise it will be placed on top of other layers in the printed map.

Answer 2

Geoserver Print plugin works only on geoserver data. In your case, you should handle OSM data as a layer in your geoserver instance. There is no possibility to just "proxy" OSM tiles through geoserver, you have to import OSM data into your database. Please check this article: http://blog.geoserver.org/2009/01/30/geoserver-and-openstreetmap/

When you are using OL3 (canvas support), you can consider browser-side printing. It is very simple to get image from canvas: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

You can also generate PDF in JavaScript using: https://github.com/MrRio/jsPDF