Skip to main content

Add Draggable Marker

Let users drag a marker to select a location — perfect for address pickers, location selection, and delivery drop-off points.

Quick Usage​

// Create a draggable marker
const marker = new bkoigl.Marker({ draggable: true })
  .setLngLat([90.364, 23.8237])
  .addTo(map);

// Listen for when the user stops dragging
marker.on("dragend", () => {
  const lngLat = marker.getLngLat();
  console.log(`New position: ${lngLat.lng}, ${lngLat.lat}`);
});

Full Working Example​

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Add a draggable marker</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%;
      }

      /* Floating coordinates display box */
      .coordinates {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        position: absolute;
        bottom: 80px;
        left: 10px;
        padding: 5px 10px;
        margin: 0;
        font-size: 11px;
        line-height: 18px;
        border-radius: 3px;
        display: none; /* Hidden until first drag */
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <!-- Coordinates display element -->
    <pre id="coordinates" class="coordinates"></pre>

    <script>
      // Get reference to the coordinates display element
      const coordinates = document.getElementById("coordinates");

      // 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: 12,
        accessToken: "YOUR_BARIKOI_API_KEY",
      });

      // Step 2: Create a draggable marker
      const marker = new bkoigl.Marker({ draggable: true })
        .setLngLat([90.36402004477634, 23.823730671721])
        .addTo(map);

      // Step 3: Handle the dragend event
      function onDragEnd() {
        const lngLat = marker.getLngLat();
        coordinates.style.display = "block";
        coordinates.innerHTML = `Longitude: ${lngLat.lng}<br />Latitude: ${lngLat.lat}`;
      }

      // Step 4: Attach the event listener
      marker.on("dragend", onDragEnd);
    </script>
  </body>
</html>

Code Breakdown​

1. Coordinates Display Styling​

.coordinates {
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  color: #fff; /* White text */
  position: absolute; /* Float above the map */
  bottom: 80px; /* Position from bottom */
  left: 10px; /* Position from left */
  padding: 5px 10px;
  font-size: 11px;
  line-height: 18px;
  border-radius: 3px;
  display: none; /* Hidden initially */
  width: 200px;
}

This creates a floating info box that appears after the user drags the marker. It's positioned in the bottom-left corner of the map.

2. Create a Draggable Marker​

const marker = new bkoigl.Marker({ draggable: true })
  .setLngLat([90.36402004477634, 23.823730671721])
  .addTo(map);
PartDescription
{ draggable: true }Enables drag functionality on the marker
.setLngLat([lng, lat])Sets initial marker position
.addTo(map)Adds the marker to the map
tip

When draggable: true, the cursor changes to a grab hand when hovering over the marker.

3. Handle the Drag End Event​

function onDragEnd() {
  // Get the marker's current position after dragging
  const lngLat = marker.getLngLat();

  // Show the coordinates display
  coordinates.style.display = "block";

  // Update the display with new coordinates
  coordinates.innerHTML = `Longitude: ${lngLat.lng}<br />Latitude: ${lngLat.lat}`;
}

What getLngLat() returns:

{
  lng: 90.36402004477634,  // Longitude
  lat: 23.823730671721     // Latitude
}

4. Attach the Event Listener​

marker.on("dragend", onDragEnd);

This registers the onDragEnd function to be called whenever the user finishes dragging the marker.

Available Marker Events​

EventWhen It Fires
dragstartUser starts dragging the marker
dragContinuously while marker is being dragged
dragendUser releases the marker after dragging

Example: Track All Drag Events​

marker.on("dragstart", () => {
  console.log("Started dragging");
});

marker.on("drag", () => {
  const pos = marker.getLngLat();
  console.log(`Dragging: ${pos.lng}, ${pos.lat}`);
});

marker.on("dragend", () => {
  const pos = marker.getLngLat();
  console.log(`Finished at: ${pos.lng}, ${pos.lat}`);
});

Practical Use Case: Address Picker​

Combine with reverse geocoding to get the address at the marker's location:

marker.on("dragend", async () => {
  const { lng, lat } = marker.getLngLat();

  // Call Barikoi Reverse Geocode API
  const response = await fetch(
    `https://barikoi.xyz/v2/api/search/reverse/geocode?longitude=${lng}&latitude=${lat}&api_key=YOUR_API_KEY`,
  );
  const data = await response.json();

  console.log("Address:", data.place.address);
});