RD-453_telemetry (#12)

* Update image links + replace plugin by module (#13) * Add position indicators models * Install maptiler sdk 3 * Update 3D layer to sdk 3 * Add example * Add comments * Add offset * Make linter happy * Refactor mount everest example * Update examples to sdk v3 * Make biome happy * Remove break line * Add telemetry module registration * Make registration works for multiple map instances * Simplify telemetry * Update sdk to v3.0.0-rc.4 * Fix model position issue on projection change animation --------- Co-authored-by: Jonathan Lurie <[email protected]>
maptiler · Dec 18, 2024 · ccbdced · ccbdced
1 parent 47c133e
commit ccbdced
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 76 deletions.
diff --git a/demos/flight.html b/demos/flight.html
@@ -5,8 +5,8 @@
   <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/v3.0.0-rc.2/maptiler-sdk.umd.min.js"></script>
-  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.2/maptiler-sdk.css" rel="stylesheet" />
+  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.umd.min.js"></script>
+  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.css" rel="stylesheet" />
   <script src="../build/maptiler-3d.umd.js"></script>
   <style>
     body {

diff --git a/demos/mountains.html b/demos/mountains.html
@@ -10,8 +10,8 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
     <script src="https://mrdoob.github.io/stats.js/build/stats.min.js"></script>
 
-    <script src="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.2/maptiler-sdk.umd.min.js"></script>
-    <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.2/maptiler-sdk.css" rel="stylesheet"/>
+    <script src="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.umd.min.js"></script>
+    <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.css" rel="stylesheet"/>
     <script src="../build/maptiler-3d.umd.js"></script>
 
     <script>

diff --git a/demos/multi.html b/demos/multi.html
@@ -5,8 +5,8 @@
   <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/v3.0.0-rc.2/maptiler-sdk.umd.min.js"></script>
-  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.2/maptiler-sdk.css" rel="stylesheet" />
+  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.umd.min.js"></script>
+  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.css" rel="stylesheet" />
   <script src="../build/maptiler-3d.umd.js"></script>
   <style>
     body {

diff --git a/demos/plane.html b/demos/plane.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <title>MapTiler 3D Models</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/v3.0.0-rc.2/maptiler-sdk.umd.min.js"></script>
-  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.2/maptiler-sdk.css" rel="stylesheet" />
+  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.umd.min.js"></script>
+  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.css" rel="stylesheet" />
   <script src="../build/maptiler-3d.umd.js"></script>
   <style>
     body {
@@ -45,12 +46,11 @@
       z-index: 2;
       backdrop-filter: blur(10px);
     }
-
   </style>
 </head>
 
 <body>
-  
+
 
   <div id="map"></div>
   <div id="info">
@@ -94,17 +94,18 @@
       map.addLayer(layer3D);
 
       // Increasing the intensity of the ambient light 
-      layer3D.setAmbientLight({intensity: 2});
+      layer3D.setAmbientLight({ intensity: 2 });
 
       // Adding a point light
-      layer3D.addPointLight("point-light", {intensity: 30});
+      layer3D.addPointLight("point-light", { intensity: 30 });
 
 
       const gui = new lil.GUI({ width: 400 });
 
       // Adding a mesh of a plane.
 
       const guiObj = {
+        projection: "mercator",
         heading: 0,
         scale: 1,
         altitude: 3000,
@@ -115,7 +116,7 @@
           layer3D.removeMesh(originalPlaneID);
         },
       }
-   
+
       const originalPlaneID = "plane";
       await layer3D.addMeshFromURL(
         originalPlaneID,
@@ -135,48 +136,66 @@
       map.on("mousemove", (e) => {
         if (!planeCanMove) return;
 
-        layer3D.modifyMesh(originalPlaneID, {lngLat: e.lngLat})
+        layer3D.modifyMesh(originalPlaneID, { lngLat: e.lngLat })
       });
 
       map.on("click", (e) => {
         planeCanMove = !planeCanMove;
       });
 
-      gui.add( guiObj, 'heading', 0, 360, 0.1 )
-      .onChange((heading) => {
-        layer3D.modifyMesh(originalPlaneID, {heading});
-      });
-
-      gui.add( guiObj, 'scale', 0.01, 5, 0.01 )
-      .onChange((scale) => {
-        layer3D.modifyMesh(originalPlaneID, {scale});
-      });
-
-      gui.add( guiObj, 'altitude', 0, 10000, 1 )
-      .onChange((altitude) => {
-        layer3D.modifyMesh(originalPlaneID, {altitude});
-      });
-
-      gui.add( guiObj, 'opacity', 0, 1)
-      .onChange((opacity) => {
-        layer3D.modifyMesh(originalPlaneID, {opacity});
-      });
-
-
-      gui.add( guiObj, 'altitudeReference', ["MEAN_SEA_LEVEL", "GROUND"])
-      .onChange((altRef) => {
-        layer3D.modifyMesh(originalPlaneID, {altitudeReference: maptiler3d.AltitudeReference[altRef]});
-      });
-
-      gui.add( guiObj, "wireframe" )
-      .onChange((wireframe) => {
-        layer3D.modifyMesh(originalPlaneID, {wireframe});
-      });
-
-      gui.add( guiObj, "removePlane" );
+      gui
+        .add(guiObj, 'projection', ["mercator", "globe"])
+        .onChange((projection) => {
+          switch (projection) {
+            case "mercator":
+              map.enableMercatorProjection(true);
+              break;
+
+            case "globe":
+              map.enableGlobeProjection(true);
+              break;
+
+            default:
+              throw new Error("Unsupported projection");
+          }
+        });
+
+      gui.add(guiObj, 'heading', 0, 360, 0.1)
+        .onChange((heading) => {
+          layer3D.modifyMesh(originalPlaneID, { heading });
+        });
+
+      gui.add(guiObj, 'scale', 0.01, 1000, 0.01)
+        .onChange((scale) => {
+          layer3D.modifyMesh(originalPlaneID, { scale });
+        });
+
+      gui.add(guiObj, 'altitude', 0, 10000, 1)
+        .onChange((altitude) => {
+          layer3D.modifyMesh(originalPlaneID, { altitude });
+        });
+
+      gui.add(guiObj, 'opacity', 0, 1)
+        .onChange((opacity) => {
+          layer3D.modifyMesh(originalPlaneID, { opacity });
+        });
+
+
+      gui.add(guiObj, 'altitudeReference', ["MEAN_SEA_LEVEL", "GROUND"])
+        .onChange((altRef) => {
+          layer3D.modifyMesh(originalPlaneID, { altitudeReference: maptiler3d.AltitudeReference[altRef] });
+        });
+
+      gui.add(guiObj, "wireframe")
+        .onChange((wireframe) => {
+          layer3D.modifyMesh(originalPlaneID, { wireframe });
+        });
+
+      gui.add(guiObj, "removePlane");
 
     })()
 
   </script>
 </body>
-</html>
+
+</html>
diff --git a/demos/point_cad_model01.html b/demos/point_cad_model01.html
@@ -5,8 +5,8 @@
   <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/v3.0.0-rc.2/maptiler-sdk.umd.min.js"></script>
-  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.2/maptiler-sdk.css" rel="stylesheet" />
+  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.umd.min.js"></script>
+  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.css" rel="stylesheet" />
   <script src="../build/maptiler-3d.umd.js"></script>
   <style>
     body {

diff --git a/demos/point_cloud_NMH.html b/demos/point_cloud_NMH.html
@@ -5,8 +5,8 @@
   <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/v3.0.0-rc.2/maptiler-sdk.umd.min.js"></script>
-  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.2/maptiler-sdk.css" rel="stylesheet" />
+  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.umd.min.js"></script>
+  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.css" rel="stylesheet" />
   <script src="../build/maptiler-3d.umd.js"></script>
   <style>
     body {

diff --git a/demos/point_cloud_dundee.html b/demos/point_cloud_dundee.html
@@ -5,8 +5,8 @@
   <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/v3.0.0-rc.2/maptiler-sdk.umd.min.js"></script>
-  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.2/maptiler-sdk.css" rel="stylesheet" />
+  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.umd.min.js"></script>
+  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.css" rel="stylesheet" />
   <script src="../build/maptiler-3d.umd.js"></script>
   <style>
     body {

diff --git a/demos/point_cloud_shore.html b/demos/point_cloud_shore.html
@@ -5,8 +5,8 @@
   <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/v3.0.0-rc.2/maptiler-sdk.umd.min.js"></script>
-  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.2/maptiler-sdk.css" rel="stylesheet" />
+  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.umd.min.js"></script>
+  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v3.0.0-rc.4/maptiler-sdk.css" rel="stylesheet" />
   <script src="../build/maptiler-3d.umd.js"></script>
   <style>
     body {

diff --git a/index.html b/index.html
@@ -23,7 +23,7 @@ <h1>MapTiler 3D JS Examples</h1>
         <a href="demos/multi.html?key=">Multi</a>
       </li>
       <li>
-        <a href="demos/plane.html?key=">Terrain</a>
+        <a href="demos/plane.html?key=">Plain</a>
       </li>
       <li>
         <a href="demos/point_cad_model01.html?key=">Point Cloud - CAD-like view</a>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "vite-plugin-dts": "^4.1.0"
   },
   "dependencies": {
-    "@maptiler/sdk": "^3.0.0-rc.2",
+    "@maptiler/sdk": "^3.0.0-rc.4",
     "lru-cache": "^11.0.1",
     "three": "^0.168.0"
   }

diff --git a/src/Layer3D.ts b/src/Layer3D.ts
@@ -1,5 +1,13 @@
-import { getVersion, LngLat } from "@maptiler/sdk";
-import type { LngLatLike, CustomLayerInterface, CustomRenderMethodInput, Map as MapSDK } from "@maptiler/sdk";
+import {
+  type CustomLayerInterface,
+  type Map as MapSDK,
+  type LngLatLike,
+  type CustomRenderMethodInput,
+  LngLat,
+  getVersion,
+} from "@maptiler/sdk";
+
+import packagejson from "../package.json";
 
 import {
   Camera,
@@ -257,6 +265,8 @@ export class Layer3D implements CustomLayerInterface {
    * Automatically called when the layer is added. (should not be called manually)
    */
   onAdd?(map: MapSDK, gl: WebGL2RenderingContext): void {
+    map.telemetry.registerModule(packagejson.name, packagejson.version);
+
     this.map = map;
 
     this.renderer = new WebGLRenderer({