diff --git a/src/map-link.js b/src/map-link.js
index f3b9381d2..fbd1a365b 100644
--- a/src/map-link.js
+++ b/src/map-link.js
@@ -370,18 +370,15 @@ export class MapLink extends HTMLElement {
(this.rel === 'tile' && this.type === 'application/pmtiles') ||
this.type === 'application/vnd.mapbox-vector-tile'
) {
- let relativeSelector =
+ let s =
'map-link[rel="stylesheet"][type="application/pmtiles+stylesheet"]';
- let rules = M.getClosest(
- this,
- 'map-extent:has(' +
- relativeSelector +
- '),layer-:has(' +
- relativeSelector +
- '),mapml-viewer:has(' +
- relativeSelector +
- ')'
- )?.querySelector(relativeSelector)._pmtilesRules;
+ let pmtilesStylesheetLink = this.getLayerEl().src
+ ? this.closest('map-extent')?.querySelector(s) ??
+ this.getRootNode().querySelector(':host > ' + s)
+ : M.getClosest(
+ this,
+ 'map-extent:has(' + s + '),layer-:has(' + s + ')'
+ )?.querySelector(s);
let options = {
zoomBounds: this.getZoomBounds(),
extentBounds: this.getBounds(),
@@ -389,7 +386,7 @@ export class MapLink extends HTMLElement {
zIndex: this.zIndex,
pane: this.parentExtent._extentLayer.getContainer(),
linkEl: this,
- pmtilesRules: rules
+ pmtilesRules: pmtilesStylesheetLink?._pmtilesRules
};
this._templatedLayer = M.templatedPMTilesLayer(
this._templateVars,
diff --git a/test/e2e/elements/map-link/pmtiles/dark.mapml b/test/e2e/elements/map-link/pmtiles/dark.mapml
new file mode 100644
index 000000000..d6b3f2844
--- /dev/null
+++ b/test/e2e/elements/map-link/pmtiles/dark.mapml
@@ -0,0 +1,32 @@
+
+
+ pmtiles dark
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/e2e/elements/map-link/pmtiles/darkTheme.js b/test/e2e/elements/map-link/pmtiles/darkTheme.js
new file mode 100644
index 000000000..9b36b255c
--- /dev/null
+++ b/test/e2e/elements/map-link/pmtiles/darkTheme.js
@@ -0,0 +1,5 @@
+const pmtilesRules = new Map();
+pmtilesRules.set('http://localhost:30001/spearfish.pmtiles?theme=dark', {
+ theme: { theme: 'dark' }
+});
+export { pmtilesRules };
diff --git a/test/e2e/elements/map-link/pmtiles/light.mapml b/test/e2e/elements/map-link/pmtiles/light.mapml
new file mode 100644
index 000000000..29b5d88de
--- /dev/null
+++ b/test/e2e/elements/map-link/pmtiles/light.mapml
@@ -0,0 +1,14 @@
+
+
+ pmtiles light
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/e2e/elements/map-link/pmtiles/lightTheme.js b/test/e2e/elements/map-link/pmtiles/lightTheme.js
new file mode 100644
index 000000000..32da48b01
--- /dev/null
+++ b/test/e2e/elements/map-link/pmtiles/lightTheme.js
@@ -0,0 +1,5 @@
+const pmtilesRules = new Map();
+pmtilesRules.set('http://localhost:30001/spearfish.pmtiles?theme=light', {
+ theme: { theme: 'light' }
+});
+export { pmtilesRules };
diff --git a/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.html b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.html
new file mode 100644
index 000000000..75ff79140
--- /dev/null
+++ b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+ map-link-pmtiles-styles.html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js
new file mode 100644
index 000000000..a09f3f575
--- /dev/null
+++ b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js
@@ -0,0 +1,65 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe('pmtiles map-link with associated style can be in a remote mapml document', () => {
+ let page;
+ let context;
+ test.beforeAll(async function () {
+ context = await chromium.launchPersistentContext('');
+ page =
+ context.pages().find((page) => page.url() === 'about:blank') ||
+ (await context.newPage());
+ });
+
+ test.beforeEach(async function () {
+ await page.goto('pmtiles/map-link-pmtiles-styles.html');
+ });
+ test('map-link styles load correctly from within remote mapml', async () => {
+ const viewer = page.getByTestId('viewer');
+ await expect(viewer).toBeTruthy();
+ const layer = viewer.getByTestId('dark');
+ layer.evaluate((l) => (l.checked = true));
+ await page.waitForTimeout(500);
+ await expect(viewer).toHaveScreenshot('pmtiles-dark.png', {
+ maxDiffPixels: 100
+ });
+ });
+
+ test('map-link in remote content selects correct stylesheet link from context', async () => {
+ const viewer = page.getByTestId('viewer');
+ await expect(viewer).toBeTruthy();
+ const darkExtent = viewer.getByTestId('dark-me');
+ const lightExtent = viewer.getByTestId('light-me');
+
+ await darkExtent.evaluate((e) => {
+ e.removeAttribute('checked');
+ });
+ await lightExtent.evaluate((e) => {
+ e.checked = true;
+ });
+ await page.waitForTimeout(500);
+ await expect(viewer).toHaveScreenshot('pmtiles-light.png', {
+ maxDiffPixels: 100
+ });
+ });
+ test('map-link in local content selects correct stylesheet link from context', async () => {
+ const viewer = page.getByTestId('viewer');
+ await expect(viewer).toBeTruthy();
+ const remoteLayer = viewer.getByTestId('dark');
+ const layer = viewer.getByTestId('local-layer');
+ await layer.evaluate((l) => (l.checked = true));
+
+ const darkExtent = viewer.getByTestId('local-dark-me');
+ const lightExtent = viewer.getByTestId('local-light-me');
+
+ await darkExtent.evaluate((e) => {
+ e.removeAttribute('checked');
+ });
+ await lightExtent.evaluate((e) => {
+ e.checked = true;
+ });
+ await page.waitForTimeout(500);
+ await expect(viewer).toHaveScreenshot('pmtiles-local-light.png', {
+ maxDiffPixels: 100
+ });
+ });
+});
diff --git a/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-dark-linux.png b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-dark-linux.png
new file mode 100644
index 000000000..dcfc1f92d
Binary files /dev/null and b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-dark-linux.png differ
diff --git a/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-dark-win32.png b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-dark-win32.png
new file mode 100644
index 000000000..165797aa4
Binary files /dev/null and b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-dark-win32.png differ
diff --git a/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-light-linux.png b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-light-linux.png
new file mode 100644
index 000000000..9765b2968
Binary files /dev/null and b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-light-linux.png differ
diff --git a/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-light-win32.png b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-light-win32.png
new file mode 100644
index 000000000..d060480ee
Binary files /dev/null and b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-light-win32.png differ
diff --git a/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-local-light-linux.png b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-local-light-linux.png
new file mode 100644
index 000000000..0f5b58d97
Binary files /dev/null and b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-local-light-linux.png differ
diff --git a/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-local-light-win32.png b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-local-light-win32.png
new file mode 100644
index 000000000..30cd09f19
Binary files /dev/null and b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js-snapshots/pmtiles-local-light-win32.png differ
diff --git a/test/e2e/layers/templatedPMTilesMVTLayer.test.js b/test/e2e/layers/templatedPMTilesMVTLayer.test.js
index 4b6b14e4e..2a517c99f 100644
--- a/test/e2e/layers/templatedPMTilesMVTLayer.test.js
+++ b/test/e2e/layers/templatedPMTilesMVTLayer.test.js
@@ -143,7 +143,7 @@ test.describe('Playwright templatedPMTilesLayer Tests', () => {
await hardCodedVariablesLayer.evaluate((l) => (l.checked = true));
await page.waitForTimeout(1000);
await expect(viewer).toHaveScreenshot('mvt-blank.png', {
- maxDiffPixels: 1500
+ maxDiffPixels: 100
});
let errorLoadingModule = false;
let errorFindingRules = false;