Skip to content
Home
Maptoolkit Maps JS
Examples
Display Map Navigation Controls

Display Map Navigation Controls in Maptoolkit Maps JS

Maptoolkit Maps 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 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');
    map.addControl(new maptoolkit.FullscreenControl(), 'top-right');
    map.addControl(new maptoolkit.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true }), 'top-right');
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Display Map Navigation Controls - Maptoolkit Maps 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://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 }
    });

    map.addControl(new maptoolkit.NavigationControl(), 'top-right');
    map.addControl(new maptoolkit.FullscreenControl(), 'top-right');
    map.addControl(new maptoolkit.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true }), 'top-right');
</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]. Add navigation, scale, fullscreen, and geolocate controls.

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.

The scale bar is part of the attribution control, not a separate one. Maps JS renders a metric scale inside AttributionControl at bottom-right, and the two cannot be separated: attributionControl: false removes the scale and the credit together, and adding an AttributionControl back brings its scale with it. So map.addControl(new maptoolkit.ScaleControl(...)) always gives you a second bar rather than moving or reconfiguring the first.

In practice that means the default metric scale is the one you get. Showing distances in feet or miles instead would mean dropping the attribution control, which the tile licence does not allow, so ScaleControl is only worth adding when you genuinely want a second bar in a different unit alongside the first.

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 because they exist is the most common mistake here.

Maps JS also ships controls beyond the standard set, including terrain, globe, style and isochrone controls, which do in one line what would otherwise be a chunk of code. Custom controls follow the same interface when you need something of your own.

Related Examples

Display Buildings in 3DDisplay Map Performance Metrics