maptiler · jonathanlurie · Jun 17, 2024 · Mar 1, 2024 · Mar 1, 2024 · Mar 1, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # MapTiler AR Control Changelog
 
+## 2.1.0
+### New Features
+- Now working also with Capacitor inside a mobile app (iOS only)
+### Others
+- Optimization of the UMD bundle size
+
+
 ## 2.0.1
 ### Bug Fixes
 - Fixed: when displayed bound were wider than 180° the Haversine distance used was from the back of Earth, resulting in a too narrow 3D model

diff --git a/demos/auto-activate2.html b/demos/auto-activate2.html
@@ -0,0 +1,163 @@
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>MapTiler AR Control</title>
+    <!-- Importing MapTiler SDK -->
+    <script src="https://cdn.maptiler.com/maptiler-sdk-js/latest/maptiler-sdk.umd.min.js"></script>
+    <link href="https://cdn.maptiler.com/maptiler-sdk-js/latest/maptiler-sdk.css" rel="stylesheet" />
+
+    <!-- Importing MapTiler AR Control -->
+    <script src="../build/maptiler-ar-control.umd.js"></script>
+
+    <!-- Importing QR code library -->
+    <script src="qrcode.js"></script>
+
+    <style>
+      html, body {
+        margin: 0;
+        background-color: red;
+      }
+
+      #map {
+        width: 100vw;
+        height: calc(100vh - 100px);
+        margin-top: 50px;
+      }
+
+      #overlay {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: #3e4c55;
+        z-index: 4;
+        display: none;
+      }
+
+      #overlay div {
+        color: white;
+        position: absolute;
+        width: fit-content;
+        height: fit-content;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        top: 0;
+        margin: auto;
+        font-size: 2em;
+        font-weight: 200;
+        border: 4px solid white;
+        padding: 30px;
+        background: #0000001a;
+        font-family: system-ui, sans-serif;
+      }
+
+      #center-marker {
+        background: red;
+        opacity: 0.3;
+        width: 100px;
+        height: 100px;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        z-index: 10000;
+      }
+
+      .qr-code {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        margin: 20px;
+        height: 120px;
+        border: 2px white solid;
+        border-radius: 5px;
+      }
+
+      .qr-code::after {
+        content: "Scan me!";
+      }
+
+    </style>
+  </head>
+  <body>
+    <!-- <div id="center-marker"></div> -->
+    <div id="overlay">
+      <div>COMPUTING 3D MODEL</div>
+    </div>
+
+    <div id="map"></div>
+    <script>
+
+
+
+      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+      function generateQRCode() {
+        // https://github.com/kazuhikoarase/qrcode-generator/tree/master/js
+        const qr = qrcode(0, "M");
+        qr.addData(location.href);
+        qr.make();
+        return qr.createDataURL(10, 10);
+      }
+
+      function getKey() {
+        const key = (new URLSearchParams(location.search)).get("key");
+        if (!key) {
+          alert("The MapTiler Cloud key is missing. Add yours in the URL with \n?key=YOUR_KEY\nOr get one for free at https://www.maptiler.com/");
+          return "_MISSING_MAPTILER_API_KEY_";
+        }
+        return key;
+      }
+
+      const overlay = document.getElementById("overlay");
+
+      // Setting up the config
+      maptilersdk.config.apiKey = getKey();
+      maptilersdk.config.caching = false;
+
+      // Creating a map
+      const map = new maptilersdk.Map({
+        container: 'map',
+        style: maptilersdk.MapStyle.OUTDOOR,
+        terrain: true,
+        hash: true,
+        geolocate: true,
+      });
+
+      // Waiting for the map to be ready
+      map.on("load", (e) => {
+        console.log(">>>>>> user agent", navigator.userAgent);
+
+
+        const qrCodeOptions = isMobile ? {} : {
+            logo: generateQRCode(generateQRCode()),
+            logoClass: "qr-code",
+            logoHeight: 120,
+          }  
+        qrCodeOptions.activateAR = true;
+
+        const arControl = new maptilerarcontrol.MaptilerARControl(qrCodeOptions);
+
+        arControl.on("computeStart", (e) => {
+          overlay.style.display = "inherit";
+
+          if (!isMobile) {
+            arControl.updateLogo(generateQRCode())
+          }
+        })
+
+        arControl.on("computeEnd", (e) => {
+          overlay.style.display = "none";
+        })
+
+        map.addControl(arControl, "top-left");
+      })
+
+
+    </script>
+  </body>
+</html>