Static Map Image with OpenLayers
OpenLayersDisplay a non-interactive map image using the MapTiler Static Maps API alongside an interactive OpenLayers map.
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: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>'
})
})
],
view: new ol.View({ center: ol.proj.fromLonLat([13.405, 52.52]), zoom: 13 })
});How it works
The MapTiler Static Maps API returns a PNG image for any map style, center coordinate, zoom level, and pixel dimensions. The URL format is https://api.maptiler.com/maps/{style}/static/{lng},{lat},{zoom}/{width}x{height}.png?key=YOUR_MAPTILER_KEY. No JavaScript is needed for the image: it loads as a plain <img> element.
In this example, a static image of Berlin is created above the map container. Below it, an interactive OpenLayers map loads the same area with tile-based rendering. This pattern is useful for showing a quick preview while the full map initializes, or for contexts where interactivity is not needed.
Key APIs
| API | Description | Docs |
|---|---|---|
| MapTiler Static Maps API | Generate map images via URL | docs.maptiler.com/cloud/api/static-maps |
ol.Map |
Create an interactive map | openlayers.org |
ol.proj.fromLonLat() |
Convert [lng, lat] to map projection | openlayers.org |
FAQ
Does the static image coordinate order match OpenLayers?
The static API uses lng,lat in the URL. OpenLayers also uses [lng, lat] for ol.proj.fromLonLat(), so both match GeoJSON order.
Can I overlay markers on the static image?
Yes. The Static Maps API supports marker parameters in the URL. For complex overlays, consider using the interactive map with ol.layer.Vector instead.
Common mistakes
- Reversing longitude and latitude in the static URL: the API expects
lng,lat - Requesting dimensions larger than 2048x2048: the API rejects oversized requests
- Forgetting
ol.proj.fromLonLat()in the OpenLayers view center while using raw[lng, lat]: the map view would be wrong
Build maps using OpenLayers with AI
Generate code like this static map image with openlayers example using the OpenLayers skill in your IDE.
Related Examples
- Initialize an OpenLayers Map
- See how to do this in Leaflet, MapLibre GL JS or MapTiler SDK