[wip] color updates for explorer site (#142)

* here we go 🚀 * add boundary line label color
OvertureMaps · Aug 8, 2024 · e373d3f · e373d3f
1 parent 5c831d0
commit e373d3f
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 69 deletions.
diff --git a/site/src/Layers.js b/site/src/Layers.js
@@ -3,51 +3,57 @@ 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",
     type: "land",
     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",
     type: "land_use",
     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,16 +63,20 @@ 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",
     type: "water",
     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
@@ -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
@@ -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;