Augmented reality (AR) 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.

The MaptilerARControl create a 3D model of the viewport, including 3D terrain and any layer you have put on top.

Example (create control with some not default options)

Options

Parameters

The constructor MaptilerARControl accepts an option object to customize the look and feel.

Properties

options.showButton
default: true
Shows the AR button if true, hide it otherwise.
options.background
default: #FFFFFF
Background color (or any css-compatible string for gradient or image url).
options.closeButtonClassName
default: none
CSS class to add to the close button on the AR modal. If none is provided, a default inline style is added.
options.closeButtonContent
default: Close
Content to add to the close button. If the content is a string, it is added as .innerHTML. If it's a DOM element, it is added as .appendChild().
options.arButtonClassName
default: none
CSS class to add to the AR button on the AR modal. If none is provided, a default inline style is added.
options.arButtonContent
default: Close
Content to add to the AR button. If the content is a string, it is added as .innerHTML. If it's a DOM element, it is added as .appendChild().
options.edgeColor
default: #0eaeff
Color of the 3D model edges.
options.logo
default: ""
A URL to a logo placed at the bottom of the 3D view when AR mode is not enabled. By default, the logo will have an height of 60 pixel and be placed at the bottom left corner with a margin of 10 pixels.
options.logoHeight
default: 60
The height of the logo in pixels (if any).
options.logoClass
default: ""
CSS class to add to the class list of the element holding the logo (if any). If used, the .logoHeight as well as the default styling will no longer be applied.
options.activateAR
default: false
When the platform allows, setting this to true automatically activates the AR mode as soon as the data is ready. Quick Look on iOS is likely to allow this, while WebXR on Android is not likely to.
options.highRes
default: false
Increases the resolution of the texture. Will most likely have no effect on iOS due to some format limitation.

Events

The AR control performs some temporary changes to the map view, so these events are handy to hide those transformations behind a curtain or displaying a message.

In the Display an AR control to create a visualization of 3D models example, we show a fullscreen overlay with a waiting message at computeStart and hide it at computeEnd, just by dynamically updating the .style.display property of the overlay. Keep in mind that the z-index CSS property of this overlay must be higher than the 3D model view, so greater than 3.

When using React, you may want to replace this logic by a change of state.

Methods

Module Reference

On this page