maptiler · sebstryczek · Jan 7, 2025 · Dec 15, 2024 · Dec 15, 2024 · Dec 18, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,8 @@
 # MapTiler 3D Models Changelog
 
+## 2.0.0
+### Other
+- Update with MapTiler SDK v3 (globe)
+
 ## 1.0.0
-First release 🎉
+First release 🎉
diff --git a/demos/.nojekyll b/demos/.nojekyll
diff --git a/demos/flight.html b/demos/flight.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <title>MapTiler 3D</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
   <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v2.3.0/maptiler-sdk.umd.min.js"></script>
-  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v2.3.0/maptiler-sdk.css" rel="stylesheet" />
-  <script src="../build/maptiler-3d.umd.js"></script>
+
+  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0/maptiler-sdk.umd.min.js"></script>
+  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0/maptiler-sdk.css" rel="stylesheet" />
+  <script src="../build/maptiler-3d.umd.min.js"></script>
+
   <style>
     body {
       margin: 0;
@@ -26,18 +29,15 @@
       right: inherit;
       left: 15px;
     }
-
   </style>
 </head>
 
 <body>
-
-
   <div id="map"></div>
-
   <script>
-
-    maptilersdk.config.apiKey = new URLSearchParams(location.search).get("key") ?? alert("Missing URL param with MapTiler API key ?key=XXXXX");
+    maptilersdk.config.apiKey =
+      new URLSearchParams(location.search).get("key") ??
+      alert("Missing URL param with MapTiler API key ?key=XXXXX");
 
     const newYorkCity = [-73.98918779556983, 40.74072950731568];
     const capeTown = [18.428021658130994, -33.913973526198134];
@@ -46,8 +46,7 @@
     const ankara = [32.866609260522345, 39.959329480757354];
 
     const map = new maptilersdk.Map({
-      container: document.getElementById('map'),
-      // hash: true,
+      container: document.getElementById("map"),
       style: maptilersdk.MapStyle.STREETS.DARK,
       zoom: 9,
       center: paris,
@@ -56,6 +55,7 @@
       terrain: false,
       maptilerLogo: true,
       terrainExaggeration: 0.001,
+      projectionControl: true,
     });
 
     (async () => {
@@ -69,29 +69,25 @@
         "horizon-fog-blend": 0.1,
         "sky-horizon-blend": 1.0,
         "atmosphere-blend": 0.5,
-      })
+      });
 
       const layer3D = new maptiler3d.Layer3D("custom-3D-layer");
       map.addLayer(layer3D);
 
-      // Increasing the intensity of the ambient light 
-      layer3D.setAmbientLight({intensity: 2});
+      // Increasing the intensity of the ambient light
+      layer3D.setAmbientLight({ intensity: 2 });
 
       // Adding a point light
-      layer3D.addPointLight("point-light", {intensity: 30});
+      layer3D.addPointLight("point-light", { intensity: 30 });
 
       const originalPlaneID = "plane";
-      await layer3D.addMeshFromURL(
-        originalPlaneID,
-        "models/plane_a340.glb",
-        {
-          lngLat: paris,
-          heading: 12,
-          scale: 5,
-          altitude: 5000,
-          altitudeReference: maptiler3d.AltitudeReference.MEAN_SEA_LEVEL,
-        }
-      );
+      await layer3D.addMeshFromURL(originalPlaneID, "models/plane_a340.glb", {
+        lngLat: paris,
+        heading: 12,
+        scale: 5,
+        altitude: 5000,
+        altitudeReference: maptiler3d.AltitudeReference.MEAN_SEA_LEVEL,
+      });
 
       const guiObj = {
         play: false,
@@ -101,17 +97,16 @@
 
       const gui = new lil.GUI({ width: 500 });
 
-      gui.add( guiObj, 'tackFlight')
+      gui.add(guiObj, "tackFlight");
 
-      gui.add( guiObj, 'play')
-      .onChange((play) => {
+      gui.add(guiObj, "play").onChange((play) => {
         if (play) {
           playAnimation();
         }
       });
 
-      gui.add( guiObj, 'speed', 0, 0.001);
-      
+      gui.add(guiObj, "speed", 0, 0.001);
+
       let progress = 0;
 
       function playAnimation() {
@@ -121,8 +116,12 @@
           progress = 0;
         }
 
-        const position = maptilersdk.math.haversineIntermediateWgs84(paris, ankara, progress);
-        layer3D.modifyMesh(originalPlaneID, {lngLat: position});
+        const position = maptilersdk.math.haversineIntermediateWgs84(
+          paris,
+          ankara,
+          progress
+        );
+        layer3D.modifyMesh(originalPlaneID, { lngLat: position });
 
         if (guiObj.tackFlight) {
           map.setCenter(position);
@@ -133,10 +132,8 @@
           requestAnimationFrame(playAnimation);
         }
       }
-
-
-    })()
-
+    })();
   </script>
 </body>
-</html>
+
+</html>
diff --git a/demos/index.html b/demos/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>MapTiler 3D JS</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />
+</head>
+
+<body>
+  <h1>MapTiler 3D JS Examples</h1>
+  <ul>
+    <li>
+      <a href="flight.html?key=">Flight</a>
+    </li>
+    <li>
+      <a href="mountains.html?key=">Mountains</a>
+    </li>
+    <li>
+      <a href="multi.html?key=">Multi</a>
+    </li>
+    <li>
+      <a href="plane.html?key=">Plane</a>
+    </li>
+    <li>
+      <a href="point_cad_model01.html?key=">Point Cloud - CAD-like view</a>
+    </li>
+    <li>
+      <a href="point_cloud_dundee.html?key=">Point Cloud - Dundee</a>
+    </li>
+    <li>
+      <a href="point_cloud_NMH.html?key=">Point Cloud - NMH</a>
+    </li>
+    <li>
+      <a href="point_cloud_shore.html?key=">Point Cloud - Shore</a>
+    </li>
+  </ul>
+
+  <script type="module">
+    document.querySelectorAll("a").forEach((a) => {
+      a.href += import.meta.env.VITE_API_KEY;
+    });
+  </script>
+</body>
+
+</html>
diff --git a/demos/models/position-indicator--y-up.glb b/demos/models/position-indicator--y-up.glb
diff --git a/demos/models/position-indicator--z-up.glb b/demos/models/position-indicator--z-up.glb