Add a Canvas Source
A canvas source lets you use a standard HTML canvas element as a raster layer on your map, with updates reflected in real time. You draw onto the canvas with the 2D API and call source.play() to keep the animation running continuously on the map surface. Use this technique to overlay animated overlays, custom data visualizations, or procedurally generated graphics at specific geographic bounds.
const API_KEY = 'YOUR_API_KEY';
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let phase = 0;
function animate() {
ctx.clearRect(0, 0, 400, 400);
for (let i = 0; i < 6; i++) {
const x = 200 + Math.cos(phase + i * Math.PI / 3) * 120;
const y = 200 + Math.sin(phase + i * Math.PI / 3) * 120;
const r = 30 + Math.sin(phase * 2 + i) * 15;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fillStyle = `hsla(${(phase * 60 + i * 60) % 360}, 80%, 55%, 0.7)`;
ctx.fill();
}
phase += 0.02;
requestAnimationFrame(animate);
}
animate();
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [13.5, 47.5],
zoom: 6,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
map.on('load', () => {
map.addSource('canvas-source', {
type: 'canvas',
canvas: 'canvas',
coordinates: [
[9.5, 49.1],
[17.2, 49.1],
[17.2, 46.4],
[9.5, 46.4]
],
animate: true
});
map.addLayer({
id: 'canvas-layer',
type: 'raster',
source: 'canvas-source',
paint: { 'raster-opacity': 0.85 }
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Add a Canvas Source - Maptoolkit Maps JS</title>
<meta property="og:description" content="Use an animated HTML canvas as a map source to draw dynamic content." />
<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>
<canvas id="canvas" style="display:none;" width="400" height="400"></canvas>
<script>
const API_KEY = 'YOUR_API_KEY';
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let phase = 0;
function animate() {
ctx.clearRect(0, 0, 400, 400);
for (let i = 0; i < 6; i++) {
const x = 200 + Math.cos(phase + i * Math.PI / 3) * 120;
const y = 200 + Math.sin(phase + i * Math.PI / 3) * 120;
const r = 30 + Math.sin(phase * 2 + i) * 15;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fillStyle = `hsla(${(phase * 60 + i * 60) % 360}, 80%, 55%, 0.7)`;
ctx.fill();
}
phase += 0.02;
requestAnimationFrame(animate);
}
animate();
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [13.5, 47.5],
zoom: 6,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
map.on('load', () => {
map.addSource('canvas-source', {
type: 'canvas',
canvas: 'canvas',
coordinates: [
[9.5, 49.1],
[17.2, 49.1],
[17.2, 46.4],
[9.5, 46.4]
],
animate: true
});
map.addLayer({
id: 'canvas-layer',
type: 'raster',
source: 'canvas-source',
paint: { 'raster-opacity': 0.85 }
});
});
</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 6, centered around [13.5, 47.5]. Add an animated HTML canvas source displaying rotating colorful circles, overlaid on the bounds of Austria.