Disable Scroll Zoom
When a map is embedded in a scrollable page, users often accidentally zoom the map instead of scrolling past it. Calling map.scrollZoom.disable() turns off scroll-to-zoom so the map no longer intercepts wheel events. Use this on documentation pages, portfolios, or any page where the map is decorative or secondary, and scrolling the page should take priority over zooming the 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.scrollZoom.disable();<!DOCTYPE html>
<html lang="en">
<head>
<title>Disable Scroll Zoom - Maptoolkit Maps JS</title>
<meta property="og:description" content="Disable scroll wheel zoom so the page scrolls normally over the map." />
<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%; }
#hint {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.6);
color: white;
padding: 8px 16px;
border-radius: .4rem;
font-family: sans-serif;
font-size: 14px;
pointer-events: none;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="hint">Scroll zoom is disabled. Use the buttons to zoom.</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.scrollZoom.disable();
</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], with scroll zoom disabled.