Get Coordinates of the Mouse Pointer
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/[email protected]/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/[email protected]/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.
Use the Maptoolkit Connector. Create an interactive map with zoom level 12, centered around [11.39085, 47.27574]. Display the geographic coordinates under the mouse pointer as it moves.