Make fonts a theme parameter, add landcover and more poi colors in th…

…eme object (#325) * make regular,bold,italic fonts a theme property. * re-order optional properties * update poi colors
protomaps · Oct 23, 2024 · 59145d8 · 59145d8
1 parent 4d30e24
commit 59145d8
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 16 deletions.
diff --git a/styles/src/base_layers.ts b/styles/src/base_layers.ts
@@ -1378,7 +1378,7 @@ export function labels_layers(
       filter: ["in", "kind", "river", "stream"],
       layout: {
         "symbol-placement": "line",
-        "text-font": ["Noto Sans Italic"],
+        "text-font": [t.italic || "Noto Sans Italic"],
         "text-field": get_multiline_name(
           lang,
           script,
@@ -1400,7 +1400,7 @@ export function labels_layers(
       layout: {
         "symbol-sort-key": ["get", "min_zoom"],
         "symbol-placement": "line",
-        "text-font": ["Noto Sans Regular"],
+        "text-font": [t.regular || "Noto Sans Regular"],
         "text-field": get_multiline_name(
           lang,
           script,
@@ -1431,10 +1431,11 @@ export function labels_layers(
         "fjord",
       ],
       layout: {
-        "text-font": ["Noto Sans Italic"],
+        "text-font": [t.italic || "Noto Sans Italic"],
         "text-field": get_multiline_name(
           lang,
           script,
+          t.regular,
         ) as DataDrivenPropertyValueSpecification<string>,
         "text-size": ["interpolate", ["linear"], ["zoom"], 3, 10, 10, 12],
         "text-letter-spacing": 0.1,
@@ -1452,10 +1453,11 @@ export function labels_layers(
       "source-layer": "water",
       filter: ["in", "kind", "lake", "water"],
       layout: {
-        "text-font": ["Noto Sans Italic"],
+        "text-font": [t.italic || "Noto Sans Italic"],
         "text-field": get_multiline_name(
           lang,
           script,
+          t.regular,
         ) as DataDrivenPropertyValueSpecification<string>,
         "text-size": ["interpolate", ["linear"], ["zoom"], 3, 0, 6, 12, 10, 12],
         "text-letter-spacing": 0.1,
@@ -1475,10 +1477,11 @@ export function labels_layers(
       layout: {
         "symbol-sort-key": ["get", "min_zoom"],
         "symbol-placement": "line",
-        "text-font": ["Noto Sans Regular"],
+        "text-font": [t.regular || "Noto Sans Regular"],
         "text-field": get_multiline_name(
           lang,
           script,
+          t.regular,
         ) as DataDrivenPropertyValueSpecification<string>,
         "text-size": 12,
       },
@@ -1510,7 +1513,7 @@ export function labels_layers(
             ],
             layout: {
               "icon-image": ["get", "kind"],
-              "text-font": ["Noto Sans Regular"],
+              "text-font": [t.regular || "Noto Sans Regular"],
               "text-justify": "auto",
               "text-field": get_multiline_name(
                 lang,
@@ -1550,8 +1553,9 @@ export function labels_layers(
         "text-field": get_multiline_name(
           lang,
           script,
+          t.regular,
         ) as DataDrivenPropertyValueSpecification<string>,
-        "text-font": ["Noto Sans Regular"],
+        "text-font": [t.regular || "Noto Sans Regular"],
         "text-max-width": 7,
         "text-letter-spacing": 0.1,
         "text-padding": [
@@ -1599,12 +1603,13 @@ export function labels_layers(
         "text-field": get_multiline_name(
           lang,
           script,
+          t.regular,
         ) as DataDrivenPropertyValueSpecification<string>,
         "text-font": [
           "case",
           ["<=", ["get", "min_zoom"], 5],
-          ["literal", ["Noto Sans Medium"]],
-          ["literal", ["Noto Sans Regular"]],
+          ["literal", [t.bold || "Noto Sans Medium"]],
+          ["literal", [t.regular || "Noto Sans Regular"]],
         ],
         "text-padding": [
           "interpolate",
@@ -1715,9 +1720,13 @@ export function labels_layers(
           ["zoom"],
           ["get", "name:short"],
           6,
-          get_multiline_name(lang, script) as ExpressionSpecification,
+          get_multiline_name(
+            lang,
+            script,
+            t.regular,
+          ) as ExpressionSpecification,
         ],
-        "text-font": ["Noto Sans Regular"],
+        "text-font": [t.regular || "Noto Sans Regular"],
         "text-size": ["interpolate", ["linear"], ["zoom"], 3, 11, 7, 16],
         "text-radial-offset": 0.2,
         "text-anchor": "center",
@@ -1742,7 +1751,7 @@ export function labels_layers(
           lang,
           script,
         ) as DataDrivenPropertyValueSpecification<string>,
-        "text-font": ["Noto Sans Medium"],
+        "text-font": [t.bold || "Noto Sans Medium"],
         "text-size": [
           "interpolate",
           ["linear"],

diff --git a/styles/src/language.ts b/styles/src/language.ts
@@ -1,4 +1,7 @@
-function get_name_block(script_segment: "name" | "name2" | "name3") {
+function get_name_block(
+  script_segment: "name" | "name2" | "name3",
+  regular?: string,
+) {
   let script = "script";
 
   if (script_segment === "name") {
@@ -16,7 +19,7 @@ function get_name_block(script_segment: "name" | "name2" | "name3") {
         "case",
         ["==", ["get", script], "Devanagari"],
         ["literal", ["Noto Sans Devanagari Regular v1"]],
-        ["literal", ["Noto Sans Regular"]],
+        ["literal", [regular || "Noto Sans Regular"]],
       ],
     },
   ];
@@ -82,7 +85,11 @@ export function get_country_name(lang: string, script?: string) {
   ];
 }
 
-export function get_multiline_name(lang: string, script?: string) {
+export function get_multiline_name(
+  lang: string,
+  script?: string,
+  regular?: string,
+) {
   const _script = script || get_default_script(lang);
   let name_prefix: string;
   if (_script === "Devanagari") {
@@ -135,7 +142,7 @@ export function get_multiline_name(lang: string, script?: string) {
               "case",
               ["==", ["get", "script"], "Devanagari"],
               ["literal", ["Noto Sans Devanagari Regular v1"]],
-              ["literal", ["Noto Sans Regular"]],
+              ["literal", [regular || "Noto Sans Regular"]],
             ],
           },
         ],

diff --git a/styles/src/themes.ts b/styles/src/themes.ts
@@ -76,15 +76,37 @@ export interface Theme {
   state_label_halo: string;
   country_label: string;
 
+  regular?: string;
+  bold?: string;
+  italic?: string;
+
   pois?: Pois;
+  landcover?: Landcover;
 
   // deprecated
   peak_label: string;
   waterway_label: string;
 }
 
 export interface Pois {
+  blue: string;
   green: string;
+  lapis: string;
+  pink: string;
+  red: string;
+  slategray: string;
+  tangerine: string;
+  turquoise: string;
+}
+
+export interface Landcover {
+  barren: string;
+  farmland: string;
+  forest: string;
+  glacier: string;
+  grassland: string;
+  scrub: string;
+  urban_area: string;
 }
 
 export const CONTRAST: Theme = {
@@ -249,7 +271,14 @@ export const LIGHT: Theme = {
   country_label: "#a3a3a3",
 
   pois: {
+    blue: "#1A8CBD",
     green: "#20834D",
+    lapis: "#315BCF",
+    pink: "#EF56BA",
+    red: "#F2567A",
+    slategray: "#6A5B8F",
+    tangerine: "#CB6704",
+    turquoise: "#00C3D4",
   },
 };
 
@@ -334,7 +363,14 @@ export const DARK: Theme = {
   country_label: "#5c5c5c",
 
   pois: {
+    blue: "#4299BB",
     green: "#30C573",
+    lapis: "#2B5CEA",
+    pink: "#EF56BA",
+    red: "#F2567A",
+    slategray: "#93939F",
+    tangerine: "#F19B6E",
+    turquoise: "#00C3D4",
   },
 };