Skip to main content

Fit Bounds

Use map.fitBounds() to instantly frame any geographic data — whether it's a route, a group of stores, or a delivery zone — with perfect padding and smooth animation.

Quick Usage​

const bounds = new bkoigl.LngLatBounds(
  [90.35, 23.7], // southwest
  [90.44, 23.84] // northeast
);

map.fitBounds(bounds, {
  padding: 80,
  duration: 2000,
});

Full Working Example​

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Fit Bounds - Barikoi GL</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Barikoi GL CSS & JS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/bkoi-gl@latest/dist/style/bkoi-gl.css"
    />
    <script src="https://unpkg.com/bkoi-gl@latest/dist/iife/bkoi-gl.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
      }

      #fit-bounds-btn {
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: #0066ff;
        color: white;
        border: none;
        padding: 14px 28px;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        box-shadow: 0 6px 20px rgba(0, 102, 255, 0.3);
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s;
      }
      #fit-bounds-btn:hover {
        background: #0052cc;
        transform: translateX(-50%) translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 102, 255, 0.4);
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <button id="fit-bounds-btn">Show Full Route</button>

    <script>
      const map = new bkoigl.Map({
        container: "map",
        style: "https://map.barikoi.com/styles/barikoi-light/style.json",
        center: [90.393, 23.79],
        zoom: 11,
        accessToken: "YOUR_BARIKOI_API_KEY",
      });

      // Sample route around Dhaka
      const route = {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [90.3613, 23.8039],
            [90.3653, 23.7972],
            [90.3655, 23.7946],
            [90.3652, 23.7924],
            [90.3662, 23.7905],
            [90.3666, 23.788],
            [90.3671, 23.7855],
            [90.3682, 23.7833],
            [90.3685, 23.7818],
            [90.368, 23.779],
            [90.371, 23.7772],
            [90.374, 23.7809],
            [90.379, 23.7819],
            [90.3748, 23.7925],
            [90.3682, 23.807],
            [90.3661, 23.8067],
            [90.3613, 23.8039],
          ],
        },
      };

      map.on("load", () => {
        map.addSource("route", {
          type: "geojson",
          data: route,
        });

        map.addLayer({
          id: "route-line",
          type: "line",
          source: "route",
          paint: {
            "line-color": "#0066ff",
            "line-width": 6,
            "line-opacity": 0.9,
          },
          layout: {
            "line-cap": "round",
            "line-join": "round",
          },
        });

        // Fit bounds when button is clicked
        document
          .getElementById("fit-bounds-btn")
          .addEventListener("click", () => {
            const coordinates = route.geometry.coordinates;

            const bounds = coordinates.reduce((bounds, coord) => {
              return bounds.extend(coord);
            }, new bkoigl.LngLatBounds(coordinates[0], coordinates[0]));

            map.fitBounds(bounds, {
              padding: { top: 100, bottom: 100, left: 100, right: 100 },
              duration: 2200,
              maxZoom: 16,
            });
          });
      });
    </script>
  </body>
</html>

How to Calculate Bounds​

const bounds = coordinates.reduce(
  (b, coord) => b.extend(coord),
  new bkoigl.LngLatBounds(coordinates[0], coordinates[0])
);

Method 2: Manual Southwest & Northeast​

const bounds = new bkoigl.LngLatBounds(
  [90.35, 23.7], // SW corner
  [90.44, 23.84] // NE corner
);

Method 3: From GeoJSON Feature​

const bounds = new bkoigl.LngLatBounds();
geojson.features.forEach((feature) => {
  bkoigl.LngLatBounds.convert(feature.bbox || feature.geometry).extend(bounds);
});

fitBounds Options​

OptionTypeDescriptionRecommended
paddingNumber/ObjectPixels from edge80 or {top:100, left:120, ...}
durationNumberAnimation time (ms)1500–2500
maxZoomNumberPrevent zooming in too far16–17
bearingNumberRotate map during fit0–360
pitchNumber3D tilt0–60
linearBooleanDisable easing (straight animation)false (default)

Advanced: Fit Bounds with Custom Padding Object​

map.fitBounds(bounds, {
  padding: {
    top: 120,
    bottom: 180, // Extra space for bottom UI
    left: 100,
    right: 100,
  },
  duration: 2000,
});

Perfect when you have a bottom sheet, sidebar, or floating controls.

Pro Tip: Auto-fit on Data Load​

map.on("load", () => {
  // Automatically fit bounds after adding data
  map.fitBounds(bounds, { padding: 100, duration: 1800 });
});

Perfect framing, every time!