Vector Tiles

Vector tiles give you a fully interactive, styleable map that renders on the client. You can zoom smoothly, rotate the map, and restyle layers without loading new images.

To display the Maptoolkit community basemap, pass a style URL to a MapLibre-compatible library. The style defines the appearance, and the tiles load automatically. No API key is required. See Map Styles for the list of available styles and their Style URLs.

Use Vector Tiles with MapLibre GL

Set the style of your map to a community style URL.

const map = new maplibregl.Map({
      container: 'map',
      style: 'https://styles.maptoolkit.org/summer.json',
      center: [11.40, 47.27],
      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',
      style: 'https://styles.maptoolkit.org/summer.json',
      center: [11.40, 47.27],
      zoom: 12
    });
  </script>
</body>
</html>

Attribution

Every map must show the Maptoolkit logo and the © Maptoolkit © OSM copyright line. See Quick Start - Add attribution for the requirements and the logo packages.

Other libraries

The same style URL works in any MapLibre-based library. Libraries without native vector support, such as Leaflet and OpenLayers, render the style through a plugin. See SDKs and Libraries.

Vector Tiles

Use Vector Tiles with MapLibre GL

Attribution

Other libraries

Further reading