var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/satellite/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY', attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>', maxZoom: 20 }) }) ], view: new ol.View({ center: ol.proj.fromLonLat([2.2945, 48.8584]), zoom: 16 }) });

How it works

MapTiler provides satellite imagery as raster tiles accessible through a standard XYZ URL pattern. The .jpg format is used for satellite imagery as it offers better compression for photographic content.

ol.source.XYZ loads tiles from the URL template, replacing {z}, {x}, and {y} with the current tile coordinates. Setting maxZoom: 20 prevents requests for zoom levels beyond available imagery.

This is a simple raster approach that does not require ol-mapbox-style. It works well for aerial/satellite views where vector styling is not needed.

Key APIs

API	Description	Docs
`ol.source.XYZ`	Load tiles from XYZ URL template	openlayers.org
`ol.layer.Tile`	Tile layer for raster sources	openlayers.org
`ol.View`	Map view with center and zoom	openlayers.org

FAQ

Can I overlay labels on top of satellite imagery?

Yes. Add a second tile layer with a transparent label-only style like https://api.maptiler.com/maps/hybrid/... or overlay vector data.

What zoom levels are available for satellite tiles?

MapTiler satellite imagery is typically available from zoom 0 to 20, though maximum detail varies by location.

Common mistakes

Using .png instead of .jpg for satellite tiles: JPG is more efficient for photographic imagery
Forgetting the API key parameter in the tile URL
Not including the attribution link as required by MapTiler’s terms of use

Satellite Basemap with OpenLayers

How it works

Key APIs

FAQ

Common mistakes

Build maps using OpenLayers with AI

Related Examples