Add a Default Marker in Maptoolkit Maps JS
Placing a marker on a Maptoolkit map is done with the Marker class, which provides a styled pin that can be positioned at any longitude and latitude. This example creates a single marker at the center of Innsbruck and adds it to the map with one method call. Markers are the starting point for any project that needs to highlight a location, annotate a point of interest, or show a user’s position 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 }
});
new maptoolkit.Marker()
.setLngLat([11.39085, 47.27574])
.addTo(map);<!DOCTYPE html>
<html lang="en">
<head>
<title>Add a Default Marker - Maptoolkit Maps JS</title>
<meta property="og:description" content="Add a default marker to 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 }
});
new maptoolkit.Marker()
.setLngLat([11.39085, 47.27574])
.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
Three calls and the order matters: construct, setLngLat, then addTo. A marker with no
position has nowhere to be placed, so addTo before setLngLat throws.
setLngLat takes [longitude, latitude]. That is the opposite order from Leaflet, and it is
the single most common reason a marker lands in the wrong hemisphere rather than raising an
error.
A Marker is an HTML element the library keeps positioned over the
canvas, not something drawn into the map. That is why it can hold arbitrary DOM and respond
to normal browser events, and also why hundreds of them get slow: each one is a real element
the browser lays out on every frame. Past roughly a hundred, a circle or symbol layer
renders the same points in WebGL and stays smooth.
Next steps
One marker is rarely the goal. Several means deciding how they are stored and styled, and several hundred means moving to a point layer, which renders in WebGL rather than as DOM elements.
A marker also usually needs to carry something: a label, a photo, a link, or a click that opens a detail panel. If the positions come from addresses rather than coordinates, the Geocoding API is what turns one into the other.