@geogdev/styles 0.1.0

package/src/layers/labels.ts

@@ -0,0 +1,775 @@
+import type {
+  DataDrivenPropertyValueSpecification,
+  ExpressionSpecification,
+  FilterSpecification,
+  LayerSpecification,
+  SymbolLayerSpecification,
+} from "@maplibre/maplibre-gl-style-spec";
+import { getCountryName, getMultilineName } from "../language";
+import type { Style } from "../styles";
+
+// ============================================
+// TYPES
+// ============================================
+
+type FontStyle = "regular" | "italic" | "bold" | "medium";
+
+interface LabelLayerConfig {
+  id: string;
+  source: string;
+  sourceLayer: string;
+  style: Style;
+  lang: string;
+  script?: string;
+  filter?: FilterSpecification;
+  minzoom?: number;
+  maxzoom?: number;
+  fontStyle?: FontStyle;
+  textSize?: number | ExpressionSpecification;
+  textColor: string;
+  haloColor: string;
+  haloWidth?: number;
+  letterSpacing?: number;
+  maxWidth?: number;
+  textTransform?: "uppercase" | "lowercase" | "none";
+  symbolPlacement?: "point" | "line" | "line-center";
+  useCountryName?: boolean;
+}
+
+// ============================================
+// HELPER FUNCTIONS
+// ============================================
+
+function getFont(style: Style, fontStyle: FontStyle): string {
+  switch (fontStyle) {
+    case "regular":
+      return style.regular || "Noto Sans Regular";
+    case "italic":
+      return style.italic || "Noto Sans Italic";
+    case "bold":
+      return style.bold || "Noto Sans Medium";
+    case "medium":
+      return style.medium || "Noto Sans Medium";
+  }
+}
+
+// ============================================
+// FACTORY FUNCTION
+// ============================================
+
+export function createLabelLayer(
+  config: LabelLayerConfig,
+): SymbolLayerSpecification {
+  const {
+    id,
+    source,
+    sourceLayer,
+    style,
+    lang,
+    script,
+    filter,
+    minzoom,
+    maxzoom,
+    fontStyle = "regular",
+    textSize = 12,
+    textColor,
+    haloColor,
+    haloWidth = 1,
+    letterSpacing,
+    maxWidth,
+    textTransform,
+    symbolPlacement = "point",
+    useCountryName = false,
+  } = config;
+
+  const font = getFont(style, fontStyle);
+  const textField = useCountryName
+    ? getCountryName(lang, script)
+    : getMultilineName(lang, script, style.regular);
+
+  const layout: SymbolLayerSpecification["layout"] = {
+    "text-font": [font],
+    "text-field": textField as DataDrivenPropertyValueSpecification<string>,
+    "text-size": textSize,
+  };
+
+  if (symbolPlacement !== "point") {
+    layout["symbol-placement"] = symbolPlacement;
+  }
+
+  if (letterSpacing !== undefined) {
+    layout["text-letter-spacing"] = letterSpacing;
+  }
+
+  if (maxWidth !== undefined) {
+    layout["text-max-width"] = maxWidth;
+  }
+
+  if (textTransform) {
+    layout["text-transform"] = textTransform;
+  }
+
+  const layer: SymbolLayerSpecification = {
+    id,
+    type: "symbol",
+    source,
+    "source-layer": sourceLayer,
+    layout,
+    paint: {
+      "text-color": textColor,
+      "text-halo-color": haloColor,
+      "text-halo-width": haloWidth,
+    },
+  };
+
+  if (filter) layer.filter = filter;
+  if (minzoom !== undefined) layer.minzoom = minzoom;
+  if (maxzoom !== undefined) layer.maxzoom = maxzoom;
+
+  return layer;
+}
+
+// ============================================
+// SPECIALIZED LABEL CREATORS
+// ============================================
+
+/**
+ * Creates water label layers (ocean, lakes, waterways)
+ */
+export function createWaterLabels(
+  source: string,
+  style: Style,
+  lang: string,
+  script?: string,
+): LayerSpecification[] {
+  return [
+    // Waterway labels (rivers, streams)
+    createLabelLayer({
+      id: "water_waterway_label",
+      source,
+      sourceLayer: "water_name",
+      style,
+      lang,
+      script,
+      minzoom: 13,
+      filter: ["in", "class", "river", "stream"],
+      fontStyle: "italic",
+      textColor: style.ocean_label,
+      haloColor: style.water,
+      symbolPlacement: "line",
+      letterSpacing: 0.2,
+    }),
+    // Ocean labels
+    {
+      id: "water_label_ocean",
+      type: "symbol",
+      source,
+      "source-layer": "water_name",
+      filter: ["in", ["get", "class"], ["literal", ["sea", "ocean"]]],
+      layout: {
+        "text-font": [style.italic || "Noto Sans Italic"],
+        "text-field": getMultilineName(
+          lang,
+          script,
+          style.regular,
+        ) as DataDrivenPropertyValueSpecification<string>,
+        "text-size": ["interpolate", ["linear"], ["zoom"], 3, 10, 10, 12],
+        "text-letter-spacing": 0.1,
+        "text-max-width": 9,
+        "text-transform": "uppercase",
+      },
+      paint: {
+        "text-color": style.ocean_label,
+        "text-halo-width": 1,
+        "text-halo-color": style.water,
+      },
+    },
+    // Lake labels (Point geometry)
+    {
+      id: "water_label_lakes_point",
+      type: "symbol",
+      source,
+      "source-layer": "water_name",
+      filter: [
+        "all",
+        ["==", ["get", "class"], "lake"],
+        ["==", ["geometry-type"], "Point"],
+      ],
+      layout: {
+        "text-font": [style.italic || "Noto Sans Italic"],
+        "text-field": getMultilineName(
+          lang,
+          script,
+          style.regular,
+        ) as DataDrivenPropertyValueSpecification<string>,
+        "text-size": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          3,
+          10,
+          6,
+          12,
+          10,
+          12,
+        ],
+        "text-letter-spacing": 0.1,
+        "text-max-width": 9,
+      },
+      paint: {
+        "text-color": style.ocean_label,
+        "text-halo-color": style.water,
+        "text-halo-width": 1,
+      },
+    },
+    // Lake labels (LineString geometry)
+    {
+      id: "water_label_lakes_line",
+      type: "symbol",
+      source,
+      "source-layer": "water_name",
+      filter: [
+        "all",
+        ["==", ["get", "class"], "lake"],
+        ["==", ["geometry-type"], "LineString"],
+      ],
+      layout: {
+        "symbol-placement": "line-center",
+        "text-rotation-alignment": "viewport",
+        "text-font": [style.italic || "Noto Sans Italic"],
+        "text-field": getMultilineName(
+          lang,
+          script,
+          style.regular,
+        ) as DataDrivenPropertyValueSpecification<string>,
+        "text-size": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          3,
+          10,
+          6,
+          12,
+          10,
+          12,
+        ],
+        "text-letter-spacing": 0.1,
+        "text-max-width": 9,
+      },
+      paint: {
+        "text-color": style.ocean_label,
+        "text-halo-color": style.water,
+        "text-halo-width": 1,
+      },
+    },
+  ];
+}
+
+/**
+ * Creates road label layers
+ */
+export function createRoadLabels(
+  source: string,
+  style: Style,
+  lang: string,
+  script?: string,
+): LayerSpecification[] {
+  return [
+    // Oneway arrows
+    {
+      id: "roads_oneway",
+      type: "symbol",
+      source,
+      "source-layer": "transportation",
+      minzoom: 16,
+      filter: ["==", ["get", "oneway"], "yes"],
+      layout: {
+        "symbol-placement": "line",
+        "icon-image": "arrow_right",
+        "icon-rotate": 0,
+        "symbol-spacing": 100,
+      },
+    },
+    // Minor road labels
+    {
+      id: "roads_labels_minor",
+      type: "symbol",
+      source,
+      "source-layer": "transportation_name",
+      minzoom: 15,
+      filter: [
+        "in",
+        ["get", "class"],
+        [
+          "literal",
+          ["minor", "residential", "unclassified", "service", "track", "path"],
+        ],
+      ],
+      layout: {
+        "symbol-sort-key": ["coalesce", ["get", "min_zoom"], 20],
+        "symbol-placement": "line",
+        "text-font": [style.regular || "Noto Sans Regular"],
+        "text-field": getMultilineName(
+          lang,
+          script,
+          style.regular,
+        ) as DataDrivenPropertyValueSpecification<string>,
+        "text-size": 12,
+      },
+      paint: {
+        "text-color": style.roads_label_minor,
+        "text-halo-color": style.roads_label_minor_halo,
+        "text-halo-width": 1,
+      },
+    },
+    // Road shields
+    {
+      id: "roads_shields",
+      type: "symbol",
+      source,
+      "source-layer": "transportation_name",
+      filter: [
+        "all",
+        [
+          "in",
+          ["get", "class"],
+          [
+            "literal",
+            ["motorway", "trunk", "primary", "secondary", "tertiary"],
+          ],
+        ],
+        ["has", "ref"],
+        ["<=", ["length", ["get", "ref"]], 5],
+      ],
+      layout: {
+        "icon-image": [
+          "concat",
+          "shield|",
+          ["coalesce", ["get", "network"], "default"],
+          "=",
+          ["get", "ref"],
+          "|",
+          ["coalesce", ["get", "name"], ""],
+        ],
+        "text-field": ["get", "ref"],
+        "text-font": [style.bold || "Noto Sans Medium"],
+        "text-size": 8,
+        "icon-size": 0.8,
+        "symbol-placement": "line",
+        "icon-rotation-alignment": "viewport",
+        "text-rotation-alignment": "viewport",
+      },
+      paint: {
+        "text-color": style.roads_label_major,
+        "text-opacity": 0,
+      },
+    },
+    // Major road labels
+    {
+      id: "roads_labels_major",
+      type: "symbol",
+      source,
+      "source-layer": "transportation_name",
+      minzoom: 11,
+      filter: [
+        "in",
+        ["get", "class"],
+        ["literal", ["motorway", "trunk", "primary", "secondary", "tertiary"]],
+      ],
+      layout: {
+        "symbol-sort-key": ["coalesce", ["get", "min_zoom"], 20],
+        "symbol-placement": "line",
+        "text-font": [style.regular || "Noto Sans Regular"],
+        "text-field": getMultilineName(
+          lang,
+          script,
+          style.regular,
+        ) as DataDrivenPropertyValueSpecification<string>,
+        "text-size": 12,
+      },
+      paint: {
+        "text-color": style.roads_label_major,
+        "text-halo-color": style.roads_label_major_halo,
+        "text-halo-width": 1,
+      },
+    },
+  ];
+}
+
+/**
+ * Creates place label layers (countries, states, cities, subplaces)
+ */
+export function createPlaceLabels(
+  source: string,
+  style: Style,
+  lang: string,
+  script?: string,
+): LayerSpecification[] {
+  return [
+    // Subplace labels (neighbourhood, quarter, suburb)
+    {
+      id: "places_subplace",
+      type: "symbol",
+      source,
+      "source-layer": "place",
+      filter: [
+        "in",
+        ["get", "class"],
+        ["literal", ["neighbourhood", "quarter", "suburb"]],
+      ],
+      layout: {
+        "symbol-sort-key": [
+          "case",
+          ["has", "sort_key"],
+          ["get", "sort_key"],
+          ["coalesce", ["get", "min_zoom"], 20],
+        ],
+        "text-field": getMultilineName(
+          lang,
+          script,
+          style.medium,
+        ) as DataDrivenPropertyValueSpecification<string>,
+        "text-font": [style.medium || "Noto Sans Medium"],
+        "text-max-width": 7,
+        "text-letter-spacing": 0.1,
+        "text-padding": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          5,
+          2,
+          8,
+          4,
+          12,
+          18,
+          15,
+          20,
+        ],
+        "text-size": [
+          "interpolate",
+          ["exponential", 1.2],
+          ["zoom"],
+          11,
+          8,
+          14,
+          14,
+          18,
+          24,
+        ],
+      },
+      paint: {
+        "text-color": style.subplace_label,
+        "text-halo-color": style.subplace_label_halo,
+        "text-halo-width": 1,
+      },
+    },
+    // Region/state labels
+    {
+      id: "places_region",
+      type: "symbol",
+      source,
+      "source-layer": "place",
+      filter: ["==", ["get", "class"], "state"],
+      layout: {
+        "symbol-sort-key": ["get", "sort_key"],
+        "text-field": [
+          "step",
+          ["zoom"],
+          ["coalesce", ["get", "ref:en"], ["get", "ref"]],
+          6,
+          getMultilineName(
+            lang,
+            script,
+            style.regular,
+          ) as ExpressionSpecification,
+        ],
+        "text-font": [style.regular || "Noto Sans Regular"],
+        "text-size": ["interpolate", ["linear"], ["zoom"], 3, 11, 7, 16],
+        "text-radial-offset": 0.2,
+        "text-anchor": "center",
+      },
+      paint: {
+        "text-color": style.state_label,
+        "text-halo-color": style.state_label_halo,
+        "text-halo-width": 1,
+      },
+    },
+    // Locality labels (city, town, village, hamlet)
+    {
+      id: "places_locality",
+      type: "symbol",
+      source,
+      "source-layer": "place",
+      filter: [
+        "in",
+        ["get", "class"],
+        ["literal", ["city", "town", "village", "hamlet"]],
+      ],
+      layout: {
+        "icon-image": [
+          "step",
+          ["zoom"],
+          [
+            "case",
+            // Capital cities get star
+            ["==", ["get", "capital"], "yes"],
+            "circle-star",
+            // Cities get scrubber
+            ["==", ["get", "class"], "city"],
+            "scrubber",
+            // Towns, villages, hamlets get circle
+            "circle",
+          ],
+          8,
+          "",
+        ],
+        "icon-size": 0.7,
+        "text-field": getMultilineName(
+          lang,
+          script,
+          style.medium,
+        ) as DataDrivenPropertyValueSpecification<string>,
+        "text-font": [
+          "case",
+          ["<=", ["coalesce", ["get", "min_zoom"], 20], 5],
+          ["literal", [style.bold || "Noto Sans Medium"]],
+          ["literal", [style.medium || "Noto Sans Medium"]],
+        ],
+        "symbol-sort-key": [
+          "case",
+          ["has", "sort_key"],
+          ["get", "sort_key"],
+          ["coalesce", ["get", "min_zoom"], 20],
+        ],
+        "text-padding": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          5,
+          3,
+          8,
+          7,
+          12,
+          11,
+        ],
+        "text-size": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          2,
+          [
+            "case",
+            ["<", ["get", "population_rank"], 13],
+            8,
+            [">=", ["get", "population_rank"], 13],
+            13,
+            0,
+          ],
+          4,
+          [
+            "case",
+            ["<", ["get", "population_rank"], 13],
+            10,
+            [">=", ["get", "population_rank"], 13],
+            15,
+            0,
+          ],
+          6,
+          [
+            "case",
+            ["<", ["get", "population_rank"], 12],
+            11,
+            [">=", ["get", "population_rank"], 12],
+            17,
+            0,
+          ],
+          8,
+          [
+            "case",
+            ["<", ["get", "population_rank"], 11],
+            11,
+            [">=", ["get", "population_rank"], 11],
+            18,
+            0,
+          ],
+          10,
+          [
+            "case",
+            ["<", ["get", "population_rank"], 9],
+            12,
+            [">=", ["get", "population_rank"], 9],
+            20,
+            0,
+          ],
+          15,
+          [
+            "case",
+            ["<", ["get", "population_rank"], 8],
+            12,
+            [">=", ["get", "population_rank"], 8],
+            22,
+            0,
+          ],
+        ],
+        "icon-padding": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          0,
+          0,
+          8,
+          4,
+          10,
+          8,
+          12,
+          6,
+          22,
+          2,
+        ],
+        "text-justify": "auto",
+        "text-variable-anchor": [
+          "step",
+          ["zoom"],
+          ["literal", ["bottom", "left", "right", "top"]],
+          8,
+          ["literal", ["center"]],
+        ],
+        "text-radial-offset": 0.3,
+      },
+      paint: {
+        "text-color": style.city_label,
+        "text-halo-color": style.city_label_halo,
+        "text-halo-width": 1,
+      },
+    },
+    // Country labels
+    {
+      id: "places_country",
+      type: "symbol",
+      source,
+      "source-layer": "place",
+      filter: ["==", ["get", "class"], "country"],
+      layout: {
+        "symbol-sort-key": [
+          "case",
+          ["has", "sort_key"],
+          ["get", "sort_key"],
+          ["coalesce", ["get", "min_zoom"], 20],
+        ],
+        "text-field": getCountryName(
+          lang,
+          script,
+        ) as DataDrivenPropertyValueSpecification<string>,
+        "text-font": [style.bold || "Noto Sans Medium"],
+        "text-size": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          2,
+          [
+            "case",
+            ["<", ["get", "population_rank"], 10],
+            8,
+            [">=", ["get", "population_rank"], 10],
+            12,
+            0,
+          ],
+          6,
+          [
+            "case",
+            ["<", ["get", "population_rank"], 8],
+            10,
+            [">=", ["get", "population_rank"], 8],
+            18,
+            0,
+          ],
+          8,
+          [
+            "case",
+            ["<", ["get", "population_rank"], 7],
+            11,
+            [">=", ["get", "population_rank"], 7],
+            20,
+            0,
+          ],
+        ],
+        "icon-padding": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          0,
+          2,
+          14,
+          2,
+          16,
+          20,
+          17,
+          2,
+          22,
+          2,
+        ],
+      },
+      paint: {
+        "text-color": style.country_label,
+        "text-halo-color": style.earth,
+        "text-halo-width": 1,
+      },
+    },
+  ];
+}
+
+/**
+ * Creates address and island labels
+ */
+export function createMiscLabels(
+  source: string,
+  style: Style,
+  lang: string,
+  script?: string,
+): LayerSpecification[] {
+  return [
+    // Address labels
+    {
+      id: "address_label",
+      type: "symbol",
+      source,
+      "source-layer": "housenumber",
+      minzoom: 18,
+      layout: {
+        "symbol-placement": "point",
+        "text-font": [style.italic || "Noto Sans Italic"],
+        "text-field": ["get", "housenumber"],
+        "text-size": 12,
+      },
+      paint: {
+        "text-color": style.address_label,
+        "text-halo-color": style.address_label_halo,
+        "text-halo-width": 1,
+      },
+    },
+    // Island labels
+    {
+      id: "earth_label_islands",
+      type: "symbol",
+      source,
+      "source-layer": "place",
+      filter: ["==", ["get", "class"], "island"],
+      layout: {
+        "text-font": [style.italic || "Noto Sans Italic"],
+        "text-field": getMultilineName(
+          lang,
+          script,
+          style.regular,
+        ) as DataDrivenPropertyValueSpecification<string>,
+        "text-size": 10,
+        "text-letter-spacing": 0.1,
+        "text-max-width": 8,
+      },
+      paint: {
+        "text-color": style.subplace_label,
+        "text-halo-color": style.subplace_label_halo,
+        "text-halo-width": 1,
+      },
+    },
+  ];
+}