---
title: "Include a QR code to access your augmented reality (AR) maps on a mobile device | Augmented reality | JavaScript maps SDK"
description: "Provide a QR code to access mobile AR maps."
---
> 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.
# Include a QR code to access your augmented reality (AR) maps on a mobile device
To enhance the user experience, it is possible to incorporate a QR code picture alongside the three-dimensional model. This will enable users to effortlessly access the augmented reality model on their mobile device or AR viewer.
The [Augmented reality (AR) control](https://docs.maptiler.com/sdk-js/modules/ar/) adds a button on your map that enables the creation of a 3D representation of the current view, complete with 3D terrain and any additional layers you have applied. This functionality is compatible with **WebXR** or **Apple Quick Look**.
In this example, we employed the `qrcode-generator` library to produce the QR code. However, you have the flexibility to utilize your preferred approach for generating the QR code image.
### 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';
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
function generateQRCode() {
// https://github.com/kazuhikoarase/qrcode-generator/tree/master/js
const qr = qrcode(0, "M");
qr.addData(location.href);
qr.make();
return qr.createDataURL(10, 10);
}
// Creating a map
const map = new Map({
container: 'map',
style: MapStyle.OUTDOOR,
zoom: 12,
center: [-116.22335, 51.4117],
hash: true,
});
// Waiting for the map to be ready
map.on("load", (e) => {
const qrCodeOptions = isMobile ? {activateAR: true} : {
logo: generateQRCode(),
logoClass: "qr-code",
activateAR: true
}
const arControl = new MaptilerARControl(qrCodeOptions);
arControl.on("computeStart", (e) => {
overlay.style.display = "inherit";
if (!isMobile) {
arControl.updateLogo(generateQRCode())
}
})
arControl.on("computeEnd", (e) => {
overlay.style.display = "none";
})
map.addControl(arControl, "top-left");
})
```
#### index.html
```html
Include a QR code to access your augmented reality (AR) maps on a mobile device | NPM example
```
## 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.
### [Trigger AR control actions](https://docs.maptiler.com/sdk-js/examples/ar-control-no-button/)
Examples
Trigger AR map control actions using keyboard input.
### [Start with AR maps](https://docs.maptiler.com/sdk-js/examples/ar-control/)
Examples
Add an AR control button to map 3D viewports.