How do I save the current map view an an image, or print it?

OpenLayers itself doesn't handle printing, nor saving the image to a single image. This is because OpenLayers is actually an illusion, created by many different images being creatively overlaid in your browser's div. The only place the entire map exists, is in your browser's imagination. Nevertheless, there are a few options.


The Print button

The simplest method of printing, is simply the browser's own print function. You usually use File/Print to do this, but JavaScript also provides a print() function which does the same thing.


Mapserver

The following mechanism works if you're using UMN Mapserver. It's not very flexible, but it does work. It constructs a mapserv query containing all of the active layers and the view's extent and size.

Assumptions

  • Your layers are either WMS or MapServer layers.
  • All layers are being served from the same mapfile, be they WMS or MapServer layers.

Caveats

  • This mechanism will not use TileCache, and will instead make a direct query to mapserv. If you have a layer that's very slow to render, then this method may take a long time.
  // this assumes that the Map object is a JavaScript variable named "map"
  // and that your layers are in a JavaScript array named "layers"
  // and that both of these are in an iframe named "map"
  // But changing these references is a simple matter to fit your setup.
  function printMap() {
    // fetch the extent and image size
    var mapview = document.getElementById('map').contentWindow.map;
    var layers  = document.getElementById('map').contentWindow.layers;
    var extent  = mapview.getExtent();
        extent  = [extent.left,extent.bottom,extent.right,extent.top].join('+');
    var width   = mapview.getSize().w;
    var height  = mapview.getSize().h;
    // build a comma-joined list of layers
    var activelayers = [];
    for (i in layers) {
      if (!layers[i].getVisibility()) continue;
      if (!layers[i].calculateInRange()) continue;
      activelayers[activelayers.length] = layers[i].params['LAYERS'];
    }
    activelayers = activelayers.join('+');
    // open a window to our pure-Mapserver version
    var url = '/cgi-bin/mapserv?map=/maps/spraywatch2/wms/mapfile.map';
        url += '&mode=map';
        url += '&mapext=' + extent;
        url += '&mapsize=' + width+'+'+height;
        url += '&layers=' + activelayers;
    window.open(url);
  }

"Tile stitching" using a server-side program

This method involves the OpenLayers Map composing a list of the visible tiles and sending them to a server-side program. The server-side program downloads the tiles' images and composes them into a finished image.

This method has been well-developed and moved to its own page due to the volume of content.


MapFish

 MapFish is a framework based on OpenLayers that provides additional GUI elements and server side components. On of those components is a print service. Mappings exist for Java, Python and PHP. More information about this component here:

 https://trac.mapfish.org/trac/mapfish/wiki/PrintModuleDoc


wkhtmltopdf

 wkhtmltopdf is a command-line tool which converts a HTMl document into a PDF document. We have had significant success with implementing a web page in jQuery and OpenLayers: setting up an OpenLayers Map with a given extent, Bing basemap, WMS layers, and Markers, and then converting this HTML to PDF. The resulting PDF even includes OpenLayers Controls such as ScaleLine.


cutycapt

**Untested**  http://cutycapt.sourceforge.net/ is a tool with a similar implementation to wkhtmltopdf above.