Get Coordinates of the Mouse Pointer in Maptoolkit Maps JS
Reading the geographic coordinates of the mouse pointer requires listening to the map’s mousemove event and reading e.lngLat from each event object. The coordinates can be displayed in a fixed overlay element and update continuously as the cursor moves. Use this in GIS tools, coordinate pickers, or any developer utility where users need to read the exact geographic position of any point on the map.
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [11.39085, 47.27574],
zoom: 12,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
map.on('mousemove', (e) => {
document.getElementById('coords').textContent =
`Lng: ${e.lngLat.lng.toFixed(6)} Lat: ${e.lngLat.lat.toFixed(6)}`;
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Get Coordinates of the Mouse Pointer - Maptoolkit Maps JS</title>
<meta property="og:description" content="Show the geographic coordinates under the mouse pointer as it moves." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.css" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
#coords {
position: absolute;
bottom: 30px;
left: 10px;
background: white;
padding: 8px 14px;
border-radius: .4rem;
font-family: monospace;
font-size: 13px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="coords">Move the mouse over the map</div>
<script>
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [11.39085, 47.27574],
zoom: 12,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
map.on('mousemove', (e) => {
document.getElementById('coords').textContent =
`Lng: ${e.lngLat.lng.toFixed(6)} Lat: ${e.lngLat.lat.toFixed(6)}`;
});
</script>
</body>
</html>Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.
How it works
mousemove on the map gives e.lngLat, the geographic position under the cursor, already
converted from screen pixels. The map holds the projection, so you never do that maths
yourself.
e.lngLat is an object with lng and lat properties rather than an array, which matters
when passing it to something that expects [lng, lat].
toFixed(6) is roughly 10 centimeters. That is more precision than a cursor has, but it keeps
the readout from jittering in width as the digits change.
mousemove fires very often. Writing to the DOM directly, as here, is fine; making a network
request per event is not, and needs debouncing.
There is no touch equivalent, so a coordinate readout is a desktop affordance.
Next steps
A raw coordinate is rarely the answer someone wants. The Elevation API turns it into a height and the Geocoding API into an address, either of which is more useful in a readout than six decimals.
If the coordinate is meant to be used rather than read, the next step is capturing it on click instead of tracking it on move, and offering a way to copy it.