Change structure of pmtilesRules, allow icon sheet, require returned promise.

.github/workflows/ci-testing.yml

@@ -15,6 +15,7 @@ jobs:
         node-version: latest
     - run: sudo apt-get install xvfb
     - run: npm install
+    - run: npx playwright install  --with-deps
     - run: npm install -g grunt-cli
     - run: grunt default
     - run: xvfb-run --auto-servernum -- npx playwright test --grep-invert="popupTabNavigation\.test\.js|layerContextMenuKeyboard\.test\.js"  --workers=1 --retries=3

package.json

@@ -32,7 +32,8 @@
     }
   ],
   "scripts": {
-    "postinstall": "npx playwright install --with-deps",
+    "test-serve": "node test/server.js",
+    "postinstall": "npx playwright install",
     "test": "npx playwright test --retries=3 --workers=1"
   },
   "devDependencies": {

src/map-link.js

@@ -283,8 +283,9 @@ export class HTMLLinkElement extends HTMLElement {
         if (this.type === 'application/pmtiles+stylesheet') {
           const pmtilesStyles = new URL(this.href, this.getBase()).href;
           import(pmtilesStyles)
-            .then((module) => {
-              this._pmtilesRules = module.pmtilesRules;
+            .then((module) => module.pmtilesRulesReady)
+            .then((initializedRules) => {
+              this._pmtilesRules = initializedRules;
             })
             .catch((reason) => {
               console.error(
@@ -399,19 +400,24 @@ export class HTMLLinkElement extends HTMLElement {
               s +
               ')'
           )?.querySelector(s);
-      let options = {
-        zoomBounds: this.getZoomBounds(),
-        extentBounds: this.getBounds(),
-        crs: M[this.parentExtent.units],
-        zIndex: this.zIndex,
-        pane: this.parentExtent._extentLayer.getContainer(),
-        linkEl: this,
-        pmtilesRules: pmtilesStylesheetLink?._pmtilesRules
-      };
-      this._templatedLayer = templatedPMTilesLayer(
-        this._templateVars,
-        options
-      ).addTo(this.parentExtent._extentLayer);
+      if (pmtilesStylesheetLink) {
+        await pmtilesStylesheetLink.whenReady();
+        let options = {
+          zoomBounds: this.getZoomBounds(),
+          extentBounds: this.getBounds(),
+          crs: M[this.parentExtent.units],
+          zIndex: this.zIndex,
+          pane: this.parentExtent._extentLayer.getContainer(),
+          linkEl: this,
+          pmtilesRules: pmtilesStylesheetLink?._pmtilesRules
+        };
+        this._templatedLayer = templatedPMTilesLayer(
+          this._templateVars,
+          options
+        ).addTo(this.parentExtent._extentLayer);
+      } else {
+        console.warn('Stylesheet not found for ' + this._templateVars.template);
+      }
     } else if (this.rel === 'tile') {
       this._templatedLayer = templatedTileLayer(this._templateVars, {
         zoomBounds: this.getZoomBounds(),
@@ -967,7 +973,7 @@ export class HTMLLinkElement extends HTMLElement {
           break;
         case 'stylesheet':
           if (this.type === 'application/pmtiles+stylesheet') {
-            ready = _pmtilesRules;
+            ready = '_pmtilesRules';
           } else {
             resolve();
           }
@@ -986,7 +992,7 @@ export class HTMLLinkElement extends HTMLElement {
         resolve();
       }
       interval = setInterval(testForLinkReady, 300, this);
-      failureTimer = setTimeout(linkNotDefined, 10000);
+      failureTimer = setTimeout(linkNotDefined, 1000);
       function testForLinkReady(linkElement) {
         if (linkElement[ready]) {
           clearInterval(interval);

src/mapml/layers/TemplatedPMTilesLayer.js

@@ -5,6 +5,7 @@ window.L = Leaflet;
 
 import { Util } from '../utils/Util.js';
 import * as protomapsL from 'protomaps-leaflet';
+window.protomapsL = protomapsL;
 
 export var TemplatedPMTilesLayer = Layer.extend({
   initialize: function (template, options) {
@@ -42,6 +43,9 @@ export var TemplatedPMTilesLayer = Layer.extend({
       extend(this._pmtilesOptions, {
         labelRules: paintRules.rules.LABEL_RULES
       });
+      if (paintRules.sheet) {
+        extend(this._pmtilesOptions, { tasks: [paintRules.sheet.load()] });
+      }
     } else if (paintRules?.theme?.theme) {
       extend(this._pmtilesOptions, { theme: paintRules.theme.theme });
     } else {

src/pmtilesRules.js

@@ -58,6 +58,15 @@
  * as described here: https://docs.protomaps.com/pmtiles/leaflet, and as
  * exemplified below.
  */
+const sheet = new protomapsL.Sheet(`
+<html>
+  <body>
+    <svg id="icon_0" width="99px" height="97px" xmlns="http://www.w3.org/2000/svg">
+      <image href="data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbl82NCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgPGltYWdlIGhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQkFBQUFBUUNBWUFBQUFmOC85aEFBQUFDWEJJV1hNQUFBN0VBQUFPeEFHVkt3NGJBQUFBMlVsRVFWUjRuTldQTVdvQ1lSQ0Z2MElDZ2xZaFZnRUwzZmNyZGlsczBteVJUdkFLa2xaSXdKM2ZpTjE2aGhoeUFCRkVjZ2J2WUtFbmtCUkpiNWtFSlRheXNNdFd5WVBYRFBPOW1RZC9YcjVHSlRkc1Rhb21wdm12TzBZbVB1T1FRcjRQeE5yRXR3L29wQzdITFM1TVRFd3NEdmFPdHdOOERCRGIwenh5eklkMWJoSkQraTFLWHN4T1lJSjN2a0dZM2ozZ1BnRmVqUnRjWnVvK2ROeWVCM2l4Skt0TXZQeUNtMGc4bS9neXNYOXlsRlBoT0tUZ3hZYzVYZ2ZYRkkrVnhKMkpkeE85MUlDQmFFZU83dm44b2M2VkQzak1YT1AvNkFmS0Ywd3dXeU9Oc3dBQUFBQkpSVTVFcmtKZ2dnPT0iIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPgogICAgPC9zdmc+" width="99" height="97" />
+    </svg>
+  </body>
+</html>
+`);
 
 class SpearfishSymbolizer {
   constructor(options) {
@@ -88,87 +97,91 @@ class SpearfishSymbolizer {
 
         */
 const pmtilesRules = new Map();
-pmtilesRules.set(
-  'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
-  { theme: { theme: 'light' } }
-);
-pmtilesRules.set(
-  'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles?theme=light',
-  { theme: { theme: 'light' } }
-);
-pmtilesRules.set(
-  'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles?theme=dark',
-  { theme: { theme: 'dark' } }
-);
-pmtilesRules.set(
-  'https://api.protomaps.com/tiles/v3/{bing}/{bong}/{bang}.mvt?key=41392fb7515533a5',
-  { theme: { theme: 'light' } }
-);
-pmtilesRules.set(
-  'http://localhost:8080/geoserver/gwc/service/wmts/rest/spearfish/OSMTILE/{foo}/{baz}/{bar}?format=application/vnd.mapbox-vector-tile',
-  {
-    rules: {
-      PAINT_RULES: [
-        {
-          dataLayer: 'streams',
-          symbolizer: new protomapsL.LineSymbolizer({
-            color: 'steelblue',
-            width: 2
-          })
-        },
-        {
-          dataLayer: 'roads',
-          symbolizer: new protomapsL.LineSymbolizer({
-            color: 'maroon',
-            width: 2
-          })
-        },
-        {
-          dataLayer: 'restricted',
-          symbolizer: new protomapsL.PolygonSymbolizer({
-            fill: 'red',
-            opacity: 0.5
-          })
-        },
-        {
-          dataLayer: 'restricted',
-          symbolizer: new protomapsL.LineSymbolizer({
-            color: 'red',
-            width: 2
-          })
-        },
-        {
-          dataLayer: 'archsites',
-          symbolizer: new SpearfishSymbolizer({
-            color: 'red',
-            shape: 'square'
-          })
-        },
-        {
-          dataLayer: 'bugsites',
-          symbolizer: new SpearfishSymbolizer({
-            color: 'black',
-            shape: 'circle'
-          })
-        }
-      ],
-      LABEL_RULES: [
-        {
-          dataLayer: 'archsites',
-          symbolizer: new protomapsL.CenteredTextSymbolizer({
-            labelProps: ['str1'],
-            fill: 'white',
-            width: 2,
-            stroke: 'black',
-            font: '600 16px sans-serif'
-          }),
-          // note that filter is a property of a rule, not an option to a symbolizer
-          filter: (z, f) => {
-            return f.props.str1.trim().toLowerCase() !== 'no name';
+const pmtilesRulesReady = sheet.load().then(() => {
+  pmtilesRules.set(
+    'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
+    { theme: { theme: 'light' } }
+  );
+  pmtilesRules.set(
+    'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles?theme=light',
+    { theme: { theme: 'light' } }
+  );
+  pmtilesRules.set(
+    'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles?theme=dark',
+    { theme: { theme: 'dark' } }
+  );
+  pmtilesRules.set(
+    'https://api.protomaps.com/tiles/v3/{bing}/{bong}/{bang}.mvt?key=41392fb7515533a5',
+    { theme: { theme: 'light' } }
+  );
+  pmtilesRules.set(
+    'http://localhost:8080/geoserver/gwc/service/wmts/rest/spearfish/OSMTILE/{foo}/{baz}/{bar}?format=application/vnd.mapbox-vector-tile',
+    {
+      rules: {
+        PAINT_RULES: [
+          {
+            dataLayer: 'streams',
+            symbolizer: new protomapsL.LineSymbolizer({
+              color: 'steelblue',
+              width: 2
+            })
+          },
+          {
+            dataLayer: 'roads',
+            symbolizer: new protomapsL.LineSymbolizer({
+              color: 'maroon',
+              width: 2
+            })
+          },
+          {
+            dataLayer: 'restricted',
+            symbolizer: new protomapsL.PolygonSymbolizer({
+              fill: 'red',
+              opacity: 0.5
+            })
+          },
+          {
+            dataLayer: 'restricted',
+            symbolizer: new protomapsL.LineSymbolizer({
+              color: 'red',
+              width: 2
+            })
+          },
+          {
+            dataLayer: 'archsites',
+            symbolizer: new SpearfishSymbolizer({
+              color: 'red',
+              shape: 'square'
+            })
+          },
+          {
+            dataLayer: 'bugsites',
+            symbolizer: new SpearfishSymbolizer({
+              color: 'black',
+              shape: 'circle'
+            })
           }
-        }
-      ]
+        ],
+        LABEL_RULES: [
+          {
+            dataLayer: 'archsites',
+            symbolizer: new protomapsL.CenteredTextSymbolizer({
+              labelProps: ['str1'],
+              fill: 'white',
+              width: 2,
+              stroke: 'black',
+              font: '600 16px sans-serif'
+            }),
+            // note that filter is a property of a rule, not an option to a symbolizer
+            filter: (z, f) => {
+              return f.props.str1.trim().toLowerCase() !== 'no name';
+            }
+          }
+        ]
+      }
     }
-  }
-);
-export { pmtilesRules };
+  );
+  return pmtilesRules;
+});
+
+export { pmtilesRules, pmtilesRulesReady };

test/e2e/elements/map-link/pmtiles/darkTheme.js

@@ -1,5 +1,18 @@
+const sheet = new protomapsL.Sheet(`
+<html>
+  <body>
+    <svg id="icon_0" width="99px" height="97px" xmlns="http://www.w3.org/2000/svg">
+      <image href="data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbl82NCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgPGltYWdlIGhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQkFBQUFBUUNBWUFBQUFmOC85aEFBQUFDWEJJV1hNQUFBN0VBQUFPeEFHVkt3NGJBQUFBMlVsRVFWUjRuTldQTVdvQ1lSQ0Z2MElDZ2xZaFZnRUwzZmNyZGlsczBteVJUdkFLa2xaSXdKM2ZpTjE2aGhoeUFCRkVjZ2J2WUtFbmtCUkpiNWtFSlRheXNNdFd5WVBYRFBPOW1RZC9YcjVHSlRkc1Rhb21wdm12TzBZbVB1T1FRcjRQeE5yRXR3L29wQzdITFM1TVRFd3NEdmFPdHdOOERCRGIwenh5eklkMWJoSkQraTFLWHN4T1lJSjN2a0dZM2ozZ1BnRmVqUnRjWnVvK2ROeWVCM2l4Skt0TXZQeUNtMGc4bS9neXNYOXlsRlBoT0tUZ3hZYzVYZ2ZYRkkrVnhKMkpkeE85MUlDQmFFZU83dm44b2M2VkQzak1YT1AvNkFmS0Ywd3dXeU9Oc3dBQUFBQkpSVTVFcmtKZ2dnPT0iIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPgogICAgPC9zdmc+" width="99" height="97" />
+    </svg>
+  </body>
+</html>
+`);
 const pmtilesRules = new Map();
-pmtilesRules.set('http://localhost:30001/spearfish.pmtiles?theme=dark', {
-  theme: { theme: 'dark' }
+const pmtilesRulesReady = sheet.load().then(() => {
+  pmtilesRules.set('http://localhost:30001/spearfish.pmtiles?theme=dark', {
+    theme: { theme: 'dark' }
+  });
+  return pmtilesRules;
 });
-export { pmtilesRules };
+
+export { pmtilesRules, pmtilesRulesReady };

test/e2e/elements/map-link/pmtiles/lightTheme.js

@@ -1,5 +1,18 @@
+const sheet = new protomapsL.Sheet(`
+<html>
+  <body>
+    <svg id="icon_0" width="99px" height="97px" xmlns="http://www.w3.org/2000/svg">
+      <image href="data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbl82NCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgPGltYWdlIGhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQkFBQUFBUUNBWUFBQUFmOC85aEFBQUFDWEJJV1hNQUFBN0VBQUFPeEFHVkt3NGJBQUFBMlVsRVFWUjRuTldQTVdvQ1lSQ0Z2MElDZ2xZaFZnRUwzZmNyZGlsczBteVJUdkFLa2xaSXdKM2ZpTjE2aGhoeUFCRkVjZ2J2WUtFbmtCUkpiNWtFSlRheXNNdFd5WVBYRFBPOW1RZC9YcjVHSlRkc1Rhb21wdm12TzBZbVB1T1FRcjRQeE5yRXR3L29wQzdITFM1TVRFd3NEdmFPdHdOOERCRGIwenh5eklkMWJoSkQraTFLWHN4T1lJSjN2a0dZM2ozZ1BnRmVqUnRjWnVvK2ROeWVCM2l4Skt0TXZQeUNtMGc4bS9neXNYOXlsRlBoT0tUZ3hZYzVYZ2ZYRkkrVnhKMkpkeE85MUlDQmFFZU83dm44b2M2VkQzak1YT1AvNkFmS0Ywd3dXeU9Oc3dBQUFBQkpSVTVFcmtKZ2dnPT0iIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPgogICAgPC9zdmc+" width="99" height="97" />
+    </svg>
+  </body>
+</html>
+`);
 const pmtilesRules = new Map();
-pmtilesRules.set('http://localhost:30001/spearfish.pmtiles?theme=light', {
-  theme: { theme: 'light' }
+const pmtilesRulesReady = sheet.load().then(() => {
+  pmtilesRules.set('http://localhost:30001/spearfish.pmtiles?theme=light', {
+    theme: { theme: 'light' }
+  });
+  return pmtilesRules;
 });
-export { pmtilesRules };
+
+export { pmtilesRules, pmtilesRulesReady };

test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.test.js

@@ -20,13 +20,16 @@ test.describe('pmtiles map-link with associated style can be in a remote mapml d
     layer.evaluate((l) => (l.checked = true));
     await page.waitForTimeout(500);
     await expect(viewer).toHaveScreenshot('pmtiles-dark.png', {
-      maxDiffPixels: 100
+      maxDiffPixels: 200
     });
   });
 
   test('map-link in remote content selects correct stylesheet link from context', 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);
     const darkExtent = viewer.getByTestId('dark-me');
     const lightExtent = viewer.getByTestId('light-me');
 
@@ -38,7 +41,7 @@ test.describe('pmtiles map-link with associated style can be in a remote mapml d
     });
     await page.waitForTimeout(500);
     await expect(viewer).toHaveScreenshot('pmtiles-light.png', {
-      maxDiffPixels: 100
+      maxDiffPixels: 200
     });
   });
   test('map-link in local content selects correct stylesheet link from context', async () => {
@@ -59,7 +62,7 @@ test.describe('pmtiles map-link with associated style can be in a remote mapml d
     });
     await page.waitForTimeout(500);
     await expect(viewer).toHaveScreenshot('pmtiles-local-light.png', {
-      maxDiffPixels: 100
+      maxDiffPixels: 200
     });
   });
 });