Display Map Navigation Controls in MapLibre GL JS

MapLibre GL JS ships with several built-in control classes including NavigationControl, ScaleControl, FullscreenControl, and GeolocateControl, each of which you add to the map with addControl and a position string. Each control handles its own rendering and interaction and can be positioned at any corner of the map. Use this example as a starting point for any map that needs standard navigation UI elements.

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: { compact: false }
    });

    map.addControl(new maplibregl.NavigationControl(), 'top-right');
    map.addControl(new maplibregl.FullscreenControl(), 'top-right');
    map.addControl(new maplibregl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true }), 'top-right');
    map.addControl(new maplibregl.ScaleControl({ unit: 'metric' }), 'bottom-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>Display Map Navigation Controls - MapLibre GL JS</title>
    <meta property="og:description" content="Add navigation, scale, fullscreen, and geolocate controls to a 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: { compact: false }
    });

    map.addControl(new maplibregl.NavigationControl(), 'top-right');
    map.addControl(new maplibregl.FullscreenControl(), 'top-right');
    map.addControl(new maplibregl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true }), 'top-right');
    map.addControl(new maplibregl.ScaleControl({ unit: 'metric' }), 'bottom-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

Controls are added with addControl, and the second argument is the corner: 'top-right', 'top-left', 'bottom-right' or 'bottom-left'. Several controls in the same corner stack in the order you add them.

Each does one job. NavigationControl gives zoom buttons and a compass, and visualizePitch: true adds a tilt indicator. FullscreenControl expands the container. GeolocateControl asks the browser for the user’s position. ScaleControl draws a scale bar that updates as the user zooms.

ScaleControl takes a unit of 'metric', 'imperial' or 'nautical'. To change the unit later, call setUnit() on the control. If you want both metric and imperial, add two scale controls.

GeolocateControl is the one with conditions attached: browsers only grant geolocation on a secure origin, so it silently does nothing on plain HTTP, and the user can refuse the prompt.

Note that the attribution control is added for you and should stay. Our tiles carry an attribution requirement.

Next steps

Which controls belong on a map depends on what it is for. A small embedded map usually wants none, a full-screen application wants most of them, and adding all four by default only clutters the map.

MapLibre GL JS also has TerrainControl for 3D terrain and GlobeControl for the globe view. Our MapLibre Plugins add a style switcher, the Maptoolkit logo, an isochrone control and a map legend. Custom controls follow the same interface when you need something of your own.