MapLibre GL JS

Display Vector Tiles in MapLibre GL JS

On this page

Basic Map

A full-page map using the Summer style:

import * as maplibregl from "maplibre-gl";
    import { LogoControl } from "https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.1.2/dist/maplibre-logo-control.js";

    const map = new maplibregl.Map({
      container: 'map',
      attributionControl: { compact: false },
      style: 'https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=YOUR_API_KEY',
      center: [12.805988, 47.310897],
      zoom: 11
    });

    map.addControl(new LogoControl({ variant: "com" }));

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- MapLibre GL JS 6 is an ES module. The import map tells the browser
       where to load "maplibre-gl" from. -->
  <script type="importmap">
    {
      "imports": {
        "maplibre-gl": "https://cdn.jsdelivr.net/npm/maplibre-gl@6.16.0/dist/maplibre-gl.mjs"
      }
    }
  </script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@6.16.0/dist/maplibre-gl.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.1.2/dist/maplibre-logo-control.css" />
  <style>
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id="map" class="map"></div>
  <script type="module">
    import * as maplibregl from "maplibre-gl";
    import { LogoControl } from "https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.1.2/dist/maplibre-logo-control.js";

    const map = new maplibregl.Map({
      container: 'map',
      attributionControl: { compact: false },
      style: 'https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=YOUR_API_KEY',
      center: [12.805988, 47.310897],
      zoom: 11
    });

    map.addControl(new LogoControl({ variant: "com" }));
  </script>
</body>
</html>

Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.

Use the Maptoolkit Connector. Create an html file of an interactive map using vector tiles and the MapLibre GL JS. Use zoom level 11 and center it around Zell am See. Maptoolkit

How it works

There is only one credential here, and no plugin. MapLibre GL JS reads Mapbox Style JSON natively, and a Maptoolkit style URL is exactly that, so passing the URL to style is the whole integration. The style names its own sources, so the library finds the tile server without you configuring one.

The api_key travels in the style URL and is reused for the tile requests the style triggers. Leave it out and the style itself returns 403, which surfaces as a blank map rather than an error in most setups.

center is [longitude, latitude], the opposite order from Leaflet.

Next steps

You have a basemap, which is the starting point rather than the destination. The usual next move is to put your own data on top of it: a GeoJSON source with a circle or line layer for points and routes, or a symbol layer if the points need icons.

After that it is worth deciding which style you actually want. The seven listed in Vector Tiles differ in more than color: Hiking and Winter carry four hillshade passes and read as mountains, Street is built for dense urban labeling. The style URL also takes a language suffix if your audience is not English-speaking.