Update SDK to v3 (#6)

* prepare for globe mode and SDK v3 (#4)

* RD-453_telemetry (#5)

* prepare for globe mode and SDK v3

* Add telemetry

* Simplify telemetry

* Update sdk

---------

Co-authored-by: Jonathan Lurie <[email protected]>

* RD-492_maplibre-v5.0.0-pre10 (#7)

* Update sdk

* Update demos

* Update dependencies

* Update demos

* Improve dev experience

---------

Co-authored-by: Jonathan Lurie <[email protected]>

.github/workflows/format-lint.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install Node.js dependencies
         run: npm ci

.github/workflows/npm-publish.yml

@@ -1,7 +1,3 @@
-
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
 name: Node.js Package
 
 on:
@@ -12,13 +8,28 @@ jobs:
   build-and-publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout repo
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.release.target_commitish }}
+
       - uses: actions/setup-node@v4
         with:
           node-version: 20
           registry-url: https://registry.npmjs.org/
-      - run: npm install
+      - run: npm ci
       - run: npm run make
-      - run: npm publish --access public
+
+      - name: Publish NPM package (regular)
+        if: "!github.event.release.prerelease"
+        run: |
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+
+      - name: Publish NPM package (pre-release)
+        if: "github.event.release.prerelease"
+        run: |
+          npm publish --tag next
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.gitignore

@@ -112,3 +112,4 @@ tests/
 build/
 dist/
 docs/
+tmp_*

CHANGELOG.md

@@ -1,5 +1,9 @@
 # MapTiler Marker Layout Changelog
 
+## 2.0.0-rc.1
+### Other
+- Updating with SDK v3 rc (globe)
+
 ## 1.0.0
 ### New Features
 - First version

demos/cities-many.html

@@ -6,11 +6,11 @@
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
 
   <!-- Import MapTiler SDK -->
-  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v2.4.0/maptiler-sdk.umd.min.js"></script>
-  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v2.4.0/maptiler-sdk.css" rel="stylesheet" />
+  <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" />
 
   <!-- Import MapTiler Maker Layout -->
-  <script src="../build/maptiler-marker-layout.umd.js"></script>
+  <script src="../build/maptiler-marker-layout.umd.min.js"></script>
 
   <style>
     body {
@@ -103,12 +103,21 @@
 
   <script>
     const appContainer = document.getElementById('map');
-    maptilersdk.config.apiKey = 'YOUR_API_KEY';
+
+    maptilersdk.config.apiKey = new URLSearchParams(location.search).get("key") || "API_KEY";
+
+    if (maptilersdk.config.apiKey === "API_KEY") {
+      const errorMessage = "MapTiler API key is missing. Please use URL `key` parameter to set it (`?key=XXXXX`).";
+
+      alert(errorMessage);
+      throw new Error(errorMessage);
+    }
 
     const map = new maptilersdk.Map({
       container: appContainer,
       hash: true,
       geolocate: true,
+      projectionControl: true,
     });
 
     // Creating the div that will contain all the markers

demos/cities.html

@@ -6,11 +6,11 @@
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
 
   <!-- Import MapTiler SDK -->
-  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v2.4.0/maptiler-sdk.umd.min.js"></script>
-  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v2.4.0/maptiler-sdk.css" rel="stylesheet" />
+  <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" />
 
   <!-- Import MapTiler Maker Layout -->
-  <script src="../build/maptiler-marker-layout.umd.js"></script>
+  <script src="../build/maptiler-marker-layout.umd.min.js"></script>
 
   <style>
     body {
@@ -103,12 +103,20 @@
 
     const appContainer = document.getElementById('map');
 
-    maptilersdk.config.apiKey = 'YOUR_API_KEY';
+    maptilersdk.config.apiKey = new URLSearchParams(location.search).get("key") || "API_KEY";
+
+    if (maptilersdk.config.apiKey === "API_KEY") {
+      const errorMessage = "MapTiler API key is missing. Please use URL `key` parameter to set it (`?key=XXXXX`).";
+
+      alert(errorMessage);
+      throw new Error(errorMessage);
+    }
 
     const map = new maptilersdk.Map({
       container: appContainer,
       hash: true,
       geolocate: true,
+      projectionControl: true,
     });
 
     // Creating the div that will contain all the markers

demos/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>MapTiler Marker layout for MapTiler SDK</title>
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />
+</head>
+
+<body>
+  <h1>MapTiler Marker layout for MapTiler SDK Examples</h1>
+  <ul>
+    <li>
+      <a href="cities-many.html?key=">Cities many</a>
+    </li>
+    <li>
+      <a href="cities.html?key=">Cities</a>
+    </li>
+  </ul>
+
+  <script type="module">
+    document.querySelectorAll("a").forEach((a) => {
+      a.href += import.meta.env.VITE_API_KEY;
+    });
+  </script>
+</body>
+
+</html>