Skip to main content

Fly to Location

Use map.flyTo() to create smooth, cinematic transitions to any coordinate. Ideal for navigation buttons, "Locate HQ", or guiding users to important places.

Quick Usage​

map.flyTo({
  center: [90.4071, 23.7925], // Dhaka coordinates
  zoom: 15,
  speed: 1.2,
  curve: 1.42,
  easing: (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2),
});

Full Working Example​

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Fly to Location - 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%;
      }

      #fly-to-dhaka,
      #fly-to-ctg {
        position: absolute;
        bottom: 20px;
        background: #fff;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        z-index: 10;
        transition: all 0.2s;
      }
      #fly-to-dhaka {
        left: 20px;
      }
      #fly-to-ctg {
        left: 180px;
      }

      #fly-to-dhaka:hover,
      #fly-to-ctg:hover {
        background: #0066ff;
        color: white;
        transform: translateY(-2px);
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <button id="fly-to-dhaka">Fly to Dhaka</button>
    <button id="fly-to-ctg">Fly to Chattogram</button>

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

      const barikoiHQ = [90.364037, 23.823602]; // Barikoi HQ
      const chattogram = [91.8127, 22.3569]; // Chattogram City

      map.on("load", () => {
        // Fly to Barikoi HQ
        document
          .getElementById("fly-to-dhaka")
          .addEventListener("click", () => {
            map.flyTo({
              center: barikoiHQ,
              zoom: 17,
              bearing: 30,
              pitch: 45,
              duration: 2500,
              essential: true,
            });

            // Optional: Add a marker on arrival
            setTimeout(() => {
              new bkoigl.Marker({ color: "#0066ff" })
                .setLngLat(barikoiHQ)
                .setPopup(
                  new bkoigl.Popup().setHTML("<strong>Barikoi HQ</strong>")
                )
                .addTo(map)
                .togglePopup();
            }, 2600);
          });

        // Fly to Chattogram
        document.getElementById("fly-to-ctg").addEventListener("click", () => {
          map.flyTo({
            center: chattogram,
            zoom: 13,
            speed: 0.9,
            curve: 1.6,
            easing: (t) => t,
          });
        });
      });
    </script>
  </body>
</html>

Code Breakdown​

1. Basic flyTo​

map.flyTo({
  center: [lng, lat],
  zoom: 15,
  duration: 2000, // milliseconds
});

2. Advanced Animation Options​

OptionTypeDescriptionBest For
zoomNumberTarget zoom level14–18
centerArray[lng, lat] coordinatesRequired
durationNumberAnimation time (ms)1500–3000
speedNumberSpeed multiplier0.6 (slow) – 2 (fast)
curveNumberHow sharp the turn is1.42 (smooth)
bearingNumberMap rotation in degrees0–360
pitchNumberTilt angle (3D effect)0–60
easingFunctionCustom timing functionSmooth cinematic feel

Pro Tip: Smooth Easing Function​

easing: (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);

Advanced: Fly with Marker + Popup​

map.flyTo({ center: coords, zoom: 16, duration: 2500 });

setTimeout(() => {
  new bkoigl.Marker()
    .setLngLat(coords)
    .setPopup(new bkoigl.Popup({ offset: 25 }).setHTML("<h3>Welcome!</h3>"))
    .addTo(map)
    .togglePopup();
}, 2600);

Alternative Methods​

MethodUse Case
map.flyTo()Smooth cinematic animation (recommended)
map.easeTo()Slightly faster, still smooth
map.jumpTo()Instant jump (no animation)
map.fitBounds()Show multiple locations at once