Get Coordinates of the Mouse Pointer

Display real-time longitude and latitude coordinates as the user moves the mouse over the map.

Move your mouse over the map...

How It Works

Listen to the mousemove event on the map — each event includes a lngLat property with the current mouse position as geographic coordinates.

Basic Usage

map.on('mousemove', (e) => {
  const lng = e.lngLat.lng;
  const lat = e.lngLat.lat;
  console.log(`Mouse at: ${lng.toFixed(6)}, ${lat.toFixed(6)}`);
});

Display in a UI Element

const display = document.getElementById('coordinates');

map.on('mousemove', (e) => {
  display.textContent = `Lng: ${e.lngLat.lng.toFixed(6)}, Lat: ${e.lngLat.lat.toFixed(6)}`;
});

Get Coordinates on Click

map.on('click', (e) => {
  const { lng, lat } = e.lngLat;
  console.log(`Clicked at: ${lng}, ${lat}`);

  // Add a marker at click location
  new mapmetricsgl.Marker()
    .setLngLat([lng, lat])
    .addTo(map);
});

Event Properties

Property	Type	Description
e.lngLat.lng	number	Longitude of mouse position
e.lngLat.lat	number	Latitude of mouse position
e.point.x	number	Pixel X position on screen
e.point.y	number	Pixel Y position on screen
e.originalEvent	MouseEvent	Original browser mouse event

Complete Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>
    <style>
      #map { height: 500px; width: 100%; }
      #coords {
        margin-top: 8px;
        padding: 8px 12px;
        background: #1e293b;
        color: #e2e8f0;
        border-radius: 6px;
        font-family: monospace;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="coords">Move your mouse over the map...</div>
    <script>
      const map = new mapmetricsgl.Map({
        container: 'map',
        style: '<StyleFile_URL_with_Token>',
        center: [2.349902, 48.852966],
        zoom: 11
      });

      map.addControl(new mapmetricsgl.NavigationControl(), 'top-right');

      const coordsEl = document.getElementById('coords');

      // Update on mouse move
      map.on('mousemove', (e) => {
        coordsEl.textContent = `Lng: ${e.lngLat.lng.toFixed(6)}  |  Lat: ${e.lngLat.lat.toFixed(6)}`;
      });

      // Show clicked coordinates
      map.on('click', (e) => {
        coordsEl.innerHTML = `📍 Clicked:  Lng: ${e.lngLat.lng.toFixed(6)}  |  Lat: ${e.lngLat.lat.toFixed(6)}`;

        // Optional: Add marker at click location
        new mapmetricsgl.Marker({ color: '#ef4444' })
          .setLngLat(e.lngLat)
          .addTo(map);
      });
    </script>
  </body>
</html>

import React, { useEffect, useRef, useState } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const MouseCoordinates = () => {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const [coords, setCoords] = useState({ lng: null, lat: null, clicked: false });

  useEffect(() => {
    if (map.current) return;

    map.current = new mapmetricsgl.Map({
      container: mapContainer.current,
      style: '<StyleFile_URL_with_Token>',
      center: [2.349902, 48.852966],
      zoom: 11
    });

    map.current.addControl(new mapmetricsgl.NavigationControl(), 'top-right');

    map.current.on('mousemove', (e) => {
      setCoords({ lng: e.lngLat.lng.toFixed(6), lat: e.lngLat.lat.toFixed(6), clicked: false });
    });

    map.current.on('click', (e) => {
      setCoords({ lng: e.lngLat.lng.toFixed(6), lat: e.lngLat.lat.toFixed(6), clicked: true });
    });

    return () => { map.current?.remove(); map.current = null; };
  }, []);

  return (
    <div>
      <div ref={mapContainer} style={{ height: '500px', width: '100%' }} />
      <div style={{ marginTop: '8px', padding: '8px 12px', background: '#1e293b', color: '#e2e8f0', borderRadius: '6px', fontFamily: 'monospace', fontSize: '14px' }}>
        {coords.lng
          ? <>{coords.clicked ? '📍 Clicked: ' : ''} Lng: {coords.lng}  |  Lat: {coords.lat}</>
          : 'Move your mouse over the map...'
        }
      </div>
    </div>
  );
};

export default MouseCoordinates;

---

For more information, visit the MapMetrics GitHub repository.