UX(web): tweak state border transition (#6168)

electricitymaps · Nov 22, 2023 · 8f73c0e · 8f73c0e
1 parent 81ad2d3
commit 8f73c0e
Showing 1 changed file with 2 additions and 3 deletions.
diff --git a/web/src/features/map/map-layers/StatesLayer.tsx b/web/src/features/map/map-layers/StatesLayer.tsx
@@ -10,8 +10,8 @@ export default function StatesLayer() {
   const statesBorderStyle = {
     'line-color': theme.stateBorderColor,
     'line-width': 1.4,
-    'line-opacity': 0.9,
     'line-dasharray': [1, 1],
+    'line-opacity': ['interpolate', ['linear'], ['zoom'], 2.8, 0, 3, 0.9],
   } as mapboxgl.LinePaint;
 
   const stateLabelLayout = {
@@ -37,7 +37,6 @@ export default function StatesLayer() {
         beforeId="zones-selectable-layer"
         type="line"
         paint={statesBorderStyle}
-        minzoom={2.5}
         source="states"
       />
       <Layer
@@ -61,7 +60,7 @@ export default function StatesLayer() {
         }}
         paint={stateLabelPaint}
         maxzoom={4.5}
-        minzoom={3}
+        minzoom={2.9}
       />
     </Source>
   );