Source types

Quick answer

This tutorial compares the six source types: vector, raster, raster-dem, geojson, image and video, with their key fields such as url, tiles, tileSize, encoding and cluster. It shows how raster imagery layers under vector labels, how terrarium elevation feeds setTerrain, and how GeoJSON clustering and setData work. You will be able to choose the right source and avoid blurry or missing layers.

Last verified 2026-11-03 · MapLibre GL JS 4.x · Cite this page

Key points

Write tiles with {z}/{x}/{y} placeholders or point url at a TileJSON document, never both.
Set tileSize: 256 for standard raster and terrarium elevation tiles to keep sampling correct.
Use encoding: 'terrarium' with raster-dem sources before calling map.setTerrain.

Example

map.addSource('satellite', {
  type: 'raster',
  tiles: [
    'https://example.com/imagery/{z}/{x}/{y}.jpg'
  ],
  tileSize: 256,
  minzoom: 0,
  maxzoom: 18,
  attribution: '影像 &copy; 数据提供方'
});

map.addLayer({
  id: 'satellite-layer',
  type: 'raster',
  source: 'satellite',
  paint: {
    'raster-opacity': 0.9,
    'raster-fade-duration': 150
  }
}, 'roads-line');   // 压在道路图层之下

map.addSource('dem', {
  type: 'raster-dem',
  tiles: [
    'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'
  ],
  encoding: 'terrarium',
  tileSize: 256,
  maxzoom: 14
});

map.setTerrain({ source: 'dem', exaggeration: 1.4 });

Notes

Referencing a source in addLayer before addSource fails with Source "xxx" not found.
Image sources expect corners in top-left, top-right, bottom-right, bottom-left order, otherwise the picture warps silently.

Runnable examples Chinese original All Tutorials

English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.

Cite this page

Atlaslog (2026). Source types. https://www.jingweizhi.com/en/maplibre/tutorials/source-types.html (accessed 2026-11-03).