Saving Images

Export a PNG snapshot of the map exactly as it appears on screen — including the basemap, drawn geometry, and buffer rings. This is useful for attaching a site plan to a report, storing a thumbnail alongside a saved geometry, or letting a user download what they've drawn.

Enable image capture

Image export reads pixels back off the map canvas. For that to work you must set preserveDrawingBuffer: true when you create the map:

const map = new GeoCertaMap.GeoCertaMap({
  container: 'map',
  preserveDrawingBuffer: true,
  center: [-0.118, 51.509],
  zoom: 12,
});

Why it's off by default. Keeping the drawing buffer readable has a small performance and memory cost, so it is disabled unless you opt in. Only enable it on screens that actually capture snapshots.

Capture a snapshot

Call getCanvas() to get the underlying canvas, then toDataURL() for a base64 PNG data URL you can drop straight into an <img>, upload, or download:

const dataUrl = map.getCanvas().toDataURL('image/png');
document.getElementById('preview').src = dataUrl;

Capture automatically

Pair the snapshot with an event so the image stays in sync with the map:

When to capture	Callback	Use it for
After the map settles	`onIdle()`	A live thumbnail that always reflects the current view
When the geometry changes	`onDrawChange(geometry)`	A snapshot tied to what the user has drawn

const map = new GeoCertaMap.GeoCertaMap({
  container: 'map',
  preserveDrawingBuffer: true,
  // refresh a thumbnail every time the map settles
  onIdle: () => {
    preview.src = map.getCanvas().toDataURL('image/png');
  },
  // capture whenever the drawn geometry changes
  onDrawChange: (geometry) => {
    if (geometry) {
      drawnPreview.src = map.getCanvas().toDataURL('image/png');
    }
  },
});

Download the image

Turn the data URL into a file download with a temporary link:

function downloadMap(map, filename = 'map.png') {
  const link = document.createElement('a');
  link.download = filename;
  link.href = map.getCanvas().toDataURL('image/png');
  link.click();
}

Live demo

The map below captures three snapshots: one refreshed on every idle, one taken each time the geometry changes, and one taken on demand with the Capture button.

Source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GeoCertaMap — Saving Images</title>
  <link rel="stylesheet" href="https://cdn.geocerta.io/geocerta-map/v0.1.1/geocerta-map.css" />
  <style>
    #map { width: 100%; height: 400px; }
    /* ... panel styles omitted for brevity, see CDN Installation for full CSS */
  </style>
</head>
<body>
  <div id="map"></div>

  <aside id="panel">
    <div class="capture-box">
      <header><span>On idle</span></header>
      <div class="img-wrap"><img id="img-idle" alt="idle capture" /></div>
    </div>
    <div class="capture-box">
      <header><span>On draw change</span></header>
      <div class="img-wrap"><img id="img-draw" alt="draw capture" /></div>
    </div>
    <div class="capture-box">
      <header><span>Manual capture</span><button id="btn-capture">Capture</button></header>
      <div class="img-wrap"><img id="img-manual" alt="manual capture" /></div>
    </div>
  </aside>

  <script src="https://cdn.geocerta.io/geocerta-map/v0.1.1/geocerta-map.umd.js"></script>
  <script>
    // Grab a PNG straight off the map canvas. Relies on preserveDrawingBuffer: true.
    function renderCapture(imgId) {
      document.getElementById(imgId).src = geomap.getCanvas().toDataURL('image/png');
    }

    const geomap = new GeoCertaMap.GeoCertaMap({
      container: 'map',
      preserveDrawingBuffer: true,
      center: [-0.118, 51.509],
      zoom: 12,
      toolbar: { modes: ['polygon', 'rectangle', 'select'], position: 'top-right' },
      onIdle:       () => renderCapture('img-idle'),
      onDrawChange: () => renderCapture('img-draw'),
    });

    document.getElementById('btn-capture').addEventListener('click', () => {
      renderCapture('img-manual');
    });
  </script>
</body>
</html>

Capturing requires the map to be created with preserveDrawingBuffer: true. Without it, toDataURL() returns a blank image. See Overview for the full configuration reference.