Click Marker to Center Map

Enable users to click any marker and have the map elegantly fly to that location. Perfect for directories, store locators, or exploring multiple points of interest.

---

Quick Usage

map.on("click", "your-layer-id", (e) => {
  map.flyTo({
    center: e.features[0].geometry.coordinates,
    zoom: 15,
    duration: 2000,
  });
});

---

Full Working Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Click Marker to Center Map - 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%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      const map = new bkoigl.Map({
        container: "map",
        style: "https://map.barikoi.com/styles/osm_barikoi_v1/style.json",
        center: [90.399994, 23.792446], // Dhaka area
        zoom: 10,
        accessToken: "YOUR_BARIKOI_API_KEY",
      });

      map.on("load", async () => {
        // Load custom marker icon
        const image = await map.loadImage(
          "https://static.vecteezy.com/system/resources/previews/017/178/337/non_2x/location-map-marker-icon-symbol-on-transparent-background-free-png.png",
        );
        map.addImage("custom-marker", image.data);

        // Add GeoJSON source with multiple points
        map.addSource("points", {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [90.370398, 23.802618],
                },
                properties: { name: "Uttara" },
              },
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [90.383453, 23.764789],
                },
                properties: { name: "Gulshan" },
              },
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [90.423704, 23.797641],
                },
                properties: { name: "Dhanmondi" },
              },
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [90.361214, 23.750083],
                },
                properties: { name: "Mirpur" },
              },
            ],
          },
        });

        // Add symbol layer with custom icon
        map.addLayer({
          id: "poi-markers",
          type: "symbol",
          source: "points",
          layout: {
            "icon-image": "custom-marker",
            "icon-size": 0.04,
            "icon-allow-overlap": true,
          },
        });

        // Click: Fly to the clicked marker
        map.on("click", "poi-markers", (e) => {
          const coordinates = e.features[0].geometry.coordinates;
          const name = e.features[0].properties.name || "Location";

          map.flyTo({
            center: 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,
          });

          // Optional: Show popup
          new bkoigl.Popup()
            .setLngLat(coordinates)
            .setHTML(`<strong>${name}</strong>`)
            .addTo(map);
        });

        // Change cursor on hover
        map.on("mouseenter", "poi-markers", () => {
          map.getCanvas().style.cursor = "pointer";
        });

        map.on("mouseleave", "poi-markers", () => {
          map.getCanvas().style.cursor = "";
        });
      });
    </script>
  </body>
</html>

---

Code Breakdown

1. Load Custom Icon

const image = await map.loadImage("url-to-icon.png");
map.addImage("custom-marker", image.data);

Use any PNG with transparency for beautiful custom markers.

2. Add Points via GeoJSON

map.addSource("points", { type: "geojson", data: { ... } });

Best practice: Use GeoJSON for dynamic, scalable point data.

3. Create Clickable Symbol Layer

map.addLayer({
  id: "poi-markers",
  type: "symbol",
  source: "points",
  layout: { "icon-image": "custom-marker" },
});

Only symbol layers with icon-image are clickable by default.

4. Fly to Location on Click

map.on("click", "poi-markers", (e) => {
  map.flyTo({
    center: e.features[0].geometry.coordinates,
    zoom: 15,
    duration: 2000,
  });
});

flyTo gives a smooth cinematic animation. Use easeTo or jumpTo for alternatives.

---

flyTo Options

Option	Description	Recommended Value
zoom	Target zoom level	14–17
duration	Animation time (ms)	1500–2500
speed	Speed of camera movement	1.2 (default)
curve	How sharp the turn is	1.42 (smooth)
easing	Timing function	Cubic Bézier (above)

---

Advanced: Highlight Clicked Marker

let activeMarker = null;

map.on("click", "poi-markers", (e) => {
  const coords = e.features[0].geometry.coordinates;

  // Change icon size on click
  map.setLayoutProperty("poi-markers", "icon-size", 0.04);

  if (activeMarker) {
    map.setLayoutProperty("poi-markers", "icon-size", 0.04);
  }

  // Enlarge clicked one
  map.setLayoutProperty("poi-markers", "icon-size", [
    "match",
    ["get", "name"],
    e.features[0].properties.name,
    0.12,
    0.04,
  ]);

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

---

Bonus: Fit Bounds for Multiple Points

map.fitBounds(
  [
    [90.34, 23.7],
    [90.44, 23.84],
  ],
  { padding: 80, duration: 2000 },
);

Great for "Show all locations" button.

---

Happy mapping!