How to trigger actions in the AR control
Learn how to activate functions in the Augmented reality (AR) control by utilizing the keyboard. This method will enable you to generate a three-dimensional viewport model through augmented reality (AR), which includes not only a 3D terrain but also any additional layers you have incorporated. This feature is compatible with both WebXR and Apple Quick Look platforms.
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.SATELLITE,
zoom: 12,
center: [-116.22335, 51.4117],
});
// Waiting for the map to be ready
map.on("load", (e) => {
const arControl = new MaptilerARControl({
showButton: false,
});
document.addEventListener('keypress', async (event) => {
console.log(event.key);
if (event.key === "a") {
await arControl.run()
}
if (event.key === "q") {
try{
await arControl.close();
} catch(e) {}
}
}, false);
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>How to trigger actions in the AR control | NPM example</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="overlay">
<div class="blink_me">computing model</div>
</div>
<div id="instruction">
<span>Press the <span class="key">A</span> key to show the AR model, and <span class="key">Q</span> to close it.</span>
</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-color: #ffffff;
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;
}
}
#instruction {
z-index: 2;
position: absolute;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
background: #fff;
padding: 10px 25px;
bottom: 25px;
margin: auto;
width: fit-content;
height: fit-content;
left: 0;
right: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
filter: drop-shadow(0 0 0.75rem #0005);
}
.key {
background: #eeeee5;
padding: 4px 9px;
color: #5c5c53;
border-radius: 3px;
border: solid 1px #68685d;
border-bottom-width: 2px;
}
