Static Map Image

Display a non-interactive map image using the MapTiler Static Maps API Each library has its own approach: here's how they compare.

Quick Recommendations

Leaflet — Ideal when you want to show a static preview alongside or instead of an interactive Leaflet map for performance-sensitive contexts.

MapLibre GL JS — The right choice when a static fallback complements an interactive MapLibre map: both share the same MapTiler style for visual consistency.

OpenLayers — Makes the most sense when static map images need to integrate with OpenLayers-based print or report generation workflows.

MapTiler SDK — A strong choice for the simplest static map URL construction using the SDK's built-in MapTiler API integration.

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	10	11	17	12

Code Snippets

Click a library to expand its code. Each snippet shows only the core logic: the scaffold handles HTML boilerplate.

Leaflet10 linesShow code

arrow_forwardFull example

const img = document.createElement('img');
img.src = 'https://api.maptiler.com/maps/streets-v4/static/2.3522,48.8566,13/600x400.png?key=YOUR_MAPTILER_KEY';
img.alt = 'Static map of Paris';
img.style.cssText = 'width:100%;max-width:600px;display:block;margin:0 auto 20px;border:2px solid #2a2a2a;';
document.getElementById('map').before(img);
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: '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);

MapLibre GL JS11 linesShow code

arrow_forwardFull example

const img = document.createElement('img');
img.src = 'https://api.maptiler.com/maps/streets-v4/static/14.42,50.08,13/600x400.png?key=YOUR_MAPTILER_KEY';
img.alt = 'Static map of Prague';
img.style.cssText = 'width:100%;max-width:600px;display:block;margin:0 auto 20px;border:2px solid #2a2a2a;';
document.getElementById('map').before(img);
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
});

OpenLayers17 linesShow code

arrow_forwardFull example

var img = document.createElement('img');
img.src = 'https://api.maptiler.com/maps/streets-v4/static/13.405,52.52,13/600x400.png?key=YOUR_MAPTILER_KEY';
img.alt = 'Static map of Berlin';
img.style.cssText = 'width:100%;max-width:600px;display:block;margin:0 auto 20px;border:2px solid #2a2a2a;';
document.getElementById('map').before(img);
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: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>'
      })
    })
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([13.405, 52.52]), zoom: 13 })
});

MapTiler SDK12 linesShow code

arrow_forwardFull example

maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const img = document.createElement('img');
img.src = 'https://api.maptiler.com/maps/streets-v4/static/12.4964,41.9028,13/600x400.png?key=YOUR_MAPTILER_KEY';
img.alt = 'Static map of Rome';
img.style.cssText = 'width:100%;max-width:600px;display:block;margin:0 auto 20px;border:2px solid #2a2a2a;';
document.getElementById('map').before(img);
const map = new maptilersdk.Map({
  container: 'map',
  style: maptilersdk.MapStyle.STREETS,
  center: [12.4964, 41.9028],
  zoom: 13
});

Things to Know

Implementation-specific details that matter for static map image.

Leaflet

Static map is a simple <img> tag with a MapTiler Static Maps API URL: completely independent of the Leaflet library.

MapLibre GL JS

The static map API URL is library-agnostic; the example shows it alongside an interactive map for comparison.

OpenLayers

Same MapTiler Static Maps API URL pattern; the static image does not depend on OpenLayers at all.

MapTiler SDK

The Static Maps API URL is independent of the SDK runtime, but using the SDK's configured API key avoids duplication.

Which Library to Use?

Leaflet

Display a non-interactive map image using the MapTiler Static Maps API: perfect for thumbnails, emails, and social previews.

check_circle

Ideal when you want to show a static preview alongside or instead of an interactive Leaflet map for performance-sensitive contexts.

MapLibre GL JS

Display a non-interactive map image using the MapTiler Static Maps API alongside an interactive MapLibre map.

check_circle

The right choice when a static fallback complements an interactive MapLibre map: both share the same MapTiler style for visual consistency.

OpenLayers

Display a non-interactive map image using the MapTiler Static Maps API alongside an interactive OpenLayers map.

check_circle

Makes the most sense when static map images need to integrate with OpenLayers-based print or report generation workflows.

MapTiler SDK

Display a non-interactive map image using the MapTiler Static Maps API alongside an interactive MapTiler SDK map.

check_circle

A strong choice for the simplest static map URL construction using the SDK's built-in MapTiler API integration.

auto_awesome

Build Maps with AI

Generate code like these examples using mapping library skills in your IDE.

auto_awesomeGet skills keyGet a free API key