Export Map as Image
Capture the current map view as a downloadable image Each library has its own approach: here's how they compare.
Quick Recommendations
Leaflet — Makes the most sense when you need to export a raster tile map and are willing to use html2canvas to capture the DOM-rendered map container.
MapLibre GL JS — A strong fit when you need direct canvas access via preserveDrawingBuffer for clean WebGL canvas export without external libraries.
OpenLayers — Best when you need canvas-based export with precise control over the rendered output via the map's renderSync and canvas API.
MapTiler SDK — Delivers MapLibre's canvas export for MapTiler SDK users, with automatic MapTiler style and attribution handling.
At a Glance
| Leaflet | MapLibre | OpenLayers | SDK | |
|---|---|---|---|---|
| Coordinates | [lat, lng] | [lng, lat] | fromLonLat([lng, lat]) | [lng, lat] |
| Rendering | DOM + Canvas (2D) | WebGL (GPU, 60fps) | Canvas + WebGL | WebGL (GPU, 60fps) |
| Bundle size | ~42 KB gzipped | ~250 KB gzipped | ~290 KB gzipped (tree-shakeable) | ~280 KB gzipped (includes MapLibre) |
| Learning curve | Easiest (simple API, great tutorials) | Moderate (source/layer model, expressions) | Steepest (projections, OGC standards, verbose API) | Easy (MapLibre API with convenience helpers) |
| 3D support | No native 3D (2D only) | Full: terrain, fill-extrusion, globe, sky | Limited: WebGL layers, no native globe | Full (same as MapLibre) |
| Code lines | 14 | 15 | 19 | 15 |
Code Snippets
Click a library to expand its code. Each snippet shows only the core logic: the scaffold handles HTML boilerplate.
Leaflet14 linesShow code
const map = L.map('map').setView([48.8566, 2.3522], 13);
L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
L.marker([48.8584, 2.2945]).addTo(map).bindPopup('Eiffel Tower');
document.getElementById('export-btn').addEventListener('click', () => {
html2canvas(document.getElementById('map'), { useCORS: true }).then(canvas => {
const link = document.createElement('a');
link.download = 'map-export.png';
link.href = canvas.toDataURL();
link.click();
});
});MapLibre GL JS15 linesShow code
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
center: [14.42, 50.08],
zoom: 13,
preserveDrawingBuffer: true
});
map.addControl(new maplibregl.NavigationControl());
document.getElementById('export-btn').addEventListener('click', () => {
const canvas = map.getCanvas();
const link = document.createElement('a');
link.download = 'map-export.png';
link.href = canvas.toDataURL('image/png');
link.click();
});OpenLayers19 linesShow code
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) })
],
view: new ol.View({ center: ol.proj.fromLonLat([2.3522, 48.8566]), zoom: 13 })
});
function exportMap() {
map.once('rendercomplete', function() {
var canvas = document.querySelector('#map canvas');
if (canvas) {
var link = document.createElement('a');
link.download = 'map-export.png';
link.href = canvas.toDataURL('image/png');
link.click();
}
});
map.renderSync();
}MapTiler SDK15 linesShow code
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();
};Things to Know
Implementation-specific details that matter for export map as image.
Leaflet's DOM-based rendering requires html2canvas (external library) to capture tiles; CORS headers on tile server must allow canvas export.
Set preserveDrawingBuffer: true in the Map constructor to enable canvas.toDataURL(); this has a minor performance cost.
Export uses map.renderSync() followed by canvas.toDataURL(); works reliably with both raster and vector renderers.
Same preserveDrawingBuffer approach as MapLibre; the SDK's canvas export method works identically.
Which Library to Use?
Capture the current Leaflet map view as a downloadable PNG image using the html2canvas library.
Makes the most sense when you need to export a raster tile map and are willing to use html2canvas to capture the DOM-rendered map container.
Capture the current MapLibre GL JS map view as a downloadable PNG image using the WebGL canvas export API.
A strong fit when you need direct canvas access via preserveDrawingBuffer for clean WebGL canvas export without external libraries.
Capture the current OpenLayers map view as a downloadable PNG image using the canvas export API.
Best when you need canvas-based export with precise control over the rendered output via the map's renderSync and canvas API.
Capture the current MapTiler SDK map view as a downloadable PNG image using the canvas export method.
Delivers MapLibre's canvas export for MapTiler SDK users, with automatic MapTiler style and attribution handling.
Build Maps with AI
Generate code like these examples using mapping library skills in your IDE.