Merge pull request #861 from CodeForAfrica/fix/choropleth-map-styles

@/hurumap: Add configurable geometry border color option for Choropleth map
CodeForAfrica · Aug 29, 2024 · 5c6a2da · 5c6a2da
2 parents c6305e6 + fb1a2bb
commit 5c6a2da
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/hurumap-next/src/Map/Layers.js b/packages/hurumap-next/src/Map/Layers.js
@@ -75,6 +75,8 @@ function Layers({
       const locationCodes =
         locationCodesProp?.map((c) => c.toUpperCase()) || [];
       if (!locationCodes?.includes(feature.properties.code.toUpperCase())) {
+        geoStyles.inactive.color =
+          choropleth?.[0]?.color ?? geoStyles.inactive.color;
         layer.setStyle(geoStyles.inactive);
       } else {
         const popUpContent = (level, name) =>

diff --git a/packages/hurumap-next/src/Map/utils.js b/packages/hurumap-next/src/Map/utils.js
@@ -62,7 +62,7 @@ const generateLegend = (
   return legend;
 };
 
-export const generateChoropleth = (colors, locations, mapType) => {
+export const generateChoropleth = (choroplethProps, locations, mapType) => {
   if (mapType !== "choropleth") return null;
 
   const filteredLocations = locations.filter(({ count }) => count !== null);
@@ -75,13 +75,16 @@ export const generateChoropleth = (colors, locations, mapType) => {
   const roundedMaxCount = Math.ceil(maxCount);
 
   const negativeColorRange =
-    colors?.negative_color_range ||
+    choroplethProps?.negative_color_range ||
     defaultChoroplethStyles.negative_color_range;
   const positiveColorRange =
-    colors?.positive_color_range ||
+    choroplethProps?.positive_color_range ||
     defaultChoroplethStyles.positive_color_range;
-  const zeroColor = colors?.zero_color || defaultChoroplethStyles.zero_color;
-  const opacity = colors?.opacity || defaultChoroplethStyles.opacity;
+  const zeroColor =
+    choroplethProps?.zero_color || defaultChoroplethStyles.zero_color;
+  const opacity = choroplethProps?.opacity || defaultChoroplethStyles.opacity;
+  const borderColor =
+    choroplethProps.border_color || defaultChoroplethStyles.color;
 
   const positiveThresholds = hasPositiveValues
     ? calculateThresholds(
@@ -125,6 +128,7 @@ export const generateChoropleth = (colors, locations, mapType) => {
       code,
       count,
       fillColor: color,
+      color: borderColor,
       opacity,
     };
   });