---
title: "Augmented reality (AR) Control for MapTiler SDK JS | Augmented reality | JavaScript maps SDK"
description: "Add an augmented reality control to your web map."
---

# Augmented reality (AR) Control for MapTiler SDK JS

 ![NpmLogo](https://docs.maptiler.com/assets/img/npm.svg) [Get it from npm registry](https://www.npmjs.com/package/@maptiler/ar-control)  
![GitHubLogo](https://docs.maptiler.com/assets/img/github.svg) [View source code on GitHub](https://github.com/maptiler/maptiler-ar-control)

This Augmented reality (AR) control adds a button on your [MapTiler SDK’s](https://docs.maptiler.com/sdk-js/) map to create a 3D model of the viewport, including 3D terrain and any layer you have put on top.

The **Enable AR** button will appear if your device is compatible with **WebXR** or **Apple Quick Look**. Then, you can position and interact with the 3D model in your own space.

## Get started

Check out the [Getting started with AR maps: Display an AR control on your maps example](https://docs.maptiler.com/sdk-js/examples/ar-control/).

## API reference

This [reference](https://docs.maptiler.com/sdk-js/modules/ar/api/) documents every object and method available. Each section describes classes or objects as well as their **properties, parameters, methods**, and associated **events**. Many sections also include inline code examples and related resources.

The **main class** in the MapTiler 3D JS module is the [**MaptilerARControl class**](https://docs.maptiler.com/sdk-js/modules/ar/api/classes/MaptilerARControl/)

## Related examples

 [![Getting started with AR maps: Display an AR control on your maps](https://docs.maptiler.com/assets/img/example-card.png)

### Start with AR maps

Example

Add an AR control button to map 3D viewports.](https://docs.maptiler.com/sdk-js/examples/ar-control/)

 [![Include a QR code to access your augmented reality (AR) maps on a mobile device](https://docs.maptiler.com/assets/img/example-card.png)

### QR code to access AR maps

Example

Provide a QR code to access mobile AR maps.](https://docs.maptiler.com/sdk-js/examples/ar-control-qr/)

 [![Add GeoJSON to AR maps](https://docs.maptiler.com/assets/img/example-card.png)

### Add GeoJSON to AR maps

Example

Display GeoJSON biking or hiking routes in AR maps.](https://docs.maptiler.com/sdk-js/examples/ar-control-geojson-line/)

 [![Customize the AR experience.](https://docs.maptiler.com/assets/img/example-card.png)

### Custom AR experience

Example

Customize the appearance of the augmented reality map control.](https://docs.maptiler.com/sdk-js/examples/ar-control-custom/)

 [![How to trigger actions in the AR control](https://docs.maptiler.com/assets/img/example-card.png)

### Trigger AR control actions

Example

Trigger AR map control actions using keyboard input.](https://docs.maptiler.com/sdk-js/examples/ar-control-no-button/)