diff --git a/packages/hurumap-next/src/Map/Layers.js b/packages/hurumap-next/src/Map/Layers.js index 9d9a01f40..dd9ba7175 100644 --- 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 index 21d347907..0930fb51f 100644 --- 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, }; });