Satellite Basemap

Display satellite imagery with optional labels overlay Each library has its own approach: here's how they compare.

Quick Recommendations

Leaflet — A strong choice for quick satellite imagery embeds using simple raster tile URL templates with optional labels toggle via layer controls.

MapLibre GL JS — Best when you need vector label overlays on satellite imagery with crisp text rendering at any zoom level.

OpenLayers — Ideal when satellite tiles need to integrate with WMS overlays or other OGC raster services.

MapTiler SDK — Works best for the simplest setup: one MapStyle.SATELLITE constant replaces the entire style URL.

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	12	16	11

Code Snippets

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

Leaflet14 linesShow code

arrow_forwardFull example

const satellite = L.tileLayer('https://api.maptiler.com/maps/satellite/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY', {
  tileSize: 256,
  attribution: '&copy; <a href="https://www.maptiler.com/">MapTiler</a>'
});
const hybrid = L.tileLayer('https://api.maptiler.com/maps/hybrid/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY', {
  tileSize: 256,
  attribution: '&copy; <a href="https://www.maptiler.com/">MapTiler</a>'
});
const streets = 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>'
});
const map = L.map('map', { layers: [hybrid] }).setView([41.9028, 12.4964], 12);
L.control.layers({ 'Satellite': satellite, 'Hybrid (labels)': hybrid, 'Streets': streets }).addTo(map);

MapLibre GL JS12 linesShow code

arrow_forwardFull example

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);

OpenLayers16 linesShow code

arrow_forwardFull example

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: '&copy; <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
  })
});

MapTiler SDK11 linesShow code

arrow_forwardFull example

maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
  container: 'map',
  style: maptilersdk.MapStyle.SATELLITE,
  center: [12.4964, 41.9028],
  zoom: 15
});
new maptilersdk.Marker({ color: '#9C27B0' })
  .setLngLat([12.4922, 41.8902])
  .setPopup(new maptilersdk.Popup().setHTML('<b>Colosseum</b>'))
  .addTo(map);

Things to Know

Implementation-specific details that matter for satellite basemap.

Leaflet

Satellite tiles are raster-only; labels overlay requires a separate transparent tile layer on top.

MapLibre GL JS

MapTiler satellite style includes vector labels by default; you get crisp text that rotates with the map.

OpenLayers

Can use either raster XYZ tiles or vector style via ol-mapbox-style for the satellite basemap.

MapTiler SDK

Uses the MapStyle.SATELLITE constant, which automatically loads the correct MapTiler style with vector labels.

Which Library to Use?

Leaflet

Display MapTiler satellite imagery with an optional labels overlay toggle using Leaflet tile layer controls.

check_circle

A strong choice for quick satellite imagery embeds using simple raster tile URL templates with optional labels toggle via layer controls.

MapLibre GL JS

Display a satellite imagery basemap using the MapTiler satellite style.

check_circle

Best when you need vector label overlays on satellite imagery with crisp text rendering at any zoom level.

OpenLayers

Display MapTiler satellite imagery as a raster tile layer in OpenLayers.

check_circle

Ideal when satellite tiles need to integrate with WMS overlays or other OGC raster services.

MapTiler SDK

Display a satellite imagery basemap using the MapStyle.SATELLITE constant.

check_circle

Works best for the simplest setup: one MapStyle.SATELLITE constant replaces the entire style URL.

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