> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt) # Get coordinates of the mouse pointer This example uses the [`mousemove`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:mousemove) event to get two values from the [`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent) object: the x-y `point` coordinates of the mouse cursor on the HTML map container and the `lngLat` coordinates of the cursor on the map. It displays both coordinates in an HTML overlay. > Example code: **JavaScript** ```html Get coordinates of the mouse pointer 





```

**React**

```jsx
import React, { useEffect, useRef, useState } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();
  const [moveEvent, setMoveEvent] = useState();

  useEffect(() => {
    mapRef.current = new mapboxgl.Map({
      // TO MAKE THE MAP APPEAR YOU MUST
      // ADD YOUR ACCESS TOKEN FROM
      // https://account.mapbox.com
      accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/standard',
      center: [-74.5, 40],
      zoom: 9
    });

    mapRef.current.on('mousemove', (e) => {
      setMoveEvent(e);
    });

    return () => mapRef.current.remove();
  }, []);

  return (
    <>
      

      
        {moveEvent && (
          <>
            {JSON.stringify(moveEvent.point)}
            

            {JSON.stringify(moveEvent.lngLat.wrap())}
          
        )}
      

    
  );
};

export default MapboxExample;
```