For AI agents: the complete documentation index is available at /core-sdk/map/web/llms.txt, the full documentation bundle is available at /core-sdk/map/web/llms-full.txt, and this page is available as Markdown at /core-sdk/map/web/v10/02-map-controllers/04-map-zoom-and-compass-controller.md.

Map Zoom and Compass Controller

The map zoom and compass controllers are contained in NavigationControl, to add:

// init maplibre-gl map
const maplibreMap = new maplibregl.Map({
    container: 'map'
});
// maplibre listener
maplibreMap.on('load', function() {
  // add navigation control
  maplibreMap.addControl(new maplibregl.NavigationControl());
});

The map zoom and compass controllers are default placed at the top-right of the map, you can also place them any corner on the map:

options('top-left', 'top-right', 'bottom-left', 'bottom-right');

e.g.

maplibreMap.addControl(new maplibregl.NavigationControl(), 'bottom-right');

Sample web page:

#Map Zoom and Compass Controller

Map Zoom and Compass Controller