Skip to main content

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/barikoi-light/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​

OptionDescriptionRecommended Value
zoomTarget zoom level14–17
durationAnimation time (ms)1500–2500
speedSpeed of camera movement1.2 (default)
curveHow sharp the turn is1.42 (smooth)
easingTiming functionCubic 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!