const map = new maplibregl.Map({ container: 'map', style: 'https://api.maptiler.com/maps/satellite/style.json?key=YOUR_MAPTILER_KEY', center: [-73.985, 40.748], zoom: 15, pitch: 45 }); map.addControl(new maplibregl.NavigationControl()); new maplibregl.Marker({ color: '#FF5722' }) .setLngLat([-73.985, 40.748]) .setPopup(new maplibregl.Popup().setHTML('<b>Empire State Building</b>')) .addTo(map);

How it works

MapTiler provides a satellite style that loads aerial imagery as raster tiles. Simply point the style option to the satellite style.json URL. The style includes all necessary tile source configuration.

For satellite imagery with labels overlaid, use the hybrid style instead: maps/hybrid/style.json. This combines aerial photos with road names and place labels.

Adding pitch to the constructor creates a tilted camera view that works well with satellite imagery, giving a sense of depth.

Key APIs

API	Description	Docs
`satellite` style	MapTiler satellite imagery	maptiler.com/maps
`hybrid` style	Satellite with labels	maptiler.com/maps
`map.setStyle()`	Switch to satellite at runtime	maplibre.org docs

FAQ

What is the difference between satellite and hybrid?

satellite shows only imagery. hybrid overlays road and place labels on top of the imagery.

What zoom levels are available?

MapTiler satellite tiles go up to zoom level 20 in most areas, with lower resolution at very high zoom in some remote locations.

Common mistakes

Using streets-v4 style when satellite is intended: the style URL path is maps/satellite/style.json
Expecting vector-quality labels on pure satellite: use the hybrid style for labels

Satellite Basemap with MapLibre GL JS

How it works

Key APIs

FAQ

Common mistakes

Build maps using MapLibre GL JS with AI

Related Examples