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.

import * as maplibregl from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.mjs';
    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://styles.maptoolkit.org/summer.json',
      center: [11.40, 47.27],
      zoom: 12,
      // Disable default attribution.
      // MapLibre will now load attribution from the style's .json file.
      attributionControl: { customAttribution: '' }
    });

    // Arabic/Hebrew: MapLibre has no right-to-left support built in, this plugin adds it
    maplibregl.setRTLTextPlugin('https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/dist/mapbox-gl-rtl-text.js', false);

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    html, body { margin: 0; padding: 0; }
    #map { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script type="module">
    import * as maplibregl from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.mjs';
    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://styles.maptoolkit.org/summer.json',
      center: [11.40, 47.27],
      zoom: 12,
      // Disable default attribution.
      // MapLibre will now load attribution from the style's .json file.
      attributionControl: { customAttribution: '' }
    });

    // Arabic/Hebrew: MapLibre has no right-to-left support built in, this plugin adds it
    maplibregl.setRTLTextPlugin('https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/dist/mapbox-gl-rtl-text.js', false);
  </script>
</body>
</html>

Attribution

Every map must show the Maptoolkit logo and the © Maptoolkit © Openstreetmap 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