Add Markers on Map Click

Let users drop pins anywhere on the map by clicking — perfect for tagging locations, collecting points of interest, or building interactive surveys.

---

Quick Usage

// Add a marker wherever the user clicks
map.on("click", (e) => {
  new bkoigl.Marker()
    .setLngLat(e.lngLat) // Use click coordinates
    .addTo(map);
});

---

Full Working Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Add markers on map click</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>
      // Step 1: Initialize the map
      const map = new bkoigl.Map({
        container: "map",
        style: "https://map.barikoi.com/styles/osm_barikoi_v1/style.json",
        center: [90.36402004477634, 23.823730671721],
        zoom: 6,
        accessToken: "YOUR_BARIKOI_API_KEY",
      });

      // Step 2: Wait for map to load
      map.on("load", () => {
        // Step 3: Register click event on the map
        map.on("click", (e) => {
          // Step 4: Create and add a draggable marker at click location
          const marker = new bkoigl.Marker({ draggable: true })
            .setLngLat(e.lngLat)
            .addTo(map);
        });
      });
    </script>
  </body>
</html>

---

Code Breakdown

1. Initialize the Map

const map = new bkoigl.Map({
  container: "map", // HTML element ID
  style: "https://map.barikoi.com/styles/osm_barikoi_v1/style.json", // Map style
  center: [90.36402004477634, 23.823730671721], // Initial center
  zoom: 6, // Starting zoom
  accessToken: "YOUR_BARIKOI_API_KEY", // Your API key
});

---

2. Wait for Map to Load

map.on("load", () => {
  // Register events here...
});

Why wait? The map must fully load its style and tiles before event handlers work reliably. Always register interactive events inside the load callback.

---

3. Register the Click Event

map.on("click", (e) => {
  // This runs every time the user clicks the map
});

The click event fires whenever the user clicks anywhere on the map. The event object e contains useful information about the click.

---

4. The Event Object Explained

map.on("click", (e) => {
  console.log(e);
});

Key properties of the event object e:

Property	Type	Description
e.lngLat	LngLat	Geographic coordinates of the click { lng, lat }
e.point	Point	Pixel coordinates on the map canvas { x, y }
e.originalEvent	MouseEvent	The original DOM mouse event

// Example: Access click coordinates
map.on("click", (e) => {
  console.log("Longitude:", e.lngLat.lng);
  console.log("Latitude:", e.lngLat.lat);
  console.log("Pixel X:", e.point.x);
  console.log("Pixel Y:", e.point.y);
});

---

5. Create a Marker at Click Location

const marker = new bkoigl.Marker({ draggable: true })
  .setLngLat(e.lngLat) // Use the click coordinates directly
  .addTo(map);

Part	Description
{ draggable: true }	Makes the marker moveable after placement
.setLngLat(e.lngLat)	Positions the marker where the user clicked
.addTo(map)	Displays the marker on the map

tip

You can pass e.lngLat directly to setLngLat() — no need to extract lng and lat separately.

---

Advanced: Track All Placed Markers

Keep references to all markers so you can manage them later:

const markers = []; // Store all markers

map.on("click", (e) => {
  const marker = new bkoigl.Marker({ draggable: true })
    .setLngLat(e.lngLat)
    .addTo(map);

  markers.push(marker); // Add to array

  console.log(`Total markers: ${markers.length}`);
});

// Remove all markers
function clearAllMarkers() {
  markers.forEach((marker) => marker.remove());
  markers.length = 0; // Clear the array
}

---

Advanced: Limit to One Marker

Replace the previous marker when a new one is placed:

let currentMarker = null;

map.on("click", (e) => {
  // Remove existing marker if any
  if (currentMarker) {
    currentMarker.remove();
  }

  // Create new marker
  currentMarker = new bkoigl.Marker({ draggable: true })
    .setLngLat(e.lngLat)
    .addTo(map);
});

---

Advanced: Show Coordinates on Click

Display the coordinates in a popup when clicking:

map.on("click", (e) => {
  const marker = new bkoigl.Marker().setLngLat(e.lngLat).addTo(map);

  // Add a popup with coordinates
  const popup = new bkoigl.Popup({ offset: 25 }).setHTML(`
      <strong>Location</strong><br>
      Lng: ${e.lngLat.lng.toFixed(6)}<br>
      Lat: ${e.lngLat.lat.toFixed(6)}
    `);

  marker.setPopup(popup).togglePopup();
});

---

Other Map Events

Event	Description
click	Single click on the map
dblclick	Double click on the map
contextmenu	Right-click on the map
mousemove	Mouse moves over the map
mouseenter	Mouse enters the map canvas
mouseleave	Mouse leaves the map canvas

---