1 files changed, 49 insertions, 3 deletions

diff --git a/main.js b/main.js
index e1c2db9..fe50f80 100644
--- a/main.js
+++ b/main.js
@@ -1482,7 +1482,21 @@ const layerHierarchy = [
 ];
 
 const vectorSource = new VectorTile({
-  url: '/tiles/{z}/{x}/{y}.pbf',
+  url: '/tiles/a/{z}/{x}/{y}.pbf',
+  format: new MVT(),
+  projection: projection,
+  wrapX: false,
+  transition: 0,
+  tileGrid: createXYZ({
+    extent: extent,
+    tileSize: 1024,
+    maxResolution: 1024, /* = 1048576/1024 */
+    minZoom: 0,
+    maxZoom: 9,
+  }),
+});
+const vectorSource2 = new VectorTile({
+  url: '/tiles/b/{z}/{x}/{y}.pbf',
   format: new MVT(),
   projection: projection,
   wrapX: false,
@@ -1511,8 +1525,9 @@ const vectorLayer = new VectorTileLayer({
   source: vectorSource,
   /* XXX switch to 'hybrid' if there are perf issues; but that seems to
    * put lines above points regardless of their respective z-index */
-  renderMode: 'vector',
+  renderMode: 'hybrid',
   declutter: false,
+  visible: false,
   style: function(feature, resolution) {
     const style = styles[feature.getProperties().layer];
     if (!Array.isArray(style)) {
@@ -1529,6 +1544,27 @@ const vectorLayer = new VectorTileLayer({
 });
 map.addLayer(vectorLayer);
 
+const vectorLayer2 = new VectorTileLayer({
+  source: vectorSource2,
+  renderMode: 'hybrid',
+  declutter: false,
+  visible: false,
+  style: function(feature, resolution) {
+    const style = styles[feature.getProperties().layer];
+    if (!Array.isArray(style)) {
+      return style;
+    } else {
+      const maxi = style.length - 1;
+      const z = 10 /* Math.log2(maxResolution) */ - Math.log2(resolution);
+      /* use Math.floor() as VectorTile.js calls getZForResolution(resolution, 1) */
+      const i = z <= 0 ? 0 : z >= maxi ? maxi : Math.floor(z);
+      // console.log(`resolution=${resolution}, z=${z}, i=${i}`);
+      return style[i];
+    }
+  },
+});
+map.addLayer(vectorLayer2);
+
 /* layer selection panel */
 (function() {
   const modal = document.getElementById('layer-selection-panel');
@@ -1577,6 +1613,13 @@ map.addLayer(vectorLayer);
       }
     });
   };
+  /* TODO refactor */
+  const layerList1 = Object.keys(layers).filter((l) => !l.startsWith('sks_') && !l.startsWith('st_'));
+  const layerList2 = Object.keys(layers).filter((l) =>  l.startsWith('sks_') ||  l.startsWith('st_'));
+  const fixLayerVisibility = function() {
+    vectorLayer .setVisible(layerList1.some((lyr) => styles[lyr] !== undefined));
+    vectorLayer2.setVisible(layerList2.some((lyr) => styles[lyr] !== undefined));
+  };
   const onClickFunction = function(layerList, event) {
     const searchParams = new URLSearchParams(location.hash.substring(1));
     let layersParams = searchParams.get('layers') || '';
@@ -1595,7 +1638,9 @@ map.addLayer(vectorLayer);
       layersParams = layersParams.filter((lyr) => !layerList.includes(lyr));
     }
     setIndeterminateAndChecked(layerHierarchy);
+    fixLayerVisibility();
     vectorSource.changed();
+    vectorSource2.changed();
     searchParams.set('layers', layersParams.join(' '));
     location.hash = '#' + searchParams.toString();
   };
@@ -1695,6 +1740,7 @@ map.addLayer(vectorLayer);
     };
   });
   setIndeterminateAndChecked(layerHierarchy);
+  fixLayerVisibility();
 
   (function() {
     const item = document.createElement('div');
@@ -2004,7 +2050,7 @@ map.addLayer(vectorLayer);
     }, {
       hitTolerance: 5,
       checkWrapped: false,
-      layerFilter: (l) => l === vectorLayer,
+      layerFilter: (l) => l === vectorLayer || l === vectorLayer2,
     });
   });
 }());