Add a Raster Tile Source in Maptoolkit Maps JS
Raster tile sources let you overlay any XYZ or TMS tile service on top of your base map in Maptoolkit Maps JS. You define the source with a tiles URL template and add a raster layer to control opacity, brightness, and other visual properties. Use this approach to add satellite imagery, weather overlays, historical maps, or any third-party raster tile service alongside your vector layers.
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tiles: [`https://rtc-cdn.maptoolkit.net/rtc/maptoolkit-maptoolkit.summer/{z}/{x}/{y}.png?api_key=${API_KEY}`],
tileSize: 256
}
},
layers: [{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles'
}]
},
center: [13.0, 47.5],
zoom: 7,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');<!DOCTYPE html>
<html lang="en">
<head>
<title>Add a Raster Tile Source - Maptoolkit Maps JS</title>
<meta property="og:description" content="Add a raster tile source and layer to the map." />
<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: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tiles: [`https://rtc-cdn.maptoolkit.net/rtc/maptoolkit-maptoolkit.summer/{z}/{x}/{y}.png?api_key=${API_KEY}`],
tileSize: 256
}
},
layers: [{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles'
}]
},
center: [13.0, 47.5],
zoom: 7,
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.
How it works
This builds a style object from scratch rather than loading a style URL. version: 8
with one raster source and one raster layer is the smallest valid style there is, and it
produces a plain image map with no vector data, no labels and nothing to restyle.
That is the trade-off with raster: it is any XYZ service, ours or a third party’s, with no client-side styling. Use it for imagery, scanned maps or a service that only publishes images.
tileSize: 256 has to match what the service actually serves. Declaring 256 for 512 px tiles
gives a map that looks correct but is blurry and labelled at the wrong scale.
Raster tiles carry no attribution of their own, unlike a vector style, so the attribution
field is yours to set.
Next steps
The usual next step is putting the imagery in context rather than using it alone: labels and roads from a vector style above it, so the map is both photographic and navigable.
Opacity and a toggle are worth adding early too. Imagery is often a layer people want to compare against the normal map rather than replace it with, and a slider does that in a few lines.