---
title: "How to trigger actions in the AR control | Augmented reality | JavaScript maps SDK"
description: "Trigger AR map control actions using keyboard input."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# How to trigger actions in the AR control
Learn how to activate functions in the [Augmented reality (AR) control](https://docs.maptiler.com/sdk-js/modules/ar/) by utilizing the keyboard. This method will enable you to generate a three-dimensional viewport model through augmented reality (AR), which includes not only a 3D terrain but also any additional layers you have incorporated. This feature is compatible with both **WebXR** and **Apple Quick Look** platforms.
### NPM module setup
```bash
npm install --save @maptiler/sdk @maptiler/ar-control
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { MaptilerARControl } from '@maptiler/ar-control';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
// Creating a map
const map = new Map({
container: 'map',
style: MapStyle.SATELLITE,
zoom: 12,
center: [-116.22335, 51.4117],
});
// Waiting for the map to be ready
map.on("load", (e) => {
const arControl = new MaptilerARControl({
showButton: false,
});
document.addEventListener('keypress', async (event) => {
console.log(event.key);
if (event.key === "a") {
await arControl.run()
}
if (event.key === "q") {
try{
await arControl.close();
} catch(e) {}
}
}, false);
arControl.on("computeStart", (e) => {
overlay.style.display = "inherit";
})
arControl.on("computeEnd", (e) => {
overlay.style.display = "none";
})
map.addControl(arControl, "top-left");
})
```
#### index.html
```html
How to trigger actions in the AR control | NPM example
computing model
Press the A key to show the AR model, and Q to close it.
Press the A key to show the AR model, and Q to close it.
```
## Related examples
### [Custom AR experience](https://docs.maptiler.com/sdk-js/examples/ar-control-custom/)
Examples
Customize the appearance of the augmented reality map control.
### [Add GeoJSON to AR maps](https://docs.maptiler.com/sdk-js/examples/ar-control-geojson-line/)
Examples
Display GeoJSON biking or hiking routes in AR maps.
### [Start with AR maps](https://docs.maptiler.com/sdk-js/examples/ar-control/)
Examples
Add an AR control button to map 3D viewports.
### [QR code to access AR maps](https://docs.maptiler.com/sdk-js/examples/ar-control-qr/)
Examples
Provide a QR code to access mobile AR maps.