Customize the AR experience.
Enhance the AR experience: The Augmented reality (AR) control accepts an option object to customize the look and feel. Compatible with both WebXR and Apple Quick Look.
Customize the AR control to deliver a personalized immersive experience. So why not give it a try and see the world from a different perspective?
NPM module setup
npm install --save @maptiler/sdk @maptiler/ar-control
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { MaptilerARControl } from '@maptiler/ar-control';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
// Creating a map
const map = new Map({
container: 'map',
style: MapStyle.STREETS.DARK,
zoom: 12,
center: [-116.22335, 51.4117],
});
// Waiting for the map to be ready
map.on("load", (e) => {
const arControl = new MaptilerARControl({
background: `radial-gradient(circle, rgba(230,240,244,1) 1%, rgba(165,184,190,1) 73%, rgba(98,116,121,1) 100%)`,
edgeColor: "#456992",
arButtonContent: `<img src="/sdk-js/assets/box-icon.svg"/>`,
closeButtonContent: `<img src="/sdk-js/assets/close-icon.svg"/>`,
arButtonClassName: "maptiler-ar-enable-button",
closeButtonClassName: "maptiler-ar-close-button",
activateAR: true //When the platform allows automatically activates the AR mode as soon as the data is ready
});
arControl.on("computeStart", (e) => {
overlay.style.display = "inherit";
})
arControl.on("computeEnd", (e) => {
overlay.style.display = "none";
})
map.addControl(arControl, "top-left");
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<title>Customize the AR experience. | NPM example</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="overlay">
<div class="blink_me">computing model</div>
</div>
<div id="map"></div>
<script type="module" src="./main.js"></script>
</body>
</html>
html, body {
margin: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#overlay {
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
background: radial-gradient(circle, rgba(230,240,244,1) 1%, rgba(165,184,190,1) 73%, rgba(98,116,121,1) 100%);
z-index: 3;
display: none;
}
#overlay div {
color: rgb(71, 76, 87);
position: absolute;
width: fit-content;
height: fit-content;
right: 0;
left: 0;
bottom: 0;
top: 0;
margin: auto;
padding: 30px;
font: 12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;
}
.blink_me {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0.2;
}
}
.maptiler-ar-enable-button {
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
margin: 35px;
width: fit-content;
background: rgb(255 255 255 / 60%);
border: none;
border-radius: 5px;
padding: 8px 10px;
transition: all 0.2s;
}
.maptiler-ar-close-button {
cursor: pointer;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
margin: 35px;
width: fit-content;
background: rgb(255 255 255 / 60%);
border: none;
border-radius: 5px;
padding: 8px 10px;
transition: all 0.2s;
}
.maptiler-ar-close-button:hover {
background: rgb(255, 125, 65);
}
.maptiler-ar-enable-button:hover {
background: rgb(65, 166, 255);
}
