Display a Popup
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/[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%; }
</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.
Use the Maptoolkit Connector. Create an interactive map with zoom level 12, centered around [11.39085, 47.27574]. Display a popup at the center with information about Innsbruck.