Skip to content
Home
Maptoolkit Maps JS
Examples
Add a Vector Tile Source

Add a Vector Tile Source in Maptoolkit Maps JS

Vector tile sources let you bring in any Mapbox Vector Tile (MVT) compatible endpoint and style its features directly in Maptoolkit Maps JS. You define the source with a tiles URL and the available source layers, then add fill, line, or symbol layers that reference those source layers. Use this approach to display custom datasets, third-party boundary data, or your own vector tile infrastructure alongside Maptoolkit’s base map.

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: [11.39085, 47.27574],
        zoom: 12,
        attributionControl: { compact: false }
    });

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

    map.on('load', () => {
        // Add Maptoolkit's vector tiles as a new source and style one of its layers
        map.addSource('mtk-vector', {
            type: 'vector',
            url: `https://dataconnector.maptoolkit.net/maptoolkit/mtk-contours-bathymetry.json?api_key=${API_KEY}`
        });

        map.addLayer({
            id: 'contour-lines',
            type: 'line',
            source: 'mtk-vector',
            'source-layer': 'contours',
            minzoom: 10,
            paint: {
                'line-color': '#e0218a',
                // thinner lines, and fade the contours out as you zoom out so it stays uncluttered
                'line-width': ['interpolate', ['linear'], ['zoom'], 10, 0.4, 14, 1],
                'line-opacity': ['interpolate', ['linear'], ['zoom'], 10, 0, 12, 0.9]
            }
        });
    });
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add a Vector Tile Source - Maptoolkit Maps JS</title>
    <meta property="og:description" content="Add a vector tile source to the map and style its layers." />
    <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: [11.39085, 47.27574],
        zoom: 12,
        attributionControl: { compact: false }
    });

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

    map.on('load', () => {
        // Add Maptoolkit's vector tiles as a new source and style one of its layers
        map.addSource('mtk-vector', {
            type: 'vector',
            url: `https://dataconnector.maptoolkit.net/maptoolkit/mtk-contours-bathymetry.json?api_key=${API_KEY}`
        });

        map.addLayer({
            id: 'contour-lines',
            type: 'line',
            source: 'mtk-vector',
            'source-layer': 'contours',
            minzoom: 10,
            paint: {
                'line-color': '#e0218a',
                // thinner lines, and fade the contours out as you zoom out so it stays uncluttered
                'line-width': ['interpolate', ['linear'], ['zoom'], 10, 0.4, 14, 1],
                'line-opacity': ['interpolate', ['linear'], ['zoom'], 10, 0, 12, 0.9]
            }
        });
    });
</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 interactive map with zoom level 7, centered around [11.39085, 47.27574], adding Maptoolkit vector tiles and styling the contour lines layer.

How it works

A vector source is added by TileJSON URL, not a tile template. The library fetches the JSON and reads the tile URLs, zoom range and attribution from it, which is why one url line is enough.

The critical field is source-layer on the layer. A vector tile contains several named layers, and a style layer has to say which one it draws. Omitting it, or naming one that does not exist, renders nothing and reports nothing. source-layer is not needed for GeoJSON sources, which is a common source of confusion.

This example adds contour and bathymetry tiles alongside the basemap, so the same map carries two vector sources at once.

The Schema Reference is the authority on which layers and fields exist.

Next steps

With a second source loaded, the next step is styling it as carefully as the basemap: contours and bathymetry in particular need light, low-contrast colours or they overpower the map they are drawn on.

This is also the pattern for your own data at scale. Connectors turn a database or search index into vector tiles, which is the same addSource call with your URL and the point at which a GeoJSON download stops being viable.

Related Examples

Add a Simple Custom Layer on a GlobeAdd a Video