Restrict Map Bounds

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/[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>
<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.

Use the Maptoolkit Connector. Create an interactive map with zoom level 6, centered around [13.0, 47.5], restricted to the bounds of Austria ([9.5, 46.4] to [17.2, 49.1]).

Pitch and Bearing Show Polygon Information on Click

Restrict Map Bounds

Related Examples