Merge pull request #175 from dxw/update-map-scale

Update map scale
dxw · Dec 17, 2024 · 032489c · 032489c
2 parents bddf2b4 + a3d48f0
commit 032489c
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 36 deletions.
diff --git a/app/assets/stylesheets/daqi-levels.scss b/app/assets/stylesheets/daqi-levels.scss
@@ -1,14 +1,17 @@
 :root {
-  --daqi-level-1-bg: rgb(149 225 114);
-  --daqi-level-2-bg: rgb(147 191 115);
-  --daqi-level-3-bg: rgb(89 153 121);
-  --daqi-level-4-bg: rgb(252 255 117);
-  --daqi-level-5-bg: rgb(251 219 110);
-  --daqi-level-6-bg: rgb(251 194 107);
-  --daqi-level-7-bg: rgb(251 150 100);
-  --daqi-level-8-bg: rgb(250 92 96);
-  --daqi-level-9-bg: rgb(154 88 108);
-  --daqi-level-10-bg: rgb(86 86 86);
+  --daqi-level-1-color: #64ee06;
+  --daqi-level-1-5-color: #63d310;
+  --daqi-level-2-color: #61b61a;
+  --daqi-level-2-5-color: #61a323;
+  --daqi-level-3-color: #388b2b;
+  --daqi-level-3-5-color: #096b35;
+  --daqi-level-4-color: #fbff00;
+  --daqi-level-5-color: #facb02;
+  --daqi-level-6-color: #faa701;
+  --daqi-level-7-color: #fa6501;
+  --daqi-level-8-color: #fa2200;
+  --daqi-level-9-color: #6b0820;
+  --daqi-level-10-color: #000;
   --daqi-level-1-text: black;
   --daqi-level-2-text: black;
   --daqi-level-3-text: black;
@@ -19,45 +22,86 @@
   --daqi-level-8-text: white;
   --daqi-level-9-text: white;
   --daqi-level-10-text: white;
+  --pollution-layer-opacity: 60%;
+  --map-layer-background-color: #ddd;
 }
 
 @for $i from 1 through 10 {
-  .daqi-scale,
   .tabs,
   .daqi-table,
   .air-quality-alert-banner {
     .daqi-level-#{$i} {
-      --daqi-color: var(--daqi-level-#{$i}-bg);
+      --daqi-color: var(--daqi-level-#{$i}-color);
 
       background-color: var(--daqi-color);
       color: var(--daqi-level-#{$i}-text);
     }
   }
+
+  .daqi-scale {
+    .daqi-level-#{$i} {
+      --daqi-color: var(--daqi-level-#{$i}-color);
+
+      background-color: color-mix(
+        in srgb,
+        var(--daqi-color) var(--pollution-layer-opacity),
+        var(--map-layer-background-color)
+      );
+      color: white;
+      text-shadow: 0 0 2px black;
+    }
+  }
+}
+
+@for $i from 1 through 3 {
+  .daqi-scale {
+    .daqi-level-#{$i} {
+      --first-half: color-mix(
+        in srgb,
+        var(--daqi-level-#{$i}-color) var(--pollution-layer-opacity),
+        var(--map-layer-background-color)
+      );
+      --second-half: color-mix(
+        in srgb,
+        var(--daqi-level-#{$i}-5-color) var(--pollution-layer-opacity),
+        var(--map-layer-background-color)
+      );
+
+      background: var(--first-half);
+      background: linear-gradient(
+        0deg,
+        var(--first-half) 0%,
+        var(--first-half) 50%,
+        var(--second-half) 50%,
+        var(--second-half) 100%
+      );
+    }
+  }
 }
 
 .daqi-level-low {
-  --daqi-color: var(--daqi-level-2-bg);
+  --daqi-color: var(--daqi-level-2-color);
 
   background-color: var(--daqi-color);
   color: var(--daqi-level-2-text);
 }
 
 .daqi-level-moderate {
-  --daqi-color: var(--daqi-level-5-bg);
+  --daqi-color: var(--daqi-level-5-color);
 
   background-color: var(--daqi-color);
   color: var(--daqi-level-5-text);
 }
 
 .daqi-level-high {
-  --daqi-color: var(--daqi-level-8-bg);
+  --daqi-color: var(--daqi-level-8-color);
 
   background-color: var(--daqi-color);
   color: var(--daqi-level-8-text);
 }
 
 .daqi-level-very-high {
-  --daqi-color: var(--daqi-level-10-bg);
+  --daqi-color: var(--daqi-level-10-color);
 
   background-color: var(--daqi-color);
   color: var(--daqi-level-10-text);

diff --git a/app/assets/stylesheets/forecast-page.scss b/app/assets/stylesheets/forecast-page.scss
@@ -100,23 +100,60 @@ a.primary-cta {
 
   #map-wrapper {
     display: flex;
+    position: relative;
 
     .map {
       width: 100%;
-      height: 20rem;
+      height: 80vh;
     }
 
     .daqi-scale {
       display: flex;
-      flex-direction: column-reverse;
+      flex-direction: column;
+      position: absolute;
+      right: 0;
+      z-index: 1000;
+      top: 50px; // 50px for the search box
+      height: calc(
+        100% - 50px - 20px
+      ); // 50px for the search box, 20px for the bottom padding
+
+      > div {
+        flex: 1;
+        display: grid;
+
+        span {
+          grid-column: 2;
+          grid-row: 1 / 4;
+          writing-mode: vertical-lr;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 50%;
+          background-color: var(--main-colour-lightest);
+          padding: 2px;
+          border-bottom: 0.5px solid black;
+        }
 
-      div {
-        display: flex;
-        padding: 0.25rem 0;
-        justify-content: center;
-        align-items: center;
-        width: 2rem;
-        height: 10%;
+        &:first-child {
+          span {
+            grid-row: 1 / 1;
+          }
+        }
+
+        &:last-child {
+          span {
+            border-bottom: 0;
+          }
+        }
+
+        > div {
+          grid-column: 1;
+          width: 2rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
       }
     }
 

diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js
@@ -202,7 +202,7 @@ export default class MapController extends Controller {
       format: "image/png",
       opacity: 1,
       pane: "pollution",
-      styles: `daqi${pollutant}_linear`,
+      styles: `daqi${pollutant}`,
     });
   }
 

diff --git a/app/views/forecasts/_map.html.erb b/app/views/forecasts/_map.html.erb
@@ -1,16 +1,28 @@
 <div id="map-wrapper">
   <div id="map" class="map" data-maptiler-api-key="<%= @maptiler_api_key %>" data-map-target="map"></div>
   <div class="daqi-scale">
-    <div class="daqi-level-1">1</div>
-    <div class="daqi-level-2">2</div>
-    <div class="daqi-level-3">3</div>
-    <div class="daqi-level-4">4</div>
-    <div class="daqi-level-5">5</div>
-    <div class="daqi-level-6">6</div>
-    <div class="daqi-level-7">7</div>
-    <div class="daqi-level-8">8</div>
-    <div class="daqi-level-9">9</div>
-    <div class="daqi-level-10">10</div>
+    <div class="daqi-group-very-high">
+      <span>Very High</span>
+      <div class="daqi-level-10">10</div>
+    </div>
+    <div class="daqi-group-high">
+      <span>High</span>
+      <div class="daqi-level-9">9</div>
+      <div class="daqi-level-8">8</div>
+      <div class="daqi-level-7">7</div>
+    </div>
+    <div class="daqi-group-moderate">
+      <span>Moderate</span>
+      <div class="daqi-level-6">6</div>
+      <div class="daqi-level-5">5</div>
+      <div class="daqi-level-4">4</div>
+    </div>
+    <div class="daqi-group-low">
+      <span>Low</span>
+      <div class="daqi-level-3">3</div>
+      <div class="daqi-level-2">2</div>
+      <div class="daqi-level-1">1</div>
+    </div>
   </div>
 </div>
 <p class="mt-1"><%= link_to("Learn more about the colour scale", health_advice_path, class: "a") %></p>