Reverse colour scale

commonknowledge · Dec 11, 2024 · 3cda2f4 · 3cda2f4
1 parent 3bf9d4b
commit 3cda2f4
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 7 deletions.
diff --git a/nextjs/src/app/reports/[id]/(components)/MapLayers/PoliticalChoropleths.tsx b/nextjs/src/app/reports/[id]/(components)/MapLayers/PoliticalChoropleths.tsx
@@ -112,6 +112,17 @@ const PoliticalChoropleths: React.FC<PoliticalChoroplethsProps> = ({
             visibility,
           }}
           paint={{
+            'text-opacity': [
+              'interpolate',
+              ['exponential', 1],
+              ['zoom'],
+              //
+              7.5,
+              0,
+              //
+              7.8,
+              1,
+            ],
             'text-color': 'white',
             'text-halo-color': '#24262b',
             'text-halo-width': 1.5,
@@ -126,7 +137,17 @@ const PoliticalChoropleths: React.FC<PoliticalChoroplethsProps> = ({
           }}
           paint={{
             'text-color': 'white',
-            'text-opacity': 1,
+            'text-opacity': [
+              'interpolate',
+              ['exponential', 1],
+              ['zoom'],
+              //
+              6.5,
+              0,
+              //
+              7,
+              1,
+            ],
             'text-halo-color': '#24262b',
             'text-halo-width': 1.5,
           }}

diff --git a/nextjs/src/app/reports/[id]/mapboxStyles.ts b/nextjs/src/app/reports/[id]/mapboxStyles.ts
@@ -39,6 +39,7 @@ export function getChoroplethFill(
   const colourScale = scaleSequential()
     .domain([min, max])
     .interpolator(interpolateBlues)
+    .interpolator((t) => interpolateBlues(1 - t))
 
   let steps = Math.min(max, 30) // Max 30 steps
   steps = Math.max(steps, 3) // Min 3 steps (for valid Mapbox fill-color rule)
@@ -172,14 +173,30 @@ export const getAreaCountLayout = (
     'text-size': [
       'interpolate',
       ['linear'],
-      ['get', 'count'],
-      min,
-      textScale(min) * 17,
-      max,
-      textScale(max) * 17,
+      ['zoom'],
+      1,
+      [
+        'max',
+        ['*', ['/', ['get', 'count'], max], textScale(max) * 9],
+        textScale(min) * 10,
+      ],
+      12,
+      [
+        'max',
+        ['*', ['/', ['get', 'count'], max], textScale(max) * 18],
+        textScale(min) * 20,
+      ],
     ],
     'symbol-placement': 'point',
-    'text-offset': [0, -0.5],
+    'text-offset': [
+      'interpolate',
+      ['linear'],
+      ['zoom'],
+      1,
+      [0, -0.1],
+      12,
+      [0, -1],
+    ],
     'text-allow-overlap': true,
     'text-ignore-placement': true,
     'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],