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

options (ControlOptions)
The constructor MaptilerARControl accepts an option object to customize the look and feel.

Properties

options.showButton
boolean?
default: true
 Shows the AR button if true, hide it otherwise.
options.background
string?
default: #FFFFFF
 Background color (or any css-compatible string for gradient or image url).
options.closeButtonClassName
string?
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
(string | HTMLElement)?
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
string?
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
(string | HTMLElement)?
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
string?
default: #0eaeff
 Color of the 3D model edges.
options.logo
string?
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
number?
default: 60
 The height of the logo in pixels (if any).
options.logoClass
string?
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
boolean?
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.

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.

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

Module Reference

On this page