Add a Vector Tile Source
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/[email protected]/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/[email protected]/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.