@cdc/map 4.24.1 → 4.24.3

package/src/data/supported-geos.js

@@ -487,7 +487,27 @@ export const supportedCountries = {
   YEM: ['Yemen'],
   ZMB: ['Zambia'],
   ZWE: ['Zimbabwe'],
-  IOT: ['British Indian Ocean Territory']
+  IOT: ['British Indian Ocean Territory'],
+  Alaska: ['Alaska'],
+  Hawaii: ['Hawaii'],
+  Sardinia: ['Sardinia'],
+  Sicily: ['Sicily'],
+  Corsica: ['Corsica'],
+  'Easter Island': ['Easter Island'],
+  'Canary Islands': ['Canary Islands'],
+  Antarctica: ['Antarctica'],
+  ATA: ['Antarctica'],
+  'Madeira Islands': ['Madeira Islands'],
+  'Gaza/West Bank': ['Gaza/West Bank'],
+  'Saint Paul and Amsterdam Islands': ['Saint Paul and Amsterdam Islands'],
+  'Sovereign Base Areas of Akrotiri and Dhekelia': ['Sovereign Base Areas of Akrotiri and Dhekelia'],
+  'Plazas de Soberania': ['Plazas de Soberania'],
+  Akrotiri: ['Akrotiri'],
+  Dhekelia: ['Dhekelia'],
+  Sicily: ['Sicily'],
+  Sardinia: ['Sardinia'],
+  'US-AK': ['Alaska'],
+  'US-HI': ['Hawaii']
 }
 
 export const supportedTerritories = {

package/src/hooks/useTooltip.ts

@@ -52,7 +52,7 @@ const useTooltip = props => {
     const prefix = handleTooltipPrefix('')
 
     if (hideGeoColumnInTooltip) return `<strong>${displayGeoName(geoName)}</strong>`
-    return `<p class="tooltip-heading">${prefix}${displayGeoName(geoName)}</p>`
+    return `<p class="tooltip-heading" style="text-transform: none;">${prefix}${displayGeoName(geoName)}</p>`
   }
 
   /**
@@ -92,7 +92,7 @@ const useTooltip = props => {
     } = config
 
     if (tooltipEnabledMaps.includes(currentMapType) && undefined !== row) {
-      toolTipText += `<ul className="capitalize">`
+      toolTipText += `<ul>`
 
       // if tooltips are allowed, loop through each column
       Object.keys(columns).forEach(columnKey => {
@@ -120,10 +120,10 @@ const useTooltip = props => {
     // Handle County Location Columns
     toolTipText += handleTooltipStateNameColumn(toolTipText, row)
 
-    // Handle Data > Geo Column In tooltips
+    // Handle Columns > Data Column In tooltips
     toolTipText += handleTooltipGeoColumn(geoName)
 
-    // Handle Data > Primary Column in tooltips
+    // Handle Columns > Geography Column In tooltips
     toolTipText = handleTooltipColumns(toolTipText, row)
 
     return toolTipText

package/src/scss/editor-panel.scss

@@ -82,14 +82,13 @@
     color: #000;
     font-size: 1em;
     border: 0;
-    position: fixed;
+    position: absolute;
     z-index: 100;
     transition: 0.1s background;
     cursor: pointer;
     width: 25px;
     height: 25px;
     left: 307px;
-    top: 10px;
     box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
     &:before {
       top: 43%;
@@ -114,7 +113,7 @@
     background: #fff;
     width: $editorWidth;
     overflow-y: overlay;
-    position: fixed;
+    position: absolute;
     z-index: 7;
     display: flex;
     flex-direction: column;
@@ -281,6 +280,9 @@
       span.h5 {
         font-size: 0.8em;
       }
+      & p.layer-purpose-details {
+        margin-top: 1em;
+      }
     }
 
     .advanced {

package/src/scss/main.scss

@@ -121,7 +121,7 @@
           cursor: pointer;
           width: 1em;
         }
-        span.navigation-link {
+        a.navigation-link {
           text-decoration: underline;
           cursor: pointer;
           color: #075290;
@@ -129,6 +129,7 @@
           svg {
             display: inline-block;
             max-width: 13px;
+            margin-left: .5em;
           }
         }
         &.capitalize p {

package/src/scss/map.scss

@@ -49,6 +49,11 @@ header + .map-container.full-border {
       flex-direction: row;
     }
   }
+  .map-container.map {
+    &.side {
+      flex-direction: row;
+    }
+  }
   // Bubble Specific
   .map-container.bubble {
     &.side {
@@ -83,13 +88,13 @@ $medium: 768px;
   }
   // make logo smaller on mobile
   @media screen and (max-width: $small) {
-      .map-logo {
-        position: absolute;
-        bottom: 4em; // needed to align to top of Territories
-        right: 1em;
-        z-index: 3;
-        width: 50px;  // make it smaller
-      }
+    .map-logo {
+      position: absolute;
+      bottom: 4em; // needed to align to top of Territories
+      right: 1em;
+      z-index: 3;
+      width: 50px; // make it smaller
+    }
   }
   // everything else but mobile
   @media screen and (min-width: $small) {
@@ -101,10 +106,8 @@ $medium: 768px;
       width: 75px;
     }
   }
-
 }
 
-
 .single-geo {
   transition: 0.2s fill;
   cursor: pointer;
@@ -117,16 +120,18 @@ $medium: 768px;
 .two-col {
   display: flex;
   margin-top: 0;
+
   justify-content: flex-start;
   > label {
     margin-top: 0;
     display: inline-block;
   }
 }
+
 .territories-label {
   margin: 2em 5px 2em 1em;
   font-size: 1.1em;
-  display:block;
+  display: block;
 }
 
 // Cities and Territories
@@ -150,9 +155,14 @@ $medium: 768px;
     }
   }
 
-    &--mobile {
+  &--mobile {
     @extend .territories;
-    width: 70%;
+    width: 60%;
+  }
+}
+
+@media screen and (max-width: $small) {
+  .territories {
   }
 }
 

package/src/types/MapConfig.ts

@@ -11,10 +11,15 @@ export type MapVisualSettings = {
   extraBubbleBorder: boolean
   /** cityStyle - visual indicator of cities on state maps */
   cityStyle: 'circle' | 'pin'
+  /** cityStyle - optional visual indicator of label on the Legend */
+  cityStyleLabel: string
   /** geoCodeCircleSize - controls the size of the city style option (circle or pin) */
+
   geoCodeCircleSize: number
   /** showBubbleZeros - shows circles on maps when the data is provided even if its a zero value */
   showBubbleZeros: boolean
+  /** additionalCityStyles - shows Circle, Square, Triangle, Rhombus/Diamond, Star, Map Pin on maps when the additionalCityStyles is added */
+  additionalCityStyles: [] | [{ label: string; column: string; value: string; shape: string }]
 }
 
 type PatternSelection = {
@@ -26,6 +31,8 @@ type PatternSelection = {
   pattern: 'lines' | 'circles' | 'waves'
   // optional legend update
   label: string
+  // size of pattern
+  size: 'small' | 'medium' | 'large'
 }
 
 export type GeoColumnProperties = Pick<EditorColumnProperties, 'name' | 'label' | 'tooltip' | 'dataTable'>