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.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
(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
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
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 .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.
Called when the AR control starts computing the the 3D model, as soon as the AR button is clicked.
Called when the AR control is done computing the model and is about to display it.
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.
Methods
Programmatically run the computation of the 3D model. This can be used in replacement of a click on the control
Programmatically closes the overlay containing the 3D model.
Updates the src of the logo.
This can only be used if the .logo option was set in the constructor.
Can be coupled with the computeStart event to refresh the information,
for instance a dynamically generated QR code that would contain info about the place being processed.
