maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY'; const map = new maptilersdk.Map({ container: 'map', style: maptilersdk.MapStyle.STREETS, center: [2.3522, 48.8566], zoom: 13, preserveDrawingBuffer: true }); window.exportMap = () => { const canvas = map.getCanvas(); const link = document.createElement('a'); link.download = 'map-export.png'; link.href = canvas.toDataURL('image/png'); link.click(); };

How it works

Set preserveDrawingBuffer: true in the constructor to allow canvas pixel readback. Without this, toDataURL() returns a blank image due to WebGL buffer clearing.

The export function gets the map’s canvas element, converts it to a data URL, and triggers a download by programmatically clicking a link element.

The exported image matches the current map dimensions in pixels.

Key APIs

API	Description	Docs
`preserveDrawingBuffer`	Constructor option to allow canvas export	docs.maptiler.com/sdk-js/api/
`map.getCanvas()`	Get the underlying canvas element	docs.maptiler.com/sdk-js/api/
`canvas.toDataURL()`	Convert canvas to image data URL	MDN

FAQ

Does preserveDrawingBuffer affect performance?

Slightly. It prevents WebGL from optimizing buffer swaps. The impact is minimal on modern hardware but measurable on low-end devices.

Can I export at a higher resolution?

Not directly with this method. The export matches the canvas pixel size. For higher resolution, resize the map container before exporting, or use the MapTiler Static Maps API.

Common mistakes

Forgetting preserveDrawingBuffer: true: toDataURL() returns a blank image without it
Calling export before tiles finish loading: wait for the idle event if you need a complete image
Expecting DOM markers in the export: DOM markers are HTML overlays, not part of the WebGL canvas

Export Map as PNG with MapTiler SDK

How it works

Key APIs

FAQ

Common mistakes

Build maps using MapTiler SDK with AI

Related Examples