@maptiler/sdk 3.9.0 → 3.9.1-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/maptiler-sdk.mjs +2046 -2054
- package/dist/maptiler-sdk.mjs.map +1 -1
- package/dist/src/Map.d.ts +15 -10
- package/dist/src/custom-layers/CubemapLayer/CubemapLayer.d.ts +1 -1
- package/dist/src/custom-layers/RadialGradientLayer/RadialGradientLayer.d.ts +1 -1
- package/e2e/global.d.ts +12 -0
- package/e2e/public/mapLoad.html +24 -0
- package/e2e/snapshots/tests/map-load.test.ts-snapshots/mapLoad-chromium-linux.png +0 -0
- package/e2e/tests/helpers/loadFixtureAndGetMapHandle.ts +97 -0
- package/e2e/tests/map-load.test.ts +14 -0
- package/e2e/tests/mocks/maptiler-style.json +27 -0
- package/e2e/tests/mocks/terrain-tile.png +0 -0
- package/e2e/tests/mocks/tile.png +0 -0
- package/e2e/tsconfig.json +16 -0
- package/package.json +8 -2
- package/playwright.config.ts +83 -0
package/dist/src/Map.d.ts
CHANGED
|
@@ -48,14 +48,18 @@ export type MapOptions = Omit<MapOptionsML, "style" | "maplibreLogo"> & {
|
|
|
48
48
|
*/
|
|
49
49
|
apiKey?: string;
|
|
50
50
|
/**
|
|
51
|
-
* Shows or hides the MapTiler logo in the bottom left corner.
|
|
51
|
+
* Shows or hides the MapTiler logo in the bottom left corner (only for paid plans).
|
|
52
|
+
* Default is `false` for paid plans.
|
|
52
53
|
*
|
|
53
|
-
* For
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
*
|
|
54
|
+
* For free plans the MapTiler logo is always visible, and cannot be disabled.
|
|
55
|
+
* @example
|
|
56
|
+
* ```ts
|
|
57
|
+
* mapTilerLogo: false // hides the logo
|
|
58
|
+
* ```
|
|
59
|
+
* @example
|
|
60
|
+
* ```ts
|
|
61
|
+
* mapTilerLogo: true // shows the logo
|
|
62
|
+
* ```
|
|
59
63
|
*/
|
|
60
64
|
maptilerLogo?: boolean;
|
|
61
65
|
/**
|
|
@@ -182,12 +186,12 @@ export declare class Map extends maplibregl.Map {
|
|
|
182
186
|
* @param active - Whether the animation should be active.
|
|
183
187
|
*/
|
|
184
188
|
setSpaceAnimationActive(active: boolean): void;
|
|
185
|
-
private
|
|
186
|
-
private
|
|
189
|
+
private setSpaceFromStyle;
|
|
190
|
+
private setHaloFromStyle;
|
|
187
191
|
private initSpace;
|
|
188
192
|
private initHalo;
|
|
189
193
|
getHalo(): RadialGradientLayer | undefined;
|
|
190
|
-
setHalo(halo: GradientDefinition
|
|
194
|
+
setHalo(halo: GradientDefinition): void;
|
|
191
195
|
private options;
|
|
192
196
|
private isTerrainEnabled;
|
|
193
197
|
private terrainExaggeration;
|
|
@@ -249,6 +253,7 @@ export declare class Map extends maplibregl.Map {
|
|
|
249
253
|
* - a longer form with the prefix `"maptiler://"` (eg. `"maptiler://streets-v2"`)
|
|
250
254
|
*/
|
|
251
255
|
setStyle(style: null | ReferenceMapStyle | MapStyleVariant | StyleSpecification | StyleSpecificationWithMetaData | string, options?: StyleSwapOptions & StyleOptions): this;
|
|
256
|
+
private spaceboxLoadingState;
|
|
252
257
|
/**
|
|
253
258
|
* Adds a [MapLibre style layer](https://maplibre.org/maplibre-style-spec/layers)
|
|
254
259
|
* to the map's style.
|
|
@@ -209,7 +209,7 @@ declare class CubemapLayer implements CustomLayerInterface {
|
|
|
209
209
|
* @param {CubemapDefinition} spec - The cubemap specification to compare with the current cubemap.
|
|
210
210
|
* @returns {boolean} True if the cubemap needs to be updated, false otherwise.
|
|
211
211
|
*/
|
|
212
|
-
shouldUpdate(newSpec?: CubemapDefinition): boolean;
|
|
212
|
+
shouldUpdate(newSpec?: CubemapDefinition | boolean): boolean;
|
|
213
213
|
private setCubemapFaces;
|
|
214
214
|
/**
|
|
215
215
|
* Sets the cubemap for the layer based on the provided definition.
|
|
@@ -102,7 +102,7 @@ export declare class RadialGradientLayer implements CustomLayerInterface {
|
|
|
102
102
|
* @param {GradientDefinition} spec - The gradient specification to compare with the current gradient.
|
|
103
103
|
* @returns {boolean} True if the gradient needs to be updated, false otherwise.
|
|
104
104
|
*/
|
|
105
|
-
shouldUpdate(newSpec?: GradientDefinition): boolean;
|
|
105
|
+
shouldUpdate(newSpec?: GradientDefinition | boolean): boolean;
|
|
106
106
|
/**
|
|
107
107
|
* Animates the radial gradient into view by gradually scaling from 0 to the target scale.
|
|
108
108
|
*
|
package/e2e/global.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Map } from "../src";
|
|
2
|
+
|
|
3
|
+
declare global {
|
|
4
|
+
interface Window {
|
|
5
|
+
__map: Map;
|
|
6
|
+
__pageObjects: Record<string, any>;
|
|
7
|
+
notifyScreenshotStateReady: (data: TTestTransferData) => Promise<void>;
|
|
8
|
+
notifyTest: (data: TTestTransferData) => Promise<void>;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
type TTestTransferData = string | number | boolean | string[] | number[] | boolean[] | null | Record<string, unknown> | [number, number];
|
|
12
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>MapTiler E2E Map Load</title>
|
|
7
|
+
<style>
|
|
8
|
+
#map {
|
|
9
|
+
width: 100vw;
|
|
10
|
+
height: 100vh;
|
|
11
|
+
border: 1px solid red;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
margin: 0;
|
|
16
|
+
padding: 0;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<div id="map"></div>
|
|
22
|
+
<script type="module" src="/src/mapLoad.ts"></script>
|
|
23
|
+
</body>
|
|
24
|
+
</html>
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import type { Map } from "../../../src/index";
|
|
2
|
+
import { JSHandle, Page, expect } from "@playwright/test";
|
|
3
|
+
import path from "path";
|
|
4
|
+
|
|
5
|
+
interface IloadFixtureAndGetMapHandle {
|
|
6
|
+
fixture: string;
|
|
7
|
+
page: Page;
|
|
8
|
+
mockStyle?: boolean;
|
|
9
|
+
mockTiles?: boolean;
|
|
10
|
+
debug?: boolean;
|
|
11
|
+
waitUntil?: "load" | "domcontentloaded" | "networkidle";
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export default async function loadFixtureAndGetMapHandle({
|
|
15
|
+
fixture,
|
|
16
|
+
page,
|
|
17
|
+
mockStyle = true,
|
|
18
|
+
mockTiles = true,
|
|
19
|
+
debug = false,
|
|
20
|
+
waitUntil = 'load',
|
|
21
|
+
}: IloadFixtureAndGetMapHandle): Promise<{ mapHandle: JSHandle<Map | null> }> {
|
|
22
|
+
if (mockStyle) {
|
|
23
|
+
// mock style response
|
|
24
|
+
await page.route('https://api.maptiler.com/maps/*/*.json*', async route => {
|
|
25
|
+
if (debug) console.info(`ℹ️ Style intercepted at ${route.request().url()}`)
|
|
26
|
+
await route.fulfill({
|
|
27
|
+
status: 200,
|
|
28
|
+
contentType: 'application/json',
|
|
29
|
+
path: path.resolve(import.meta.dirname, '../mocks/maptiler-style.json'),
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
if (mockTiles) {
|
|
35
|
+
// mocks the tile response always returning the mock tile
|
|
36
|
+
await page.route('https://api.maptiler.com/tiles/*/*/*/*.jpg?key=*&*', route => {
|
|
37
|
+
if (debug) console.info(`ℹ️ Tile intercepted at ${route.request().url()}`)
|
|
38
|
+
return route.fulfill({
|
|
39
|
+
status: 200,
|
|
40
|
+
contentType: 'image/png',
|
|
41
|
+
path: path.resolve(import.meta.dirname, `../mocks/tile.png`),
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
page.on('console', msg => {
|
|
47
|
+
console.log('FIXTURE LOG:', msg.text());
|
|
48
|
+
if (debug) {
|
|
49
|
+
console.log('DEBUG FIXTURE LOG:', msg.location(), msg.text());
|
|
50
|
+
}
|
|
51
|
+
})
|
|
52
|
+
|
|
53
|
+
page.addListener('requestfinished', async (request) => {
|
|
54
|
+
const response = await request.response()
|
|
55
|
+
if (response && response.status() >= 400) {
|
|
56
|
+
console.error(`\n\nFailed to load ${request.url()}\n status: ${response.status()}\n\n`);
|
|
57
|
+
expect(response.status()).toBeLessThan(400);
|
|
58
|
+
}
|
|
59
|
+
})
|
|
60
|
+
|
|
61
|
+
await page.goto(`http://localhost:5173/${fixture}.html`, {
|
|
62
|
+
waitUntil,
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
try {
|
|
66
|
+
const mapHandle = await page.evaluateHandle<Map | null>(() => {
|
|
67
|
+
return Promise.race<Map | null>([
|
|
68
|
+
new Promise<Map | null>(async (resolve) => {
|
|
69
|
+
try {
|
|
70
|
+
window.__map.on("idle", ()=> {
|
|
71
|
+
resolve(window.__map as Map);
|
|
72
|
+
})
|
|
73
|
+
} catch (e) {
|
|
74
|
+
console.error('Error getting map instance', e);
|
|
75
|
+
resolve(null)
|
|
76
|
+
}
|
|
77
|
+
}),
|
|
78
|
+
new Promise<Map | null>((resolve) => {
|
|
79
|
+
setTimeout(() => {
|
|
80
|
+
console.error('Map did not load in time');
|
|
81
|
+
resolve(null);
|
|
82
|
+
}, 10000);
|
|
83
|
+
})
|
|
84
|
+
])
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
return {
|
|
88
|
+
mapHandle,
|
|
89
|
+
}
|
|
90
|
+
} catch(e) {
|
|
91
|
+
console.error(e);
|
|
92
|
+
const nullMap = await page.evaluateHandle(() => null)
|
|
93
|
+
return {
|
|
94
|
+
mapHandle: nullMap as JSHandle<Map | null>,
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { expect, test } from "@playwright/test";
|
|
2
|
+
|
|
3
|
+
import loadFixtureAndGetMapHandle from "./helpers/loadFixtureAndGetMapHandle";
|
|
4
|
+
|
|
5
|
+
test("Awaits until map ready and takes snapshot", async ({ page }, testInfo) => {
|
|
6
|
+
await loadFixtureAndGetMapHandle({
|
|
7
|
+
fixture: "mapLoad",
|
|
8
|
+
page,
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
expect(await page.title()).toBe("MapTiler E2E Map Load");
|
|
12
|
+
|
|
13
|
+
await expect(page).toHaveScreenshot("mapLoad.png");
|
|
14
|
+
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 8,
|
|
3
|
+
"sources": {
|
|
4
|
+
"raster": {
|
|
5
|
+
"type": "raster",
|
|
6
|
+
"tiles": [
|
|
7
|
+
"https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=DOESNT_MATTER"
|
|
8
|
+
],
|
|
9
|
+
"tileSize": 256
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
"layers": [
|
|
13
|
+
{
|
|
14
|
+
"id": "raster",
|
|
15
|
+
"type": "raster",
|
|
16
|
+
"source": "raster",
|
|
17
|
+
"minzoom": 0,
|
|
18
|
+
"maxzoom": 22
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"metadata": {
|
|
22
|
+
"maptiler": {
|
|
23
|
+
"version": "1.0.0",
|
|
24
|
+
"attribution": "© MapTiler © OpenStreetMap contributors"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../tsconfig.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"types": ["./global.d.ts", "node"],
|
|
5
|
+
"noUnusedLocals": false,
|
|
6
|
+
"noUnusedParameters": false,
|
|
7
|
+
"moduleResolution": "node",
|
|
8
|
+
"resolveJsonModule": true,
|
|
9
|
+
},
|
|
10
|
+
"include": [
|
|
11
|
+
"./tests/**/*.test.ts",
|
|
12
|
+
"./global.d.ts",
|
|
13
|
+
"./src/**/*.ts",
|
|
14
|
+
"../src/**/*.d.ts"
|
|
15
|
+
]
|
|
16
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maptiler/sdk",
|
|
3
|
-
"version": "3.9.
|
|
3
|
+
"version": "3.9.1-rc.2",
|
|
4
4
|
"description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
|
|
5
5
|
"author": "MapTiler",
|
|
6
6
|
"module": "dist/maptiler-sdk.mjs",
|
|
@@ -50,7 +50,11 @@
|
|
|
50
50
|
"build-umd": "tsc && NODE_ENV=production vite build -c vite.config-umd.ts",
|
|
51
51
|
"build-es": "tsc && NODE_ENV=production vite build -c vite.config-es.ts",
|
|
52
52
|
"build": "npm run build-es; npm run build-umd; npm run build-css",
|
|
53
|
-
"make": "npm run install:clean && npm run build"
|
|
53
|
+
"make": "npm run install:clean && npm run build",
|
|
54
|
+
"e2e:serve": "npm run build-css && tsc --project ./e2e && NODE_ENV=development vite -c vite.config-e2e.ts",
|
|
55
|
+
"e2e:local": "npx playwright test --config=playwright.config.ts --ui",
|
|
56
|
+
"e2e:ci": "npm run build-css && concurrently --kill-others --success first \"tsc --project ./e2e && NODE_ENV=production vite -c vite.config-e2e.ts\" \"npx playwright test --config=playwright.config.ts\"",
|
|
57
|
+
"e2e:ci-update": "npm run build-css && concurrently --kill-others --success first \"tsc --project ./e2e && NODE_ENV=production vite -c vite.config-e2e.ts\" \"npx playwright test --config=playwright.config.ts -u\""
|
|
54
58
|
},
|
|
55
59
|
"lint-staged": {
|
|
56
60
|
"*.ts": "npm run lint:fix"
|
|
@@ -61,8 +65,10 @@
|
|
|
61
65
|
"devDependencies": {
|
|
62
66
|
"@canvas/image-data": "^1.0.0",
|
|
63
67
|
"@eslint/js": "^9.21.0",
|
|
68
|
+
"@playwright/test": "^1.51.0",
|
|
64
69
|
"@types/color-convert": "^2.0.4",
|
|
65
70
|
"@types/color-name": "^2.0.0",
|
|
71
|
+
"@types/node": "^25.0.0",
|
|
66
72
|
"@types/stats.js": "^0.17.4",
|
|
67
73
|
"@types/uuid": "^10.0.0",
|
|
68
74
|
"@types/xmldom": "^0.1.31",
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { defineConfig, devices } from '@playwright/test';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Read environment variables from file.
|
|
5
|
+
* https://github.com/motdotla/dotenv
|
|
6
|
+
*/
|
|
7
|
+
// import dotenv from 'dotenv';
|
|
8
|
+
// import path from 'path';
|
|
9
|
+
// dotenv.config({ path: path.resolve(__dirname, '.env') });
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* See https://playwright.dev/docs/test-configuration.
|
|
13
|
+
*/
|
|
14
|
+
export default defineConfig({
|
|
15
|
+
testDir: 'e2e',
|
|
16
|
+
// testMatch: '**/*.test.ts',
|
|
17
|
+
/* Run tests in files in parallel */
|
|
18
|
+
fullyParallel: true,
|
|
19
|
+
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
|
20
|
+
forbidOnly: !!process.env.CI,
|
|
21
|
+
/* Retry on CI only */
|
|
22
|
+
retries: process.env.CI ? 2 : 0,
|
|
23
|
+
/* Opt out of parallel tests on CI. */
|
|
24
|
+
workers: process.env.CI ? 1 : undefined,
|
|
25
|
+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
|
26
|
+
reporter: 'html',
|
|
27
|
+
tsconfig: './e2e/tsconfig.json',
|
|
28
|
+
|
|
29
|
+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
|
30
|
+
use: {
|
|
31
|
+
/* Base URL to use in actions like `await page.goto('/')`. */
|
|
32
|
+
// baseURL: 'http://127.0.0.1:3000',
|
|
33
|
+
|
|
34
|
+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
|
35
|
+
trace: 'on-first-retry',
|
|
36
|
+
},
|
|
37
|
+
|
|
38
|
+
snapshotDir: './e2e/snapshots',
|
|
39
|
+
/* Configure projects for major browsers */
|
|
40
|
+
projects: [
|
|
41
|
+
{
|
|
42
|
+
name: 'chromium',
|
|
43
|
+
use: { ...devices['Desktop Chrome'], },
|
|
44
|
+
|
|
45
|
+
},
|
|
46
|
+
|
|
47
|
+
// {
|
|
48
|
+
// name: 'firefox',
|
|
49
|
+
// use: { ...devices['Desktop Firefox'] },
|
|
50
|
+
// },
|
|
51
|
+
|
|
52
|
+
// {
|
|
53
|
+
// name: 'webkit',
|
|
54
|
+
// use: { ...devices['Desktop Safari'] },
|
|
55
|
+
// },
|
|
56
|
+
/* Test against mobile viewports. */
|
|
57
|
+
// {
|
|
58
|
+
// name: 'Mobile Chrome',
|
|
59
|
+
// use: { ...devices['Pixel 5'] },
|
|
60
|
+
// },
|
|
61
|
+
// {
|
|
62
|
+
// name: 'Mobile Safari',
|
|
63
|
+
// use: { ...devices['iPhone 12'] },
|
|
64
|
+
// },
|
|
65
|
+
|
|
66
|
+
/* Test against branded browsers. */
|
|
67
|
+
// {
|
|
68
|
+
// name: 'Microsoft Edge',
|
|
69
|
+
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
|
|
70
|
+
// },
|
|
71
|
+
// {
|
|
72
|
+
// name: 'Google Chrome',
|
|
73
|
+
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
|
|
74
|
+
// },
|
|
75
|
+
],
|
|
76
|
+
|
|
77
|
+
/* Run your local dev server before starting the tests */
|
|
78
|
+
// webServer: {
|
|
79
|
+
// command: 'npm run e2e:serve',
|
|
80
|
+
// url: 'http://localhost:5173',
|
|
81
|
+
// reuseExistingServer: !process.env.CI,
|
|
82
|
+
// },
|
|
83
|
+
});
|