Skip to content

Fit Bounds

Use fitBounds to adjust the map viewport to show a specific geographic area or all markers.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>
        <style>
            body { margin: 0; padding: 0; }
            html, body, #map { height: 100%; }
            #controls {
                position: absolute;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 8px;
                z-index: 1;
            }
            button {
                background: #18345c;
                color: white;
                border: none;
                padding: 10px 16px;
                border-radius: 6px;
                font-size: 13px;
                cursor: pointer;
                font-weight: 500;
            }
            button:hover { background: #2c5282; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <div id="controls">
            <button onclick="fitGermany()">Germany</button>
            <button onclick="fitSwitzerland()">Switzerland</button>
            <button onclick="fitMarkers()">Fit all markers</button>
        </div>
        <script>
            const map = new smartmapsgl.Map({
                apiKey: "[INSERT API-KEY]",
                container: "map",
                center: { lat: 48.5, lng: 10.0 },
                zoom: 5,
                style: smartmapsgl.MapStyle.ESSENTIAL
            });

            // Add some markers
            const cities = [
                { name: "Berlin", coords: [13.405, 52.52] },
                { name: "Munich", coords: [11.582, 48.1351] },
                { name: "Hamburg", coords: [9.9937, 53.5511] },
                { name: "Zurich", coords: [8.5417, 47.3769] },
                { name: "Vienna", coords: [16.3738, 48.2082] }
            ];

            cities.forEach(city => {
                new smartmapsgl.Marker({ color: "#18345c" })
                    .setLngLat(city.coords)
                    .setPopup(new smartmapsgl.Popup({ offset: 25 }).setText(city.name))
                    .addTo(map);
            });

            function fitGermany() {
                map.fitBounds([
                    [5.87, 47.27],  // Southwest
                    [15.04, 55.06]  // Northeast
                ], { padding: 40, duration: 1500 });
            }

            function fitSwitzerland() {
                map.fitBounds([
                    [5.96, 45.82],  // Southwest
                    [10.49, 47.81]  // Northeast
                ], { padding: 40, duration: 1500 });
            }

            function fitMarkers() {
                const bounds = new smartmapsgl.LngLatBounds();
                cities.forEach(city => bounds.extend(city.coords));
                map.fitBounds(bounds, { padding: 60, duration: 1500 });
            }
        </script>
    </body>
</html>