I have created a portal which export map and then print. I just wanted to add template or draw layout in canvas for that pdf as shown in the picture below.

Here is my code:

//print map
var dims = {
  a0: [1189, 841],
  a1: [841, 594],
  a2: [594, 420],
  a3: [420, 297],
  a4: [297, 210],
  a5: [210, 148]

var exportElement = document.getElementById("export-pdf");
  function(e) {
    exportElement.disabled = true;
    document.body.style.cursor = "progress";

    var format = document.getElementById("format").value;
    var resolution = document.getElementById("resolution").value;
    var buttonLabelElement = document.getElementById("button-label");
    var label = buttonLabelElement.innerText;
    var scale = 4000;

    var mapView = map.getView();
    var mapProjection = mapView.getProjection();
    var mapResolutionAtEquator = mapView.getResolution();
    var viewCenter = mapView.getCenter();
    var mapPointResolution = ol.proj.getPointResolution(

    var dim = dims[format];
    var width = Math.round((dim[0] * resolution) / 25.4);
    var height = Math.round((dim[1] * resolution) / 25.4);
    var size = map.getSize();
    var extent = map.getView().calculateExtent(size);

    var mapView = map.getView();
    var currZoom = mapView.getZoom();
    var mapProjection = mapView.getProjection();
    var mapResolutionAtEquator = mapView.getResolution();
    var viewCenter = mapView.getCenter();
    var mapResolutionAtEquator = mapView.getResolution();
    var mapPointResolution = ol.proj.getPointResolution(
    var mapResolutionFactor = mapResolutionAtEquator / mapPointResolution;
    var pdf_name = dist + "_" + tahsil + "_" + village + ".pdf";

    map.once("rendercomplete", function(event) {
      var canvas = event.context.canvas;
      showText(event.context, "left-top", dist, tahsil, village);
      drawLegend(event.context, "right-bottom");
      drawNorthArrow(event.context, "right-top");

      var data = canvas.toDataURL("image/jpeg");
      var pdf = new jsPDF("landscape", undefined, format);
      pdf.addImage(data, "JPEG", 0, 0, dim[0], dim[1]);
      // map.getView().fit(extent, size);
      exportElement.disabled = false;
      document.body.style.cursor = "auto";

    var printPointResolution = (scale * 25.4) / (resolution * 1000); // edit1: corrected
    var printResolutionAtEquator = mapResolutionFactor * printPointResolution;
    var printZoom = mapView.getZoomForResolution(printResolutionAtEquator);

    map.setSize([width, height]);
    // mapView.fit(extent, (map.getSize()));

For example:

enter image description here

How to create this layout pdf?

  • Take a look at the ol-ext source code viglino.github.io/ol-ext There are controls for title, scale lines, attributions, graticule borders, compass, etc. on the canvas. Obviously not exactly what you want but you could use the same technique to produce your own. – Mike Apr 6 at 10:05
  • thanks Mike but i did not see scaling option like 1:4000 and so on for printing map. – sanju verma Apr 6 at 10:23
  • I don't think there is any other way than creating svg template and than drawing it to canvas before export to pdf, the same way you are now drawing legend, title, scale and compass. – TomazicM Apr 7 at 17:23
  • is it possible to set everything in template according to scale and then give print-preview option then print map in desired paper size as A0 – sanju verma Apr 8 at 7:00

My suggestion is to use mapfish. It comes in a shapre of .war application that can sit nicely on tomcat (or other) next to geoserver. Geoserver has also got a buil-in version of mapfish that can be added as an extension but the versions there is outdated.

Link to gif showing it in action.

I use it for the exact same purpose and it works great. Have a look at their documentation and if this is the way you want to go let me know and I can give some more details on how to set it up.

  • i think in mapfish a0 and a1 size printing not present. – sanju verma May 17 at 5:02
  • You can set whaever size you want. Malfish uses jasper report's templates. Super customizable. – Łukasz Kłosiński May 17 at 19:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.