For AI agents: a documentation index is available at /llms.txt. Markdown versions of all pages are available by appending .md to any URL.
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;
}
