Skip to content
Home
Terrain Tiles

Terrain Tiles

Terrain tiles provide elevation data and hillshading overlays for 3D map rendering. Add them on top of a vector tile map in MapLibre GL or Mapbox GL.

Authentication

Add your API key as ?api_key=YOUR_API_KEY to every request. See Authentication for details.

Hillshading

A raster hillshading overlay you can add on top of any vector map. Maximum zoom level: 14.

https://vtc-cdn.maptoolkit.net/hillshading/{z}/{x}/{y}.png?api_key=YOUR_API_KEY

Add hillshading as a layer in MapLibre GL:

map.on('load', () => {
  map.addSource('shading', {
    type: 'raster',
    tiles: ['https://vtc-cdn.maptoolkit.net/hillshading/{z}/{x}/{y}.png?api_key=YOUR_API_KEY'],
    tileSize: 256,
    maxzoom: 14
  });

  map.addLayer({
    id: 'hillshading-layer',
    type: 'raster',
    source: 'shading',
    paint: { 'raster-opacity': 0.5 }
  });
});

3D Terrain

Elevation data encoded as a raster image (Terrarium encoding). Used for 3D terrain rendering in MapLibre GL and Mapbox GL. Maximum zoom level: 14.

https://vtc-cdn.maptoolkit.net/terrain/{z}/{x}/{y}.webp?api_key=YOUR_API_KEY

Add 3D terrain in MapLibre GL:

map.on('load', () => {
  map.addSource('terrain-rgb', {
    type: 'raster-dem',
    tiles: ['https://vtc-cdn.maptoolkit.net/terrain/{z}/{x}/{y}.webp?api_key=YOUR_API_KEY'],
    encoding: "terrarium",
    tileSize: 256,
    maxzoom: 14
  });

  map.setTerrain({ source: 'terrain-rgb', exaggeration: 1.5 });
});