maptiler · lesbaa · May 2, 2025 · Apr 29, 2025 · May 1, 2025 · May 1, 2025
diff --git a/.gitignore b/.gitignore
@@ -109,4 +109,8 @@ demos/tmp_*
 dist
 docs
 docsmd
-build
+build
+
+# Test output
+test-results
+playwright-report
diff --git a/e2e/global.d.ts b/e2e/global.d.ts
@@ -0,0 +1,12 @@
+import { Map } from "@maptiler/sdk";
+
+declare global {
+  interface Window {
+    __map: Map;
+    __pageLoadTimeout: number;
+    notifyScreenshotStateReady: (data: TTestTransferData) => Promise<void>;
+    __pageObjects: Record<string, unknown>;
+  }
+
+  type TTestTransferData = string | number | boolean | string[] | number[] | boolean[] | null | Record<string, unknown> | [number, number];
+}
diff --git a/e2e/public/animated-route.geojson b/e2e/public/animated-route.geojson
@@ -0,0 +1,82 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "pitch": [
+          30,
+          40,
+          50,
+          60,
+          50,
+          40,
+          30
+        ],
+        "bearing": [
+          0,
+          180,
+          360
+        ],
+        "zoom": [
+          13.5,
+          14,
+          14.5,
+          15,
+          14.5,
+          14,
+          13.5
+        ]
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            -5.513465218122661,
+            55.44452556522981
+          ],
+          [
+            -5.498757996681263,
+            55.45488849896259
+          ],
+          [
+            -5.4776627901701715,
+            55.459774141237716
+          ],
+          [
+            -5.450773829757111,
+            55.45446729456921
+          ],
+          [
+            -5.434581030391769,
+            55.44241894502119
+          ],
+          [
+            -5.434433020938883,
+            55.42337006037573
+          ],
+          [
+            -5.447655667245527,
+            55.40895140980018
+          ],
+          [
+            -5.474692405196635,
+            55.40169789075969
+          ],
+          [
+            -5.504997423959253,
+            55.410637475280794
+          ],
+          [
+            -5.520595992154796,
+            55.42809094495976
+          ],
+          [
+            -5.513910891499705,
+            55.44393572290733
+          ]
+        ],
+        "type": "LineString"
+      }
+    }
+  ]
+}
diff --git a/e2e/public/animatedRouteLayer.html b/e2e/public/animatedRouteLayer.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MapTiler E2E Animated Route Layer</title>
+  <style>
+    #map {
+      width: 100vw;
+      height: 100vh;
+      border: 1px solid red;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <script type="module" src="/src/animatedRouteLayer.ts"></script>
+</body>
+</html>
diff --git a/e2e/public/mapLoad.html b/e2e/public/mapLoad.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MapTiler E2E Map Load</title>
+  <style>
+    #map {
+      width: 100vw;
+      height: 100vh;
+      border: 1px solid red;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <script type="module" src="/src/mapLoad.ts"></script>
+</body>
+</html>
diff --git a/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-0-chromium-darwin.png b/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-0-chromium-darwin.png
diff --git a/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-1-chromium-darwin.png b/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-1-chromium-darwin.png
diff --git a/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-10-chromium-darwin.png b/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-10-chromium-darwin.png
diff --git a/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-11-chromium-darwin.png b/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-11-chromium-darwin.png
diff --git a/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-12-chromium-darwin.png b/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-12-chromium-darwin.png
diff --git a/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-13-chromium-darwin.png b/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-13-chromium-darwin.png
diff --git a/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-14-chromium-darwin.png b/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-14-chromium-darwin.png
diff --git a/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-15-chromium-darwin.png b/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-15-chromium-darwin.png
diff --git a/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-16-chromium-darwin.png b/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-16-chromium-darwin.png
diff --git a/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-17-chromium-darwin.png b/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-17-chromium-darwin.png
diff --git a/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-18-chromium-darwin.png b/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-18-chromium-darwin.png
diff --git a/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-19-chromium-darwin.png b/...ests/AnimatedRouteLayer.test.ts-snapshots/animated-route-19-chromium-darwin.png
diff --git a/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-2-chromium-darwin.png b/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-2-chromium-darwin.png
diff --git a/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-3-chromium-darwin.png b/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-3-chromium-darwin.png
diff --git a/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-4-chromium-darwin.png b/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-4-chromium-darwin.png
diff --git a/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-5-chromium-darwin.png b/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-5-chromium-darwin.png
diff --git a/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-6-chromium-darwin.png b/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-6-chromium-darwin.png
diff --git a/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-7-chromium-darwin.png b/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-7-chromium-darwin.png
diff --git a/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-8-chromium-darwin.png b/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-8-chromium-darwin.png
diff --git a/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-9-chromium-darwin.png b/...tests/AnimatedRouteLayer.test.ts-snapshots/animated-route-9-chromium-darwin.png
diff --git a/e2e/snapshots/tests/map-load.test.ts-snapshots/mapLoad-chromium-darwin.png b/e2e/snapshots/tests/map-load.test.ts-snapshots/mapLoad-chromium-darwin.png
diff --git a/e2e/src/animatedRouteLayer.ts b/e2e/src/animatedRouteLayer.ts
@@ -0,0 +1,72 @@
+import { AnimatedRouteLayer } from "../../src/custom-layers/AnimatedRouteLayer";
+import { Map as MapTiler, MapStyle } from "@maptiler/sdk";
+import fetchGeoJSON from "../tests/helpers/fetchGeojson";
+
+async function main() {
+  const map = new MapTiler({
+    container: "map",
+    apiKey: "DOESNT_MATTER",
+    style: MapStyle.SATELLITE,
+    projection: "globe",
+    pitch: 30,
+    bearing: 0,
+    zoom: 13.5,
+    center: [-5.513465218122661, 55.44452556522981],
+  });
+
+  window.__map = map;
+
+  const geojson = await fetchGeoJSON("/animated-route.geojson");
+
+  await map.onReadyAsync();
+
+  map.addSource("route-source", {
+    type: "geojson",
+    data: geojson,
+    lineMetrics: true,
+  });
+
+  map.addLayer({
+    id: "route-layer",
+    type: "line",
+    source: "route-source",
+    layout: {
+      "line-cap": "round",
+      "line-join": "round",
+    },
+    paint: {
+      "line-width": 5,
+      "line-color": "#FF0000",
+      "line-opacity": 0.8,
+    },
+  });
+
+  const animatedRouteLayer = new AnimatedRouteLayer({
+    manualUpdate: true,
+    source: {
+      id: "route-source",
+      layerID: "route-layer",
+      featureSetIndex: 0,
+    },
+    duration: 10000,
+    iterations: 1,
+    pathStrokeAnimation: {
+      activeColor: [0, 255, 0, 1],
+      inactiveColor: [100, 100, 100, 0.5],
+    },
+    cameraAnimation: {
+      pathSmoothing: {
+        resolution: 20,
+        epsilon: 2,
+      },
+    },
+  });
+
+  map.addLayer(animatedRouteLayer);
+
+  window.__pageObjects = {
+    animatedRouteLayer,
+  };
+}
+
+main();
diff --git a/e2e/src/mapLoad.ts b/e2e/src/mapLoad.ts
@@ -0,0 +1,12 @@
+import "@maptiler/sdk/dist/maptiler-sdk.css";
+import { Map as MapTiler, MapStyle } from "@maptiler/sdk";
+
+const map = new MapTiler({
+  container: "map",
+  apiKey: "DOESNT_MATTER",
+  style: MapStyle.SATELLITE,
+  projection: "globe",
+  zoom: 3,
+});
+
+window.__map = map;
diff --git a/e2e/tests/AnimatedRouteLayer.test.ts b/e2e/tests/AnimatedRouteLayer.test.ts
@@ -0,0 +1,45 @@
+import { expect, test } from "@playwright/test";
+import getMapInstanceForFixture from "./helpers/getMapInstanceForFixture";
+import { AnimatedRouteLayer } from "index";
+import { Map } from "@maptiler/sdk";
+import expected from "./expected-results/animatedRouteLayer-1.json" assert { type: "json" };
+
+test("Follows the correct path taking screenshots at each interval", async ({ page }) => {
+  await getMapInstanceForFixture({
+    fixture: "animatedRouteLayer",
+    page,
+    timeout: 10000,
+  });
+
+  expect(await page.title()).toBe("MapTiler E2E Animated Route Layer");
+
+  await page.exposeFunction("notifyScreenshotStateReady", async (data: Record<string, TTestTransferData>) => {
+    await expect(page).toHaveScreenshot(`animated-route-${data.frame}.png`);
+    expect(data).toEqual(expected[data.frame as number]);
+  });
+
+  await page.clock.install();
+
+  await page.evaluate(async () => {
+    const NUM_SCREENSHOTS = 20;
+    const NUM_FRAMES_BETWEEN_SCREENSHOTS = 20;
+
+    const { animatedRouteLayer } = window.__pageObjects as { animatedRouteLayer: AnimatedRouteLayer };
+    const map = window.__map as Map;
+
+    for (let i = 0; i < NUM_SCREENSHOTS; i++) {
+      for (let j = 0; j < NUM_FRAMES_BETWEEN_SCREENSHOTS; j++) {
+        animatedRouteLayer.updateManual();
+      }
+      await window.notifyScreenshotStateReady({
+        frame: i,
+        center: map.getCenter().toArray(),
+        zoom: map.getZoom(),
+        pitch: map.getPitch(),
+        bearing: map.getBearing(),
+      });
+    }
+  });
+
+  await page.clock.runFor(10000);
+});
diff --git a/e2e/tests/consts.ts b/e2e/tests/consts.ts