Display a Popup in Maptoolkit Maps JS
A Maptoolkit Popup is a positioned HTML overlay that you place at any longitude and latitude on the map. You set its content with setHTML or setDOMContent and add it to the map with addTo, and it remains anchored to that coordinate as the user pans and zooms. Use popups to display location details, annotations, or any rich content that should appear at a specific 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');
new maptoolkit.Popup({ closeOnClick: false })
.setLngLat([11.39085, 47.27574])
.setHTML('<h3>Innsbruck</h3><p>Capital of Tyrol, Austria</p>')
.addTo(map);<!DOCTYPE html>
<html lang="en">
<head>
<title>Display a Popup - Maptoolkit Maps JS</title>
<meta property="og:description" content="Display a popup on the map at a specific location." />
<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');
new maptoolkit.Popup({ closeOnClick: false })
.setLngLat([11.39085, 47.27574])
.setHTML('<h3>Innsbruck</h3><p>Capital of Tyrol, Austria</p>')
.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
A popup does not need a marker. Construct it, give it a position and content, add it to the map, and it is a positioned HTML overlay anchored to a coordinate.
closeOnClick: false keeps it open when the user clicks elsewhere. The default is true,
which is right for a popup the user opened and wrong for one that is meant to stay, such as a
label on a fixed location.
setHTML inserts raw HTML, so escape anything user-supplied or use setText.
setDOMContent takes a real element, which is the route when the content has its own event
handlers.
The popup positions itself above its coordinate and flips when it would run off the edge of the map, so no manual placement logic is needed.
Next steps
A popup fixed to a coordinate is most useful when it is the only one, as a label on a single location. Once there are several, the next decision is what opens them, usually a click on the map or a marker, since a map covered in permanently open popups is unreadable.
Content is the other direction. The popup takes arbitrary HTML or a real element, so a photo, a link and an action button are all available, and styling it explicitly matters because it inherits the surrounding page’s CSS.