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.

To display Maptoolkit vector tiles, pick a style URL and pass it to your map library - the style defines the visual appearance and the tiles are fetched automatically.

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://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=YOUR_API_KEY',
      center: [11.400, 47.268],
      zoom: 12
    });
<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/maplibre-gl.js"></script>
  <script>
    const map = new maplibregl.Map({
      container: 'map',
      // this is the Style URL:
      style: 'https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=YOUR_API_KEY',
      center: [11.400, 47.268],
      zoom: 12
    });
  </script>
</body>
</html>

Terrain & Hillshading

For 3D terrain and hillshading overlays, see Terrain Tiles.

Custom Styles

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