Update with client lib v1.8.0 to bring elevation (#67)

* ADD client lib v1.8.0 * ADD ready event and Maplibre update
maptiler · Dec 19, 2023 · 60a7a17 · 60a7a17
1 parent 87568d2
commit 60a7a17
Show file tree

Hide file tree

Showing 7 changed files with 470 additions and 1,455 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,17 @@
 ### Bug Fixes
 ### Others
 
+## 1.2.1
+### New Features
+- Elevation lookup at `maptilersdk.elevation` with the function `.at()`, `.batch()` and for geojson payloads. From the update of the MapTiler Client library
+- the new `ready` event. Called only once after `load` and wait for all the controls managed by the Map constructor to be dealt with (as one relies on async logic)
+- the new Map lifecycle method `.onReadyAsync()` corresponding to a promise-based equivalent of the the `ready` event.
+### Bug Fixes
+- The index now exposes the geocoding option types from the Client library
+### Others
+- Update of the Maptiler Client library to v1.8.0 that brings the elevation and math module
+- Update with the last version of MapLibre GL JS (v3.6.2)
+
 ## 1.2.0
 ### New Features
 - Added the Minimap control https://github.com/maptiler/maptiler-sdk-js/pull/54

diff --git a/demos/readyevent.html b/demos/readyevent.html
@@ -0,0 +1,60 @@
+<html>
+  <head>
+    <title>MapTiler JS SDK example</title>
+    <style>
+      html, body {
+        margin: 0;
+      }
+
+      #map-container {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        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="../dist/maptiler-sdk.css">
+  </head>
+
+  <body>
+    <div id="map-container"></div>
+    <script src ="../dist/maptiler-sdk.umd.js"></script>
+
+    <script>
+      maptilersdk.config.apiKey = "YOUR_API_KEY";
+
+      const map = new maptilersdk.Map({
+        container: document.getElementById("map-container"),
+        // style: maptilersdk.MapStyle.OUTDOOR,
+        hash: true,
+        maptilerLogo: true,
+      });
+
+      /*
+       * The "ready" event happens only once, after the "load" event when all the controls that can be configured from
+       * the constructor are dealt with. The logo control can be enforced depending on the type of MapTiler Cloud account,
+       * and this is addressed with an asynchronous request. Because of this, the controls that can be added from the constructor
+       * are added in an asynchronous fashion.
+       * As a result, later on adding a custom control from within the "load" event callback does not guarrantee that these 
+       * first async controls are done added and the placement of the new control may be be stacked in the wrong order.
+       * 
+       * The "ready" event guarantees the placemtn order of controls added later on.
+       */
+      map.on("load", async (e) => {
+        console.log(e);
+        const scaleControl = new maptilersdk.ScaleControl();
+        map.addControl(scaleControl, "bottom-left")
+      })
+
+
+    </script>
+  </body>
+</html>