Display Map Performance Metrics
Maptoolkit Maps JS emits load, idle, and render events that you can use to measure how quickly the map initializes and how smoothly it runs on the user’s device. Load time is measured from the start of initialization to the load event, time to idle adds the tile loading phase, and FPS is sampled by counting render events per second. Use this data to identify performance regressions, set benchmarks for new map configurations, or build a real-time performance overlay during development.
const API_KEY = 'YOUR_API_KEY';
const createdAt = performance.now();
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', () => {
document.getElementById('load').textContent = (performance.now() - createdAt).toFixed(0) + ' ms';
});
map.once('idle', () => {
document.getElementById('idle').textContent = (performance.now() - createdAt).toFixed(0) + ' ms';
});
let frameCount = 0;
let fpsStart = performance.now();
map.on('render', () => {
frameCount++;
const elapsed = performance.now() - fpsStart;
if (elapsed >= 1000) {
document.getElementById('fps').textContent = Math.round(frameCount * 1000 / elapsed);
frameCount = 0;
fpsStart = performance.now();
}
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Display Map Performance Metrics - Maptoolkit Maps JS</title>
<meta property="og:description" content="Measure map performance using built-in events." />
<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 { position: absolute; top: 0; bottom: 0; width: 100%; }
#metrics {
position: absolute;
top: 10px;
left: 10px;
background: white;
padding: 10px 14px;
border-radius: .4rem;
font-family: sans-serif;
font-size: 14px;
z-index: 100;
}
#metrics div { margin: 4px 0; }
#metrics span { font-weight: bold; }
</style>
</head>
<body>
<div id="map"></div>
<div id="metrics">
<div>Load: <span id="load">-</span></div>
<div>Idle: <span id="idle">-</span></div>
<div>FPS: <span id="fps">-</span></div>
</div>
<script>
const API_KEY = 'YOUR_API_KEY';
const createdAt = performance.now();
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', () => {
document.getElementById('load').textContent = (performance.now() - createdAt).toFixed(0) + ' ms';
});
map.once('idle', () => {
document.getElementById('idle').textContent = (performance.now() - createdAt).toFixed(0) + ' ms';
});
let frameCount = 0;
let fpsStart = performance.now();
map.on('render', () => {
frameCount++;
const elapsed = performance.now() - fpsStart;
if (elapsed >= 1000) {
document.getElementById('fps').textContent = Math.round(frameCount * 1000 / elapsed);
frameCount = 0;
fpsStart = performance.now();
}
});
</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 12, centered around [11.39085, 47.27574]. Display a performance metrics overlay showing load time, idle time, and FPS.