Change the Default Position for Attribution in MapLibre GL 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 maplibregl.Map({
        container: 'map',
        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 maplibregl.NavigationControl(), 'top-right');
    map.addControl(new maplibregl.AttributionControl({ compact: false }), 'top-left');

import { LogoControl } from "https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.1.2/dist/maplibre-logo-control.js";
    map.addControl(new LogoControl({ variant: "com" }));

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Change the Default Position for Attribution - MapLibre GL 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://cdn.jsdelivr.net/npm/maplibre-gl@5.6.1/dist/maplibre-gl.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.6.1/dist/maplibre-gl.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.1.2/dist/maplibre-logo-control.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 maplibregl.Map({
        container: 'map',
        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 maplibregl.NavigationControl(), 'top-right');
    map.addControl(new maplibregl.AttributionControl({ compact: false }), 'top-left');
</script>
<script type="module">
    import { LogoControl } from "https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.1.2/dist/maplibre-logo-control.js";
    map.addControl(new LogoControl({ variant: "com" }));
</script>
</body>
</html>

How it works

attributionControl accepts an options object at construction, and position moves it to any corner.

The option worth understanding is compact. The map’s own attribution control defaults to compact: true, so the credit collapses into an “i” button as soon as the map is dragged, at any window width. A control you create with new maplibregl.AttributionControl() and no compact option collapses only when the map is 640 pixels wide or less. 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.