Augmented reality (AR) Control for MapTiler SDK JS

This Augmented reality (AR) control adds a button on your MapTiler SDK’s 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

  1. Since the AR control is going to be added to a Map, let’s instantiate a map first. Copy the following code, paste it into your favorite text editor, and save it as a .html file.

  2. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  3. Waiting for the map to be ready to add the control.

  4. Install the npm package.

  5. Include the CSS file.

    If you have a bundler that can handle CSS, you can import the CSS or include it with a <link> in the head of the document via the CDN

  6. Include the following code in your JavaScript file (Example: app.js).

    With NextJS, the AR control module must be dynamically imported. This must be done in hook that is only executed client side (or inside componentDidMount, in the case of class components). This is due to the AR Control dependency to ModelViewer that needs to acces the global object window. NextJS will attempt SSR, where window is not defined and this will result in an error.

  7. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  8. Waiting for the map to be ready to add the control.

API Reference

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

Related examples

Getting started with AR maps: Display an AR control on your maps

Start with AR maps

Example

Getting started with AR maps: The Augmented reality (AR) control adds a button on your map to create a 3D model of the viewport, including 3D terrain and any layer you have put on top. Compatible with WebXR or Apple Quick Look.
Include a QR code to access your augmented reality (AR) maps on a mobile device

QR code to access AR maps

Example

Include a QR code to access your augmented reality (AR) maps on a mobile device. Compatible with WebXR or Apple Quick Look.
Add GeoJSON to AR maps

Add GeoJSON to AR maps

Example

Add a GeoJSON line to Augmented reality (AR) map, to create a biking or hiking route 3D model. Compatible with WebXR or Apple Quick Look.
Customize the AR experience.

Custom AR experience

Example

Customize the AR experience: The Augmented reality (AR) control accepts an option object to customize the look and feel. Compatible with WebXR or Apple Quick Look.
How to trigger actions in the AR control

Trigger AR control actions

Example

How to trigger actions in the AR control: Display the Augmented reality (AR) control using the keyboard to create a 3D viewport model, including 3D terrain and any layer you have put on top. Compatible with WebXR or Apple Quick Look.