Skip to content
Home
Vector Tiles

Vector Tiles

Vector tiles give you a fully interactive, styleable map in MapLibre GL or Mapbox GL. The map renders on the client side, so you can change styles, add layers, and rotate the map without loading new images.

Use vector tiles when you need smooth zooming, 3D terrain, or custom map styles.

Standard Map Styles


Style Name:
toursprung-terrain
Topographic map with terrain shading
Style URL:
https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=YOUR_API_KEY
Preview toursprung-terrain
Style Name:
toursprung-terrainwinter
Terrain map with winter look
Style URL:
https://static.maptoolkit.net/styles/toursprung/terrainwinter.json?api_key=YOUR_API_KEY
Preview toursprung-terrainwinter
Style Name:
toursprung-light
Minimal light theme
Style URL:
https://static.maptoolkit.net/styles/toursprung/light.json?api_key=YOUR_API_KEY
Preview toursprung-light
Style Name:
toursprung-dark
Dark theme with high contrast
Style URL:
https://static.maptoolkit.net/styles/toursprung/dark.json?api_key=YOUR_API_KEY
Preview toursprung-dark
Style Name:
toursprung-printmaps-green
Green, vegetation-focused style
Style URL:
https://static.maptoolkit.net/styles/toursprung/printmaps-green.json?api_key=YOUR_API_KEY
Preview toursprung-printmaps-green
Style Name:
citymaps2go-Ulmon
Urban street map
Style URL:
https://static.maptoolkit.net/styles/citymaps2go/Ulmon.json?api_key=YOUR_API_KEY
Preview citymaps2go-Ulmon

You can preview all styles at maptoolkit.com/map.

Authentication

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

Use Vector Tiles with MapLibre GL

Use the Style URL from the Standard Map Styles above to set the style of your map.

const map = new maplibregl.Map({
      container: 'map',
      // this is the Style URL:
      style: 'https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=YOUR_API_KEY',
      center: [11.400, 47.268],
      zoom: 12
    });
<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    body { margin: 0; }
    #map { width: 100%; height: 400px; }  
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
  <script>
    const map = new maplibregl.Map({
      container: 'map',
      // this is the Style URL:
      style: 'https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=YOUR_API_KEY',
      center: [11.400, 47.268],
      zoom: 12
    });
  </script>
</body>
</html>

Overlays

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. Used for 3D terrain rendering. 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 });
});

Custom Styles

Custom map styles are available on request. Contact maptoolkit.com for details.