maptiler · sebstryczek · Oct 28, 2024 · Oct 28, 2024 · Nov 14, 2024 · Nov 15, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # MapTiler SDK Changelog
 
+## NEXT
+### New Features
+- New `MaptilerProjectionControl`  to toggle globe/Mercator projection
+- Add metric collection and plugin registration feature
+
+### Bug Fixes
+- Navigation now relies on `Map` methods instead of `Transform` methods for bearing due to globe projection being available
+
 ## 2.5.1
 ### Bug Fixes
 - Better control of the status of `monitoredStyleUrls` in Map instance when error is caught (https://github.com/maptiler/maptiler-sdk-js/pull/141)

diff --git a/biome.json b/biome.json
@@ -29,6 +29,9 @@
   },
   "linter": {
     "rules": {
+      "style": {
+        "noInferrableTypes": "off"
+      },
       "suspicious": {
         "noExplicitAny": {
           "level": "off"

diff --git a/demos/handling-webgl-errors.html b/demos/handling-webgl-errors.html
@@ -0,0 +1,158 @@
+<html>
+
+<head>
+  <title>MapTiler JS SDK example</title>
+  <style>
+    html {
+      height: 100%;
+      font-family: sans-serif;
+      font-size: 13px;
+    }
+
+    body {
+      height: 100%;
+      margin: 0;
+      display: grid;
+      grid-template: 1fr 1fr / 1fr 1fr;
+      gap: 16px;
+      box-sizing: border-box;
+      padding: 16px;
+    }
+
+    .map {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
+    }
+
+    #style-picker-container {
+      position: absolute;
+      z-index: 2;
+      margin: 10px;
+    }
+  </style>
+
+  <link rel="stylesheet" href="../build/maptiler-sdk.css">
+</head>
+
+<body>
+  <script src="../build/maptiler-sdk.umd.min.js"></script>
+
+  <script>
+    function getRandomMapStyle() {
+      const styles = Object.keys(maptilersdk.MapStyle);
+      const style = maptilersdk.MapStyle[styles[Math.floor(Math.random() * styles.length)]];
+      const variants = Object.keys(style.variants);
+      const variant = style[variants[Math.floor(Math.random() * variants.length)]];
+      return variant;
+    }
+
+    function createMap() {
+      const element = document.createElement("div");
+      element.className = "map";
+      document.body.appendChild(element);
+
+      const map = new maptilersdk.Map({
+        container: element,
+        style: getRandomMapStyle(),
+        hash: false,
+        geolocate: true,
+        terrain: true,
+        scaleControl: true,
+        fullscreenControl: true,
+        terrainControl: true,
+      });
+
+      return map;
+    }
+  </script>
+
+  <script>
+    maptilersdk.config.apiKey = "YOUR_API_KEY";
+
+    /*
+     * The mapLeftTop will lose the WebGL context because it is removed
+     * so the event will not be called.
+     */
+    const mapLeftTop = createMap();
+
+    mapLeftTop.on("webglcontextlost", () => {
+      console.log("webglcontextlost", mapLeftTop); // Should not be called
+    });
+
+    mapLeftTop.on("load", () => {
+      setTimeout(() => {
+        mapLeftTop.remove();
+        mapLeftTop.getContainer().innerHTML = "Map removed successfully 🎉";
+      }, 1000);
+    });
+    /* *** */
+
+    /*
+     * The mapRightTop will lose the WebGL context and default warning will be displayed.
+     */
+    const mapRightTop = createMap();
+
+    mapRightTop.on("webglcontextlost", () => {
+      maptilersdk.displayWebGLContextLostWarning(mapRightTop);
+    });
+
+    mapRightTop.on("load", () => {
+      setTimeout(() => {
+        mapRightTop.getCanvas().getContext("webgl2").getExtension("WEBGL_lose_context").loseContext();
+      }, 1000);
+    });
+    /* *** */
+
+    /*
+     * The mapLeftBottom will lose the WebGL context and custom warning will be displayed.
+     */
+    const mapLeftBottom = createMap();
+
+    mapLeftBottom.on("webglcontextlost", () => {
+      const element = document.createElement("div");
+      element.style.position = "absolute";
+      element.style.top = "0";
+      element.style.left = "0";
+      element.style.right = "0";
+      element.style.bottom = "0";
+      element.style.margin = "auto";
+      element.style.height = "48px";
+      element.style.width = "256px";
+      element.style.display = "flex";
+      element.style.justifyContent = "center";
+      element.style.alignItems = "center";
+      element.style.transform = "rotate(-45deg)";
+      element.style.background = "peachpuff";
+      element.innerHTML = "WebGL context lost custom warning.";
+
+      mapLeftBottom.getContainer().appendChild(element);
+    });
+
+    mapLeftBottom.on("load", () => {
+      setTimeout(() => {
+        mapLeftBottom.getCanvas().getContext("webgl2").getExtension("WEBGL_lose_context").loseContext();
+      }, 1000);
+    });
+    /* *** */
+
+    /*
+     * The mapRightBottom will lose the WebGL context and the map will be recreated.
+     */
+    const mapRightBottom = createMap();
+
+    mapRightBottom.on("webglContextLost", () => {
+      mapRightBottom.recreate();
+    });
+
+    mapRightBottom.on("load", () => {
+      setTimeout(() => {
+        mapRightBottom.getCanvas().getContext("webgl2").getExtension("WEBGL_lose_context").loseContext();
+      }, 1000);
+    });
+    /* *** */
+  </script>
+</body>
+
+</html>
diff --git a/demos/sky_day.html b/demos/sky_day.html
@@ -64,7 +64,7 @@
       </div>
     </div>
 
-    <script src ="../build/maptiler-sdk.umd.js"></script>
+    <script src ="../build/maptiler-sdk.umd.min.js"></script>
 
     <script>
       maptilersdk.config.apiKey = "YOUR_API_KEY";

diff --git a/demos/sky_day_globe.html b/demos/sky_day_globe.html
@@ -0,0 +1,145 @@
+<html>
+  <head>
+    <title>MapTiler JS SDK example</title>
+    <style>
+      html, body {
+        margin: 0;
+      }
+
+      #map-container {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        background: #ccc;
+        /* background: radial-gradient(circle, rgb(186 226 255) 5%, rgb(0 100 159) 98%); */
+      }
+
+      #style-picker-container {
+        position: absolute;
+        z-index: 2;
+        margin: 10px;
+      }
+
+    </style>
+
+    <link rel="stylesheet" href="../build/maptiler-sdk.css">
+  </head>
+
+  <body>
+    <div id="map-container"></div>
+    <div id="style-picker-container">
+      <div>
+        <label for="sky-color">sky-color</label>
+        <input id="sky-color" type="color" value="#027bdb"></input>
+      </div>
+
+      <div>
+        <label for="horizon-color">horizon-color</label>
+        <input id="horizon-color" type="color" value="#ffffff"></input>
+      </div>
+
+      <div>
+        <label for="fog-color">fog-color</label>
+        <input id="fog-color" type="color" value="#ffffff"></input>
+      </div>
+
+      <div>
+        <label for="fog-ground-blend">fog-ground-blend</label>
+        <input id="fog-ground-blend" type="range" min="0" max="1" step="0.01" value="0.1"></input>
+      </div>
+
+      <div>
+        <label for="horizon-fog-blend">horizon-fog-blend</label>
+        <input id="horizon-fog-blend" type="range" min="0" max="1" step="0.01" value="0.5"></input>
+      </div>
+
+      <div>
+        <label for="sky-horizon-blend">sky-horizon-blend</label>
+        <input id="sky-horizon-blend" type="range" min="0" max="1" step="0.01" value="0.75"></input>
+      </div>
+
+      <div>
+        <label for="atmosphere-blend">atmosphere-blend</label>
+        <input id="atmosphere-blend" type="range" min="0" max="1" step="0.01" value="0.5"></input>
+      </div>
+    </div>
+
+    <script src ="../build/maptiler-sdk.umd.min.js"></script>
+
+    <script>
+      maptilersdk.config.apiKey = "YOUR_API_KEY";
+
+      const map = new maptilersdk.Map({
+        container: document.getElementById("map-container"),
+        style: maptilersdk.MapStyle.OUTDOOR,
+        hash: false,
+        terrainControl: true,
+        geolocate: true,
+        maxPitch: 85,
+        terrain: true,
+        pitch: 0,
+        bearing: 0,
+        center: [7.8097, 46.0739],
+        zoom: 2,
+        projection: "globe"
+      })
+
+
+      document.getElementById("sky-color").addEventListener("input", (e) => {
+        map.setSky({
+          "sky-color": e.target.value,
+        });
+      });
+
+      document.getElementById("horizon-color").addEventListener("input", (e) => {
+        map.setSky({
+          "horizon-color": e.target.value,
+        });
+      });
+
+      document.getElementById("fog-color").addEventListener("input", (e) => {
+        map.setSky({
+          "fog-color": e.target.value,
+        });
+      });
+
+      document.getElementById("fog-ground-blend").addEventListener("input", (e) => {
+        map.setSky({
+          "fog-ground-blend": parseFloat(e.target.value),
+        });
+      });
+
+      document.getElementById("horizon-fog-blend").addEventListener("input", (e) => {
+        map.setSky({
+          "horizon-fog-blend": parseFloat(e.target.value),
+        });
+      });
+
+      document.getElementById("sky-horizon-blend").addEventListener("input", (e) => {
+        map.setSky({
+          "sky-horizon-blend": parseFloat(e.target.value),
+        });
+      });
+
+      document.getElementById("atmosphere-blend").addEventListener("input", (e) => {
+        map.setSky({
+          "atmosphere-blend": parseFloat(e.target.value),
+        });
+      });
+
+
+      map.on("ready", () => {
+        map.setSky({
+          "sky-color": "#027bdb",
+          "horizon-color": "#ffffff",
+          "fog-color": "#ffffff",
+          "fog-ground-blend": 0.1,
+          "horizon-fog-blend": 0.5,
+          "sky-horizon-blend": 0.75,
+          "atmosphere-blend": 0.5,
+        })
+      })
+
+    </script>
+  </body>
+</html>
diff --git a/demos/sky_night.html b/demos/sky_night.html
@@ -65,7 +65,7 @@
       </div>
     </div>
 
-    <script src ="../build/maptiler-sdk.umd.js"></script>
+    <script src ="../build/maptiler-sdk.umd.min.js"></script>
 
     <script>
       maptilersdk.config.apiKey = "YOUR_API_KEY";