Fix match-media experiments to work on maps4html.org

Maps4HTML · Nov 16, 2024 · fdc97bc · fdc97bc
1 parent efcd455
commit fdc97bc
Show file tree

Hide file tree

Showing 7 changed files with 253 additions and 175 deletions.
diff --git a/styling/media-queries/match-media/map-projection/darkTheme.js b/styling/media-queries/match-media/map-projection/darkTheme.js
@@ -1,6 +1,19 @@
+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(
+const pmtilesRulesReady = sheet.load().then(() => {
+  pmtilesRules.set(
   'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark',
-  { theme: { theme: 'dark' } }
-);
-export { pmtilesRules };
+    { theme: { theme: 'dark' } }
+  );
+  return pmtilesRules;
+});
+
+export { pmtilesRules, pmtilesRulesReady };
diff --git a/styling/media-queries/match-media/map-projection/index.html b/styling/media-queries/match-media/map-projection/index.html
@@ -74,7 +74,7 @@
         <map-input name="z" type="zoom" min="0" max="18"></map-input>
         <map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
         <map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
-        <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
+        <map-link rel="tile" tref="https://maps-cartes.services.geo.ca/server2_serveur2/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
       </map-extent>
     </map-layer>
   </mapml-viewer>

diff --git a/styling/media-queries/match-media/map-projection/lightTheme.js b/styling/media-queries/match-media/map-projection/lightTheme.js
@@ -1,14 +1,27 @@
+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(
-  'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
-  { theme: { theme: 'light' } }
-);
-pmtilesRules.set(
+const pmtilesRulesReady = sheet.load().then(() => {
+  pmtilesRules.set(
+    'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
+    { theme: { theme: 'light' } }
+  );
+  pmtilesRules.set(
   'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light',
-  { theme: { theme: 'light' } }
-);
-pmtilesRules.set(
-  'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
-  { theme: { theme: 'light' } }
-);
-export { pmtilesRules };
+    { theme: { theme: 'light' } }
+  );
+  pmtilesRules.set(
+    'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
+    { theme: { theme: 'light' } }
+  );
+  return pmtilesRules;
+});
+
+export { pmtilesRules, pmtilesRulesReady };
diff --git a/styling/media-queries/match-media/map-projection/pmtilesRules.js b/styling/media-queries/match-media/map-projection/pmtilesRules.js
@@ -17,77 +17,90 @@ class SpearfishSymbolizer {
     context.fill();
   }
 }
+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(
-  'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
-  { theme: { theme: 'light' } }
-);
-pmtilesRules.set(
-  'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light',
-  { theme: { theme: 'light' } }
-);
-pmtilesRules.set(
-  'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark',
-  { theme: { theme: 'dark' } }
-);
-pmtilesRules.set(
-  'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
-  { theme: { theme: 'light' } }
-);
-pmtilesRules.set(
-  'http://localhost:8080/geoserver/gwc/service/wmts/rest/spearfish/OSMTILE/{z}/{y}/{x}?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://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light',
+    { theme: { theme: 'light' } }
+  );
+  pmtilesRules.set(
+    'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark',
+    { theme: { theme: 'dark' } }
+  );
+  pmtilesRules.set(
+    'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
+    { theme: { theme: 'light' } }
+  );
+  pmtilesRules.set(
+    'https://maps4html.org/experiments/vector-tiles/pmtiles/tiles/{z}/{y}/{x}.mvt?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 };
diff --git a/styling/media-queries/match-media/prefers-color-scheme/darkTheme.js b/styling/media-queries/match-media/prefers-color-scheme/darkTheme.js
@@ -1,6 +1,19 @@
+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(
+const pmtilesRulesReady = sheet.load().then(() => {
+  pmtilesRules.set(
   'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark',
-  { theme: { theme: 'dark' } }
-);
-export { pmtilesRules };
+    { theme: { theme: 'dark' } }
+  );
+  return pmtilesRules;
+});
+
+export { pmtilesRules, pmtilesRulesReady };
diff --git a/styling/media-queries/match-media/prefers-color-scheme/lightTheme.js b/styling/media-queries/match-media/prefers-color-scheme/lightTheme.js
@@ -1,14 +1,27 @@
+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(
-  'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
-  { theme: { theme: 'light' } }
-);
-pmtilesRules.set(
+const pmtilesRulesReady = sheet.load().then(() => {
+  pmtilesRules.set(
+    'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
+    { theme: { theme: 'light' } }
+  );
+  pmtilesRules.set(
   'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light',
-  { theme: { theme: 'light' } }
-);
-pmtilesRules.set(
-  'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
-  { theme: { theme: 'light' } }
-);
-export { pmtilesRules };
+    { theme: { theme: 'light' } }
+  );
+  pmtilesRules.set(
+    'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
+    { theme: { theme: 'light' } }
+  );
+  return pmtilesRules;
+});
+
+export { pmtilesRules, pmtilesRulesReady };