Map Export

This example uses OpenLayers v4.0.1. The latest is v.

#### Map Export

Download PNG

Example of exporting a map as a PNG image.

Example of exporting a map as a PNG image. This example requires a browser that supports `canvas.toBlob()`.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.control
,
- ol.format.GeoJSON
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.source.OSM
,
- ol.source.Vector

Copy Edit
Map Export Example of exporting a map as a PNG image. // this example uses FileSaver.js for which we don't have an externs file. var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Vector({ source: new ol.source.Vector({ url: 'https://openlayers.org/en/v4.0.1/examples/data/geojson/countries.geojson', format: new ol.format.GeoJSON() }) }) ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: new ol.View({ center: [0, 0], zoom: 2 }) }); document.getElementById('export-png').addEventListener('click', function() { map.once('postcompose', function(event) { var canvas = event.context.canvas; if (navigator.msSaveBlob) { navigator.msSaveBlob(canvas.msToBlob(), 'map.png'); } else { canvas.toBlob(function(blob) { saveAs(blob, 'map.png'); }); } }); map.renderSync(); }); <div id="map" class="map"></div> <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Map Export</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
        <script>
          // this example uses FileSaver.js for which we don't have an externs file.
          var map = new ol.Map({
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              }),
              new ol.layer.Vector({
                source: new ol.source.Vector({
                  url: 'https://openlayers.org/en/v4.0.1/examples/data/geojson/countries.geojson',
                  format: new ol.format.GeoJSON()
                })
              })
            ],
            target: 'map',
            controls: ol.control.defaults({
              attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
              })
            }),
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

          document.getElementById('export-png').addEventListener('click', function() {
            map.once('postcompose', function(event) {
              var canvas = event.context.canvas;
              if (navigator.msSaveBlob) {
                navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
              } else {
                canvas.toBlob(function(blob) {
                  saveAs(blob, 'map.png');
                });
              }
            });
            map.renderSync();
          });
        </script>
      </body>
    </html>