Restrict Map Bounds in Maptoolkit Maps JS
map.setMaxBounds in Maptoolkit Maps JS constrains all panning and zooming to a given LngLatBounds rectangle, preventing users from navigating outside the defined region. The map will snap back if the user tries to drag beyond the boundary. Use this in applications focused on a specific city or region, kiosk displays, or anywhere the map data only covers a limited geographic area.
const API_KEY = 'YOUR_API_KEY';
// Restrict to Austria + surrounding area
const bounds = new maptoolkit.LngLatBounds(
[9.5, 46.4],
[17.2, 49.1]
);
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.0, 47.5],
zoom: 6,
maxBounds: bounds,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');<!DOCTYPE html>
<html lang="en">
<head>
<title>Restrict Map Bounds - Maptoolkit Maps JS</title>
<meta property="og:description" content="Restrict the map to a geographic bounding box so the user cannot pan outside it." />
<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';
// Restrict to Austria + surrounding area
const bounds = new maptoolkit.LngLatBounds(
[9.5, 46.4],
[17.2, 49.1]
);
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.0, 47.5],
zoom: 6,
maxBounds: bounds,
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
setMaxBounds constrains panning and zooming to a rectangle. The map resists being dragged
past the edge rather than stopping dead, and zooming out stops where the bounds fill the
container.
Bounds are [[west, south], [east, north]], southwest first, the same order fitBounds
takes.
The container size interacts with this. If the bounds are narrower than the viewport’s aspect ratio, the map cannot fill the container without showing outside them, so the effective minimum zoom moves. On a wide screen a tall, narrow bounding box behaves differently from how it does on a phone.
setMaxBounds(null) clears the restriction. Pair it with minZoom and maxZoom for a map
that should stay within one city.
Next steps
Bounds usually arrive with two companions: a minimum zoom so the user cannot zoom out past the area, and a maximum so they cannot zoom into emptiness. Setting all three together is what makes a regional map feel deliberate rather than broken.
If the data is regional too, serving only that region is the matching step. Connectors can publish your own data for the area rather than shipping a global set the map will never show.