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

Add Markers on Map Click

Quick Usage​

Full Working Example​

Code Breakdown​

1. Initialize the Map​

2. Wait for Map to Load​

3. Register the Click Event​

4. The Event Object Explained​

5. Create a Marker at Click Location​

Advanced: Track All Placed Markers​

Advanced: Limit to One Marker​

Advanced: Show Coordinates on Click​

Other Map Events​