From e373d3fae86e0fa640315856b177ce80e2d43021 Mon Sep 17 00:00:00 2001 From: Jonah Adkins Date: Thu, 8 Aug 2024 15:05:25 -0400 Subject: [PATCH] [wip] color updates for explorer site (#142) * here we go :rocket: * add boundary line label color --- site/src/Layers.js | 111 +++++++++++++++++++++--------------- site/src/Map.jsx | 21 ++++++- site/src/ThemeTypeLayer.jsx | 45 ++++++++------- 3 files changed, 108 insertions(+), 69 deletions(-) diff --git a/site/src/Layers.js b/site/src/Layers.js index 0d5f527..0ac247a 100644 --- a/site/src/Layers.js +++ b/site/src/Layers.js @@ -3,7 +3,10 @@ export const layers = [ theme: "divisions", type: "division_area", polygon: true, - color: "#e6e6e6", + line: true, + color: "hsla(213, 23%, 92%, 1)", + fillOutlineColor: "hsla(208, 15%, 78%, 1)", + activeColor: "hsla(17, 17%, 92%, 1)", }, { theme: "base", @@ -11,35 +14,35 @@ export const layers = [ polygon: true, point: true, line: true, - color: "#e6eaef", + color: "hsla(31, 100%, 90%, 0.33)", + fillOutlineColor: "hsla(31, 100%, 90%)", + activeColor: "hsla(30, 96%, 79%, 0.66)", + labelColor:"hsla(28, 100%, 46%, 1)", }, { theme: "base", type: "land_cover", polygon: true, - color: [ - "match", - ["get", "subtype"], - "crop", - "#eaedc9", - "forest", - "#b8e6b3", - "shrub", - "#f3f5e0", - "moss", - "#c9ede3", - "wetland", - "#d5f1e9", - "urban", - "#e3e3e3", - "grass", - "#f3f5e0", - "barren", - "#EFF0E7", - "snow", - "#ffffff", - "#c3e9be", + color: [ "match", ["get", "subtype"], + //greens + "moss", "hsla(98, 19%, 80%, 1)", + "forest", "hsla(98, 39%, 80%, 1)", + "grass", "hsla(98, 39%, 84%, 1)", + "crop", "hsla(98, 39%, 88%, 1)", + //browns + "shrub", "hsla(80, 39%, 86%, 1)", + "barren", "hsla(62, 39%, 84%, 1)", + //teals + "wetland", "hsla(194, 39%, 80%, 1)", + "mangrove", "hsla(194, 39%, 84%, 1)", + //grays + "urban", "hsla(213, 19%, 89%, 1)", + "snow", "hsla(100, 0%, 96%, 1)", + "hsla(0, 0%, 0%, 0)", ], + fillOutlineColor: "hsla(208, 15%, 78%, 0)", + activeColor: "hsla(183, 76%, 30%, 0.25)", + labelColor:"hsla(222, 49%, 91%, 0)", }, { theme: "base", @@ -47,7 +50,10 @@ export const layers = [ polygon: true, activeOnly: true, minzoom: 13, - color: "#CAD6DE", + color: "hsla(222, 49%, 91%, 1)", + fillOutlineColor: "hsla(222, 49%, 81%, 1)", + activeColor:"hsla(222, 49%, 91%, 1)", + labelColor:"hsla(254, 100%, 66%, 1)", }, { theme: "base", @@ -57,7 +63,9 @@ export const layers = [ outline: true, activeOnly: true, minzoom: 13, - color: "#777", + color: "hsla(222, 49%, 81%, 1)", + activeColor:"hsla(222, 49%, 91%, 1)", + labelColor:"hsla(254, 100%, 66%, 1)", }, { theme: "base", @@ -65,8 +73,10 @@ export const layers = [ polygon: true, point: true, line: true, - color: "#bed9e9", - activeColor: "#549bc4", + color: "hsla(195, 71%, 90%, 1)", + fillOutlineColor: "hsla(195, 71%, 89%, 1)", + activeColor: "hsla(195, 77%, 85%, 1)", + labelColor:"hsla(209, 100%, 49%, 1)", }, { theme: "base", @@ -75,59 +85,70 @@ export const layers = [ point: true, line: true, activeOnly: true, - activeColor: "#8a70ff", - color: "#c5b8ff", + activeColor: "hsla(210, 15%, 65%, 0.25)", + fillOutlineColor: "hsla(209, 13%, 52%, 0.5)", + color: "hsla(209, 15%, 58%, 1)", + labelColor:"hsla(207, 17%, 37%, 1)", }, { theme: "transportation", type: "segment", line: true, - color: "#DECECA", - activeColor: "#fa1937", + color: "hsla(210, 16%, 82%, 0.4)", + activeColor: "hsla(209, 100%, 72%, 0.5)", + labelColor:"hsla(214, 100%, 40%, 1)", }, { theme: "transportation", type: "connector", point: true, - color: "#DECECA", - activeColor: "#fa1937", + color: "hsla(210, 16%, 82%, 0.5)", + activeColor: "hsla(209, 100%, 72%, 0.5)", + labelColor:"hsla(214, 100%, 40%, 1)", pointSize: 5, }, { theme: "buildings", type: "building", extrusion: true, - color: "#C0C3D8", - activeColor: "#4359fe", + color: "hsla(210, 16%, 82%, 0.2)", + activeColor: "hsla(344, 100%, 66%, 0.4)", + labelColor: "hsla(341, 91%, 32%, 1)", }, { theme: "buildings", type: "building_part", extrusion: true, - color: "#C0C3D8", - activeColor: "#4359fe", + color: "hsla(210, 16%, 82%, 0.2)", + activeColor: "hsla(344, 100%, 66%, 0.4)", + labelColor: "hsla(341, 91%, 32%, 1)", }, { theme: "places", type: "place", point: true, - color: "#fdcd96", - activeColor: "#fb8804", + minzoom: 11, + color: "hsla(226, 100%, 75%, 1)", + activeColor: "hsla(243, 100%, 61%, 0.25)", + labelColor: "hsla(249, 83%, 39%, 1)", + pointSize: 5, }, { theme: "addresses", type: "address", point: true, - color: "#ffadf1", - activeColor: "#ff1ad9", + color: "hsla(210, 15%, 65%, 1)", + activeColor: "hsla(43, 100%, 42%, 0.5)", + labelColor: "hsla(43, 100%, 42%, 1)", pointSize: 5, }, { theme: "divisions", - type: "boundary", + type: "division_boundary", line: true, - color: "#CCC", - activeColor: "#777", + color: "hsla(210, 16%, 82%, 1)", + activeColor: "hsla(210, 16%, 82%, 1)", + labelColor: "hsla(201, 29%, 15%, 1)" }, ]; diff --git a/site/src/Map.jsx b/site/src/Map.jsx index 31fb38e..d1a3746 100644 --- a/site/src/Map.jsx +++ b/site/src/Map.jsx @@ -222,15 +222,30 @@ export default function Map({ type="symbol" source="divisions" source-layer="division" + filter={ + ["all", + ["has", "@name"], + ["step",["zoom"], + ["==","$type","Point"], + 2,["match",["get", "subtype"],["country","dependency"],true, false], + 4,["match",["get", "subtype"],["macroregion","region"],true, false], + 8,["match",["get", "subtype"],["macrocounty","county"],true, false], + 10,["match",["get", "subtype"],["county", "localadmin"],true, false], + 12,["match",["get", "subtype"],["localadmin", "locality", "borough", "macrohood", "neighborhood","microhood"],true, false] + ] + ]} paint={{ - "text-color": mode === "theme-light" ? "black" : "white", + "text-color": mode === "theme-light" ? "hsla(201, 29%, 15%, 1)" : "white", "text-halo-color": mode === "theme-light" ? "white" : "black", "text-halo-width": 1, }} layout={{ - "text-font": ["Noto Sans Bold"], + "text-font": ["Noto Sans Regular"], "text-field": ["get", "@name"], - "text-size": 11, + "text-size": ["interpolate", ["linear"], ["zoom"], 2, 10, 10, 14, 12, 12, 16, 16], + "text-line-height": 1, + "text-padding": 6, + "text-max-width": 4, }} /> diff --git a/site/src/ThemeTypeLayer.jsx b/site/src/ThemeTypeLayer.jsx index 1b6ac4b..d254ae6 100644 --- a/site/src/ThemeTypeLayer.jsx +++ b/site/src/ThemeTypeLayer.jsx @@ -27,6 +27,8 @@ const ThemeTypeLayer = ({ outline, minzoom, pointSize, + fillOutlineColor, + labelColor, }) => { return ( <> @@ -46,7 +48,7 @@ const ThemeTypeLayer = ({ 0, 1, 17, - pointSize || 8, + pointSize || 6, ], "circle-opacity": active ? 1 : 0.4, }} @@ -65,18 +67,20 @@ const ThemeTypeLayer = ({ source={theme} source-layer={type} paint={{ - "text-color": "black", - "text-halo-color": highlightColor, + "text-color": labelColor, + "text-halo-color": "hsla(0, 100%, 100%, 1)", "text-halo-width": 1, }} layout={{ - "text-font": ["Noto Sans Bold"], + "text-font": ["Noto Sans Regular"], "text-field": ["get", "@name"], - "text-size": 11, + "text-size": 10, visibility: visible ? "visible" : "none", - "text-variable-anchor": ["top", "bottom", "left", "right"], - "text-radial-offset": 0.8, + "text-radial-offset": 0, "text-justify": "auto", + "text-line-height": 1, + "text-padding": 12, + "text-max-width": 4, }} /> @@ -128,12 +132,12 @@ const ThemeTypeLayer = ({ source={theme} source-layer={type} paint={{ - "text-color": "black", - "text-halo-color": highlightColor, + "text-color": labelColor, + "text-halo-color": "hsla(0, 100%, 100%, 1)", "text-halo-width": 1, }} layout={{ - "text-font": ["Noto Sans Bold"], + "text-font": ["Noto Sans Regular"], "text-field": ["get", "@name"], "text-size": 11, "symbol-placement": "line-center", @@ -152,11 +156,8 @@ const ThemeTypeLayer = ({ source-layer={type} paint={{ "fill-color": colorExpression(color, highlightColor), - "fill-opacity": active - ? activeThemes.length > 1 - ? 0.55 - : 0.7 - : 0.4, + "fill-opacity": active ? 0.5 : 0.5, + "fill-outline-color": fillOutlineColor }} layout={{ visibility: visible ? "visible" : "none" }} {...(minzoom ? { minzoom } : {})} @@ -178,9 +179,9 @@ const ThemeTypeLayer = ({ "fill-extrusion-color": colorExpression(color, highlightColor), "fill-extrusion-opacity": active ? activeThemes.length > 1 - ? 0.5 - : 0.7 - : 0.35, + ? 0.35 + : 0.15 + : 0.15, "fill-extrusion-base": ["coalesce",["get", "min_height"],0], "fill-extrusion-height": ["get", "height"], }} @@ -196,12 +197,12 @@ const ThemeTypeLayer = ({ source={theme} source-layer={type} paint={{ - "text-color": "black", - "text-halo-color": highlightColor, + "text-color": labelColor, + "text-halo-color": "hsla(0, 100%, 100%, 1)", "text-halo-width": 1, }} layout={{ - "text-font": ["Noto Sans Bold"], + "text-font": ["Noto Sans Regular"], "text-field": ["get", "@name"], "text-size": 11, visibility: visible ? "visible" : "none", @@ -229,6 +230,8 @@ ThemeTypeLayer.propTypes = { label: PropTypes.bool, minzoom: PropTypes.number, pointSize: PropTypes.number, + fillOutlineColor: PropTypes.string, + labelColor: PropTypes.string, }; export default ThemeTypeLayer;