Display a Popup on Click in Maptoolkit Maps JS
Showing a popup on any map click requires listening to the map’s click event and using the event’s lngLat property to position a new Popup at the cursor’s geographic coordinates. The popup is removed before a new one is created so only one is visible at a time. Use this pattern as the foundation for coordinate pickers, location inspectors, or any tool where clicking the map should reveal information about that point.
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('click', (e) => {
new maptoolkit.Popup()
.setLngLat(e.lngLat)
.setHTML(`<strong>Coordinates:</strong><br>${e.lngLat.lng.toFixed(5)}, ${e.lngLat.lat.toFixed(5)}`)
.addTo(map);
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Display a Popup on Click - Maptoolkit Maps JS</title>
<meta property="og:description" content="Display a popup with coordinates when clicking anywhere on the map." />
<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%; }
</style>
</head>
<body>
<div id="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('click', (e) => {
new maptoolkit.Popup()
.setLngLat(e.lngLat)
.setHTML(`<strong>Coordinates:</strong><br>${e.lngLat.lng.toFixed(5)}, ${e.lngLat.lat.toFixed(5)}`)
.addTo(map);
});
</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
The handler listens on the map rather than a layer, so it fires for any click, including empty ocean. That is deliberate here: the popup reports the coordinate, which exists everywhere.
e.lngLat is the geographic position of the click, already converted from pixels. The
companion e.point gives the pixel position, which is what queryRenderedFeatures needs.
This creates a new popup on every click and never removes the old one, so clicking ten
times leaves ten popups. That is fine for a demonstration and wrong for an application: keep
one instance and call setLngLat and setHTML on it instead, as the hover example does.
Next steps
Reporting a coordinate is a demonstration; a click is usually meant to find something. The next step is querying what was clicked and showing that instead, which turns the popup from a readout into an answer.
If the coordinate is the point, the Geocoding API turns it into an address and the Elevation API into a height, both of which are more useful in a popup than six decimal places.