Update pmtilesRules.js and similar stylesheet modules to new required

format (including `new protomapsL.Sheet(...)` and returning a promise. Add a few mvt tiles to demonstrate custom styling of 'private' mvt data
Maps4HTML · Nov 16, 2024 · d89dafe · d89dafe
1 parent 7018e9b
commit d89dafe
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 98 deletions.
diff --git a/vector-tiles/pmtiles/darkTheme.js b/vector-tiles/pmtiles/darkTheme.js
@@ -1,6 +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(
-  'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark',
-  { theme: { theme: 'dark' } }
-);
-export { pmtilesRules };
+const pmtilesRulesReady = sheet.load().then(() => {
+  pmtilesRules.set('https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark', {
+    theme: { theme: 'dark' }
+  });
+  return pmtilesRules;
+});
+
+export { pmtilesRules, pmtilesRulesReady };
diff --git a/vector-tiles/pmtiles/index.html b/vector-tiles/pmtiles/index.html
@@ -73,7 +73,7 @@
   </head>
   <body>
 
-  <mapml-viewer projection="OSMTILE" zoom="12" lat="44.436108753775116" lon="-103.75024795532228" controls controlslist="geolocation">
+  <mapml-viewer projection="OSMTILE" zoom="12" lat="44.436108753775116" lon="-103.75024795532228" controls controlslist="geolocation" static>
     <map-layer label="OpenStreetMap">
       <map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
       <map-extent units="OSMTILE" checked="checked">
@@ -96,19 +96,18 @@
       </map-extent>
     </map-layer>
 
-<!--    <map-layer label='Custom MVT test'>
-
+    <map-layer label='Custom MVT test' checked>
+      <map-link rel="stylesheet" type="application/pmtiles+stylesheet" href="pmtilesRules.js"></map-link>
       <map-extent units="OSMTILE" label="Spearfish" checked="checked">
         <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
         <map-input name="x" type="location" axis="column" units="tilematrix" min="55430" max="55616"></map-input>
         <map-input name="y" type="location" axis="row" units="tilematrix" min="94810" max="94944"></map-input>
-        <map-link  rel="tile" tref="http://localhost:8080/geoserver/sf/gwc/service/wmts?request=GetTile&tilematrixset=OSMTILE&tilematrix={z}&TileRow={y}&service=WMTS&format=image/png&style=dem&TileCol={x}&version=1.0.0&layer=sf:sfdem"></map-link>
-        <map-link id='mvt'  rel="tile" type="application/vnd.mapbox-vector-tile" tref="http://localhost:8080/geoserver/gwc/service/wmts/rest/spearfish/OSMTILE/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile" ></map-link>
-        <map-input name="i" type="location" axis="i" units="tile"></map-input>
+        <map-link id='mvt'  rel="tile" type="application/vnd.mapbox-vector-tile" tref="./tiles/{z}/{y}/{x}.mvt?format=application/vnd.mapbox-vector-tile" ></map-link>
+<!--        <map-input name="i" type="location" axis="i" units="tile"></map-input>
         <map-input name="j" type="location" axis="j" units="tile"></map-input>
-        <map-link  rel="query" tref="http://localhost:8080/geoserver/gwc/service/wmts?request=GetFeatureInfo&format=image/jpeg&i={i}&j={j}&TileCol={x}&version=1.0.0&layer=spearfish&tilematrixset=OSMTILE&tilematrix={z}&TileRow={y}&service=WMTS&infoformat=text/mapml&feature_count=50&style="></map-link>
+        <map-link  rel="query" tref="http://localhost:8080/geoserver/gwc/service/wmts?request=GetFeatureInfo&format=image/jpeg&i={i}&j={j}&TileCol={x}&version=1.0.0&layer=spearfish&tilematrixset=OSMTILE&tilematrix={z}&TileRow={y}&service=WMTS&infoformat=text/mapml&feature_count=50&style="></map-link>-->
       </map-extent>
-    </map-layer>-->
+    </map-layer>
 
   </mapml-viewer>
 </body>

diff --git a/vector-tiles/pmtiles/lightTheme.js b/vector-tiles/pmtiles/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(
-  '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 };
+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' } }
+  );
+  return pmtilesRules;
+});
+
+export { pmtilesRules, pmtilesRulesReady };
diff --git a/vector-tiles/pmtiles/pmtilesRules.js b/vector-tiles/pmtiles/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/vector-tiles/pmtiles/tiles/11/740/433.mvt b/vector-tiles/pmtiles/tiles/11/740/433.mvt
diff --git a/vector-tiles/pmtiles/tiles/11/740/434.mvt b/vector-tiles/pmtiles/tiles/11/740/434.mvt
diff --git a/vector-tiles/pmtiles/tiles/11/741/433.mvt b/vector-tiles/pmtiles/tiles/11/741/433.mvt
diff --git a/vector-tiles/pmtiles/tiles/11/741/434.mvt b/vector-tiles/pmtiles/tiles/11/741/434.mvt