Getting started with AR maps: Display an AR control on your maps

The Augmented reality (AR) control adds a button on your map that enables you to generate a 3D model of the visible area, including 3D terrain and any additional layer you have put on top. This functionality is compatible with WebXR or Apple Quick Look, providing users with seamless integration and immersive experiences.

With just a click of a button, you can unlock a whole new dimension to map exploration, allowing for enhanced visualization and interaction. Whether you’re navigating unfamiliar terrain or simply curious about the world around you, AR maps offer a unique way to discover and engage with your surroundings.

The control’s activateAR option allows you to automatically activate the AR model as soon as the data is available. Currently only on iOS (Quick Look).


npm install --save @maptiler/sdk @maptiler/ar-control

main.js

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.OUTDOOR,
  zoom: 12,
  center: [-116.22335, 51.4117],
});

// Waiting for the map to be ready
map.on("load", (e) => {
  const arControl = new MaptilerARControl({
    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");
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Getting started with AR maps: Display an AR control on your maps | 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>

style.css

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;
  }
}

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MapTiler AR Control</title>
    <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
    <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
    <script src="https://cdn.maptiler.com/maptiler-ar-control/v3.0.3/maptiler-ar-control.umd.min.js"></script>

    <style>
      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;
        }
      }
    </style>
  </head>
  <body>
    <div id="overlay">
      <div class="blink_me">computing model</div>
    </div>

    <div id="map"></div>
    <script>
      maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
      
      // Creating a map
      const map = new maptilersdk.Map({
        container: 'map',
        style: maptilersdk.MapStyle.OUTDOOR,
        zoom: 12,
        center: [-116.22335, 51.4117],
      });

      // Waiting for the map to be ready
      map.on("load", (e) => {
        const arControl = new maptilerarcontrol.MaptilerARControl({
          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");
      })

    </script>
  </body>
</html>

Getting started with AR maps: Display an AR control on your maps

main.js

index.html

style.css

Custom AR experience

Add GeoJSON to AR maps

Trigger AR control actions

QR code to access AR maps

Getting started with AR maps: Display an AR control on your maps

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Related examples

Custom AR experience

Add GeoJSON to AR maps

Trigger AR control actions

QR code to access AR maps