MapMetrics Atlas API Docs

Appearance

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 ​

javascript
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 ​

javascript
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 ​

javascript
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 ​

PropertyTypeDescription
e.lngLat.lngnumberLongitude of mouse position
e.lngLat.latnumberLatitude of mouse position
e.point.xnumberPixel X position on screen
e.point.ynumberPixel Y position on screen
e.originalEventMouseEventOriginal browser mouse event

Complete Example ​

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link href="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.css" rel="stylesheet" />
    <script src="https://cdn.mapmetrics-atlas.net/versions/latest/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>
jsx
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.