geophystech#305 Damage level colors.

Author: Arman Badalyan

src/assets/scss/event_map.scss

@@ -39,6 +39,20 @@ $legend-marker-size: 10px;
     }
   }
 
+  .marker-cluster
+  {
+    > div {
+      border-radius: 50%;
+      padding: 5px;
+      height: 100%;
+      width: 100%;
+
+      > div {
+        margin: 0;
+      }
+    }
+  }
+
   .map-legend
   {
     box-shadow: 0 0 15px rgba(0, 0, 0, .2);
@@ -95,22 +109,14 @@ $legend-marker-size: 10px;
       width: 50px;
       top: -1px;
 
-      span:first-child
-      {
+      > span:first-child {
         height: $legend-marker-size;
         width: $legend-marker-size;
-        vertical-align: middle;
-        display: inline-block;
-      }
-
-      span:last-child
-      {
-        line-height: $legend-marker-size;
-        height: $legend-marker-size;
-        vertical-align: middle;
         display: inline-block;
-        margin-left: 8px;
-        width: auto;
+        position: relative;
+        margin-right: 8px;
+        content: '';
+        top: 1px;
       }
     }
   }

src/components/maps/Buildings.vue

@@ -8,7 +8,7 @@
     setView, createMapMarkerPopupBuilding
   } from '@/map_functions.js'
 
-  import { colorDarken } from '@/helpers/color'
+  import { colorDarken, colorLighten, colorHexToRGB } from '@/helpers/color'
 
   export default {
     props: ['event', 'tab'],
@@ -43,15 +43,22 @@
             })
 
             damageLevels = Object.entries(damageLevels).sort((a, b) => b[1] - a[1] || 1)
-            let damageLevel = damageLevels[0][0]
+            let damageLevel = parseInt(damageLevels[0][0], 10)
 
             if (damageLevel > 5) {
               damageLevel = 5
             }
 
+            let _color = buildingColor(damageLevel)
+
             return new window.L.DivIcon({
               className: `marker-cluster marker-cluster-damage-level-${damageLevel}`,
-              html: `<div><span>${cluster.getChildCount()}</span></div>`,
+              html:
+                `<div style="background: ${colorHexToRGB(colorLighten(_color, 20), 0.4)}">
+                  <div style="background: ${colorHexToRGB(_color, 0.6)}">
+                      <span>${cluster.getChildCount()}</span>
+                  </div>
+                </div>`,
               iconSize: new window.L.Point(40, 40)
             })
           }
@@ -108,13 +115,13 @@
           const legend = window.L.control({ position: 'bottomright' })
 
           legend.onAdd = map => {
-            let div = window.L.DomUtil.create('div', 'map-legend')
+            let div = window.L.DomUtil.create('div', 'map-legend buildings-legends')
             div.innerHTML =
-              `<div class="buildings-legend"><span style="background: ${buildingColor(1)}"></span><span>d-1</span></div>
-               <div class="buildings-legend"><span style="background: ${buildingColor(2)}"></span><span>d-2</span></div>
-               <div class="buildings-legend"><span style="background: ${buildingColor(3)}"></span><span>d-3</span></div>
-               <div class="buildings-legend"><span style="background: ${buildingColor(4)}"></span><span>d-4</span></div>
-               <div class="buildings-legend"><span style="background: ${buildingColor(5)}"></span><span>d≥5</span></div>`
+              `<div class="buildings-legend"><span style="background: ${buildingColor(1)}"></span>d-1</div>
+               <div class="buildings-legend"><span style="background: ${buildingColor(2)}"></span>d-2</div>
+               <div class="buildings-legend"><span style="background: ${buildingColor(3)}"></span>d-3</div>
+               <div class="buildings-legend"><span style="background: ${buildingColor(4)}"></span>d-4</div>
+               <div class="buildings-legend"><span style="background: ${buildingColor(5)}"></span>d≥5</div>`
             return div
           }
 
@@ -165,21 +172,5 @@
 
 <style lang="scss">
   @import '~scss/event_map';
-
-  $level-colors: (
-    1: green,
-    2: yellow,
-    3: orange,
-    4: red,
-    5: #C50126
-  );
-
-  @each $level, $color in $level-colors {
-    .marker-cluster-damage-level-#{$level} {
-      background-color: rgba(lighten($color, 20%), 0.6);
-      > div { background-color: rgba($color, 0.6) }
-    }
-  }
-
 </style>
 

src/helpers/color.js

@@ -1,20 +1,54 @@
-export function colorDarken(color, percent)
+
+function lightenDarkenColor(color, amt)
 {
-  let R = parseInt(color.substring(1, 3), 16)
-  let G = parseInt(color.substring(3, 5), 16)
-  let B = parseInt(color.substring(5, 7), 16)
+  let usePound = false
+
+  if (color[0] === '#') {
+    color = color.slice(1)
+    usePound = true
+  }
+
+  let num = parseInt(color, 16)
+  let r = (num >> 16) + amt
+
+  if (r > 255) r = 255
+  else if (r < 0) r = 0
+
+  let b = ((num >> 8) & 0x00FF) + amt
+
+  if (b > 255) b = 255
+  else if (b < 0) b = 0
+
+  let g = (num & 0x0000FF) + amt
+
+  if (g > 255) g = 255
+  else if (g < 0) g = 0
 
-  R = parseInt(R * (100 + percent) / 100)
-  G = parseInt(G * (100 + percent) / 100)
-  B = parseInt(B * (100 + percent) / 100)
+  return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
 
-  R = (R < 255) ? R : 255
-  G = (G < 255) ? G : 255
-  B = (B < 255) ? B : 255
+}
+
+export function colorDarken(color, percent) {
+  return lightenDarkenColor(color, percent * -1)
+}
+
+export function colorLighten(color, percent) {
+  return lightenDarkenColor(color, percent)
+}
+
+export function colorHexToRGB(hex, alpha)
+{
+  if (hex[0] === '#') {
+    hex = hex.slice(1)
+  }
 
-  let RR = ((R.toString(16).length === 1) ? '0' + R.toString(16) : R.toString(16))
-  let GG = ((G.toString(16).length === 1) ? '0' + G.toString(16) : G.toString(16))
-  let BB = ((B.toString(16).length === 1) ? '0' + B.toString(16) : B.toString(16))
+  let r = parseInt(hex.slice(0, 2), 16)
+  let g = parseInt(hex.slice(2, 4), 16)
+  let b = parseInt(hex.slice(4, 6), 16)
 
-  return '#' + RR + GG + BB
+  if (alpha) {
+    return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')'
+  } else {
+    return 'rgb(' + r + ', ' + g + ', ' + b + ')'
+  }
 }

src/map_functions.js

@@ -144,15 +144,15 @@ export function addStations(map, controls, show = true)
 export function buildingColor(damageLevel)
 {
   if (damageLevel >= 5) {
-    return '#c50126'
+    return '#C50126' // Dark crimson
   }
 
   switch (damageLevel) {
-    case 0: return 'cyan'
-    case 1: return 'green'
-    case 2: return 'yellow'
-    case 3: return 'orange'
-    case 4: return 'red'
+    case 0: return '#00FFFF' // cyan
+    case 1: return '#008000' // green
+    case 2: return '#FFFF00' // yellow
+    case 3: return '#FFA500' // orange
+    case 4: return '#FF0000' // red
   }
 }