> 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.

# Map Zoom and Compass Controller

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

```js
// 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:

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

e.g.

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

Sample web page:

<iframe src="https://map-service.mapxus.com/bssww/navigationControl" width="100%" height="550px"></iframe>