Change the Default Position for Attribution in Maptoolkit Maps JS
By default, the Maptoolkit attribution control appears in the bottom-right corner of the map. You can move it to any corner by passing a position value such as top-left or bottom-left to the attributionControl option when initializing the map. Use this when other UI elements occupy the default position or when your layout requires the attribution to be in a specific corner to avoid conflicts.
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: false
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
map.addControl(new maptoolkit.AttributionControl({ compact: false }), 'top-left');<!DOCTYPE html>
<html lang="en">
<head>
<title>Change the Default Position for Attribution - Maptoolkit Maps JS</title>
<meta property="og:description" content="Move the attribution control to a different corner of 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: false
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
map.addControl(new maptoolkit.AttributionControl({ compact: false }), 'top-left');
</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
attributionControl accepts an options object at construction, and position moves it to any
corner.
The option worth understanding is compact. Left at its default of true, the attribution
collapses into an “i” button as soon as the map is dragged, at any window width, not only
on small screens. Our tiles carry an attribution requirement, so the collapsed form is a
licensing question rather than a visual preference, which is why every example here sets
compact: false.
Setting attributionControl: false removes it entirely. Doing that means displaying the
required credit somewhere else yourself, not that the requirement goes away.
customAttribution appends your own text alongside the tile attribution, which is the right
place for a third-party dataset you have added.
Next steps
Position is usually decided by what else is on the map, so the next step is placing it against your own interface rather than in isolation: a bottom bar, a sidebar or a floating panel each push it somewhere different, and the other controls compete for the same corners.
If you add data beyond ours,
the credit belongs on the source rather than in
customAttribution, so that it appears and disappears with the layer it covers.