Allow min and max zoom culling simultaneously

index.js

@@ -53,6 +53,7 @@ resizeObserver.observe(map_container);
 
 const map_navigator = document.getElementById('mapNavigator');
 const zoomLevelDisplay = document.getElementById('zoomLevelDisplay');
+const zoomStyle = document.getElementById('zoomStyle');
 const styleRoot = document.querySelector(':root');
 const svgns = map.getAttribute('xmlns');
 
@@ -86,12 +87,6 @@ let previousMapScale = -1;
 let MapMatrix = {};
 
 document.addEventListener('DOMContentLoaded', async () => {
-    let dynamicStyles = [];
-    for(let i=0; i<scaleCullThresholds.length; i++){
-        dynamicStyles.push(`.maxZoomCull_${i}{display:var(--maxZoomCull_state_${i});}`);
-        dynamicStyles.push(`.minZoomCull_${i}{display:var(--minZoomCull_state_${i});}`);
-    }
-    document.getElementById('zoomStyle').innerHTML = dynamicStyles.join('\n');
     await loadTrackData('trackdata_dv.json');
     await loadPoiData('poi_dv.json');
     mapScrollSetup();
@@ -252,10 +247,12 @@ function updateMapview(){
         map_rails.setAttribute('stroke-width', Utils.clamp(trackWidth.base/mapNav.scale, trackWidth.min, trackWidth.max));
         styleRoot.style.setProperty('--markerScale', 1/mapNav.scale);
         if(dirtyScale){
+            let dynamicStyles = [];
             for(let i=0; i<scaleCullThresholds.length; i++){
-                styleRoot.style.setProperty(`--minZoomCull_state_${i}`, mapNav.scale >= scaleCullThresholds[i].scale ? 'initial' : 'none');
-                styleRoot.style.setProperty(`--maxZoomCull_state_${i}`, mapNav.scale <= scaleCullThresholds[i].scale ? 'initial' : 'none');
+                if(mapNav.scale >= scaleCullThresholds[i].scale) dynamicStyles.push(`.maxZoomCull_${i}{display:none;}`);
+                if(mapNav.scale <= scaleCullThresholds[i].scale) dynamicStyles.push(`.minZoomCull_${i}{display:none;}`);
             }
+            zoomStyle.innerHTML = dynamicStyles.join('\n');
         }
         previousMapScale = mapNav.scale;
     }

style.css

@@ -1,15 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Protest+Strike&display=swap');
 
 :root{
-    --signScale: 1;
-    --cullThreshold_state_0: none;
-    --cullThreshold_state_1: none;
-    --cullThreshold_state_2: none;
-    --cullThreshold_state_3: none;
-    --cullThreshold_state_4: none;
-    --cullThreshold_state_5: none;
-    --cullThreshold_state_6: none;
-
     --absScale: 1;
     --legendButtonSize: 50px;
 }