Skip to main content

Get Mouse Position

Track the exact geographic coordinates (lng, lat) of the mouse as it moves or clicks on the map. Perfect for debugging, reverse geocoding, coordinate pickers, or advanced interactions.

Quick Usage​

map.on("mousemove", (e) => {
  console.log("LngLat:", e.lngLat.lng.toFixed(6), e.lngLat.lat.toFixed(6));
});

map.on("click", (e) => {
  console.log("Clicked at:", e.lngLat.toArray());
});

e.lngLat → { lng: 90.123456, lat: 23.123456 }
e.point → { x: 512, y: 384 } (pixel coordinates)

Full Working Example​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Get Mouse Position</title>
    <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>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
      #mouse-info {
        position: absolute;
        bottom: 24px;
        left: 8px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        font-family: Arial, sans-serif;
        border-radius: 6px;
        z-index: 200;
        min-width: 180px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      }
      #mouse-info h3 {
        margin: 0 0 6px 0;
        font-size: 14px;
        color: #acfcd9;
      }
      #mouse-info div {
        font-size: 13px;
        margin-bottom: 8px;
        word-break: break-all;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <div id="mouse-info">
      <h3>Mouse Hover Position</h3>
      <div id="mouse-hover-pos">Move mouse over map...</div>

      <h3>Mouse Click Position</h3>
      <div id="mouse-click-pos">Click on map...</div>
    </div>

    <script>
      const map = new bkoigl.Map({
        container: "map",
        style: "https://map.barikoi.com/styles/barikoi-light/style.json",
        center: [90.37008547313786, 23.79253097629713],
        zoom: 11,
        accessToken: "YOUR_BARIKOI_API_KEY",
      });

      map.on("load", () => {
        map.on("mousemove", (e) => {
          document.getElementById(
            "mouse-hover-pos"
          ).textContent = `LngLat: ${e.lngLat.lng.toFixed(
            6
          )}, ${e.lngLat.lat.toFixed(6)}`;
        });

        map.on("click", (e) => {
          const { lng, lat } = e.lngLat;
          document.getElementById(
            "mouse-click-pos"
          ).textContent = `Clicked: ${lng.toFixed(6)}, ${lat.toFixed(6)}`;
        });
      });
    </script>
  </body>
</html>

Event Object Properties​

PropertyTypeDescription
e.lngLatLngLatGeographic coordinates
e.pointPointPixel coordinates on map canvas
e.originalEventMouseEventRaw DOM mouse event
map.on("mousemove", (e) => {
  console.log("Geo:", e.lngLat.toArray());
  console.log("Pixel:", e.point);
});

Common Use Cases​

Use CaseCode Snippet
Reverse geocoding on clickfetch('/api/reverse?lng=${lng}&lat=${lat}')
Coordinate picker toolSave e.lngLat to form input
Debug map interactionsLog e.point for UI testing
Draw on clickUse e.lngLat to add markers/lines

Advanced: Copy to Clipboard on Click​

map.on("click", (e) => {
  const coords = `${e.lngLat.lng.toFixed(6)}, ${e.lngLat.lat.toFixed(6)}`;
  navigator.clipboard.writeText(coords);
  alert("Coordinates copied: " + coords);
});

Know exactly where your users are pointing — always!