---
title: "Customize the AR experience. | Augmented reality | JavaScript maps SDK"
description: "Customize the appearance of the augmented reality map control."
---
> 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.
# Customize the AR experience.
Enhance the AR experience: The [Augmented reality (AR) control](https://docs.maptiler.com/sdk-js/modules/ar/) accepts an option object to customize the look and feel. Compatible with both **WebXR** and **Apple Quick Look**.
Customize the AR control to deliver a personalized immersive experience. So why not give it a try and see the world from a different perspective?
### 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.STREETS.DARK,
zoom: 12,
center: [-116.22335, 51.4117],
});
// Waiting for the map to be ready
map.on("load", (e) => {
const arControl = new MaptilerARControl({
background: `radial-gradient(circle, rgba(230,240,244,1) 1%, rgba(165,184,190,1) 73%, rgba(98,116,121,1) 100%)`,
edgeColor: "#456992",
arButtonContent: ``,
closeButtonContent: ``,
arButtonClassName: "maptiler-ar-enable-button",
closeButtonClassName: "maptiler-ar-close-button",
activateAR: true //When the platform allows automatically activates the AR mode as soon as the data is ready
});
arControl.on("computeStart", (e) => {
overlay.style.display = "inherit";
})
arControl.on("computeEnd", (e) => {
overlay.style.display = "none";
})
map.addControl(arControl, "top-left");
})
```
#### index.html
```html
Customize the AR experience. | NPM example
```
## Related examples
### [Start with AR maps](https://docs.maptiler.com/sdk-js/examples/ar-control/)
Examples
Add an AR control button to map 3D viewports.
### [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.
### [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.
`,
closeButtonContent: `
`,
arButtonClassName: "maptiler-ar-enable-button",
closeButtonClassName: "maptiler-ar-close-button",
activateAR: true //When the platform allows automatically activates the AR mode as soon as the data is ready
});
arControl.on("computeStart", (e) => {
overlay.style.display = "inherit";
})
arControl.on("computeEnd", (e) => {
overlay.style.display = "none";
})
map.addControl(arControl, "top-left");
})
```
#### index.html
```html