Maptoolkit Maps JS

Display a Vector Map in Maptoolkit Maps JS

Maps JS uses Maptoolkit vector tiles by default - the style URL already points to the vector tile server. Pass your API key to apiKey and the library handles authentication for both the style and the tiles.

const API_KEY = 'YOUR_API_KEY';

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

    map.addControl(new maptoolkit.NavigationControl(), 'top-right');

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vector Tiles - Basic Map - Maptoolkit Maps JS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.css" />
    <style>
        html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
        #map { width: 100%; height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const API_KEY = 'YOUR_API_KEY';

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

    map.addControl(new maptoolkit.NavigationControl(), 'top-right');
</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 a full-page interactive map centered around Zell am See at zoom 11 with navigation controls.

How it works

Maps JS wraps MapLibre GL JS, so everything here has a MapLibre equivalent, with two differences worth knowing.

apiKey is passed as a map option rather than only in the style URL. The library then authorizes the style, the tiles and any Maptoolkit service you call later from that one value, instead of you threading the key through each URL.

attributionControl: { compact: false } is deliberate and worth keeping. The default is compact: true, which collapses the attribution to an “i” button as soon as the map is dragged, at any window width. Our tiles carry an attribution requirement, so the collapsed form is a licensing problem rather than a style preference.

Next steps

A basemap on its own is the starting point. Adding your data is the usual next move, and Maps JS gives you two routes: Marker for a handful of positions where each needs its own DOM, or a GeoJSON source with a circle or symbol layer once there are more than a hundred.

The other direction is to make the map do something rather than show something. The same apiKey already authorizes the Routing API, Geocoding API and Isochrone API, and Maps JS ships controls that wrap the last of those so a reachability layer is a few lines rather than a fetch and a polygon conversion.

MapLibre GL JS