@geogdev/styles 0.1.0

package/src/layers/roads.ts

@@ -0,0 +1,688 @@
+import type {
+  ExpressionSpecification,
+  FilterSpecification,
+  LayerSpecification,
+  LineLayerSpecification,
+} from "@maplibre/maplibre-gl-style-spec";
+import { FILTERS, LINE_WIDTHS, ROAD_CLASSES, ZOOM } from "../constants";
+import type { Style } from "../styles";
+
+// ============================================
+// TYPES
+// ============================================
+
+type RoadCategory = "other" | "minor" | "link" | "major" | "highway";
+type BrunnelType = "tunnel" | "bridge" | null;
+
+interface RoadLayerConfig {
+  source: string;
+  style: Style;
+  brunnel: BrunnelType;
+  category: RoadCategory;
+  isCasing: boolean;
+  minzoom?: number;
+  maxzoom?: number;
+}
+
+// ============================================
+// HELPER FUNCTIONS
+// ============================================
+
+function getRoadClasses(category: RoadCategory): readonly string[] {
+  switch (category) {
+    case "other":
+      return ROAD_CLASSES.OTHER;
+    case "minor":
+      return ROAD_CLASSES.MINOR;
+    case "major":
+      return ROAD_CLASSES.MAJOR;
+    case "highway":
+      return ROAD_CLASSES.HIGHWAY;
+    case "link":
+      return []; // Link uses ramp filter, not class filter
+  }
+}
+
+function buildFilter(
+  brunnel: BrunnelType,
+  category: RoadCategory,
+): FilterSpecification {
+  const conditions: ExpressionSpecification[] = [];
+
+  // Brunnel condition
+  if (brunnel === "tunnel") {
+    conditions.push(FILTERS.IS_TUNNEL);
+  } else if (brunnel === "bridge") {
+    conditions.push(FILTERS.IS_BRIDGE);
+  } else {
+    conditions.push(FILTERS.NOT_BRUNNEL);
+  }
+
+  // Road class condition
+  if (category === "link") {
+    conditions.push(FILTERS.IS_RAMP);
+  } else {
+    const classes = getRoadClasses(category);
+    if (classes.length > 0) {
+      conditions.push([
+        "in",
+        ["get", "class"],
+        ["literal", classes as unknown as string[]],
+      ]);
+    }
+    // Highway excludes ramps
+    if (category === "highway") {
+      conditions.push(FILTERS.NOT_RAMP);
+    }
+  }
+
+  return conditions.length === 1
+    ? conditions[0]
+    : (["all", ...conditions] as FilterSpecification);
+}
+
+function getLayerId(
+  brunnel: BrunnelType,
+  category: RoadCategory,
+  isCasing: boolean,
+): string {
+  const prefix =
+    brunnel === "tunnel"
+      ? "roads_tunnels"
+      : brunnel === "bridge"
+        ? "roads_bridges"
+        : "roads";
+
+  const suffix = isCasing ? "_casing" : "";
+  return `${prefix}_${category}${suffix}`;
+}
+
+function getCasingColor(
+  style: Style,
+  brunnel: BrunnelType,
+  category: RoadCategory,
+): string {
+  if (brunnel === "tunnel") {
+    switch (category) {
+      case "other":
+        return style.tunnel_other_casing;
+      case "minor":
+        return style.tunnel_minor_casing;
+      case "link":
+        return style.tunnel_link_casing;
+      case "major":
+        return style.tunnel_major_casing;
+      case "highway":
+        return style.tunnel_highway_casing;
+    }
+  }
+  if (brunnel === "bridge") {
+    switch (category) {
+      case "other":
+        return style.bridges_other_casing;
+      case "minor":
+        return style.bridges_minor_casing;
+      case "link":
+        return style.bridges_minor_casing; // Uses minor casing color
+      case "major":
+        return style.bridges_major_casing;
+      case "highway":
+        return style.bridges_highway_casing;
+    }
+  }
+  // Regular roads (no brunnel)
+  switch (category) {
+    case "other":
+      return style.minor_casing; // No dedicated other casing
+    case "minor":
+      return style.minor_casing;
+    case "link":
+      return style.minor_casing;
+    case "major":
+      return style.major_casing_late;
+    case "highway":
+      return style.highway_casing_late;
+  }
+}
+
+function getFillColor(
+  style: Style,
+  brunnel: BrunnelType,
+  category: RoadCategory,
+): string | ExpressionSpecification {
+  if (brunnel === "tunnel") {
+    switch (category) {
+      case "other":
+        return style.tunnel_other;
+      case "minor":
+        return style.tunnel_minor;
+      case "link":
+        return style.tunnel_minor; // Uses minor color
+      case "major":
+        return style.tunnel_major;
+      case "highway":
+        return style.tunnel_highway;
+    }
+  }
+  if (brunnel === "bridge") {
+    switch (category) {
+      case "other":
+        return style.bridges_other;
+      case "minor":
+        return style.bridges_minor;
+      case "link":
+        return style.bridges_minor; // Uses minor color
+      case "major":
+        return style.bridges_major;
+      case "highway":
+        return style.bridges_highway;
+    }
+  }
+  // Regular roads (no brunnel)
+  switch (category) {
+    case "other":
+      return style.other;
+    case "minor":
+      return [
+        "interpolate",
+        ["exponential", 1.6],
+        ["zoom"],
+        11,
+        style.minor_a,
+        16,
+        style.minor_b,
+      ] as ExpressionSpecification;
+    case "link":
+      return style.link;
+    case "major":
+      return style.major;
+    case "highway":
+      return style.highway;
+  }
+}
+
+function getLineWidth(category: RoadCategory): ExpressionSpecification {
+  switch (category) {
+    case "other":
+      return LINE_WIDTHS.OTHER;
+    case "minor":
+      return LINE_WIDTHS.MINOR;
+    case "link":
+      return LINE_WIDTHS.LINK;
+    case "major":
+      return LINE_WIDTHS.MAJOR;
+    case "highway":
+      return LINE_WIDTHS.HIGHWAY;
+  }
+}
+
+function getCasingGapWidth(category: RoadCategory): ExpressionSpecification {
+  switch (category) {
+    case "other":
+      return LINE_WIDTHS.OTHER;
+    case "minor":
+      return LINE_WIDTHS.MINOR_CASING_GAP;
+    case "link":
+      return LINE_WIDTHS.LINK_CASING_GAP;
+    case "major":
+      return LINE_WIDTHS.MAJOR_CASING_GAP;
+    case "highway":
+      return LINE_WIDTHS.HIGHWAY_CASING_GAP;
+  }
+}
+
+function getCasingWidth(category: RoadCategory): ExpressionSpecification {
+  switch (category) {
+    case "other":
+      // Other roads don't have explicit casing width
+      return LINE_WIDTHS.CASING_THIN;
+    case "minor":
+      return LINE_WIDTHS.CASING_THIN;
+    case "link":
+      return LINE_WIDTHS.CASING_THIN;
+    case "major":
+      return LINE_WIDTHS.CASING_MEDIUM;
+    case "highway":
+      return LINE_WIDTHS.CASING_THICK;
+  }
+}
+
+function getDasharray(
+  brunnel: BrunnelType,
+  category: RoadCategory,
+  isCasing: boolean,
+): number[] | undefined {
+  if (brunnel === "tunnel") {
+    if (isCasing) {
+      // Tunnel casings have dashed outlines
+      if (category === "highway") return [6, 0.5];
+      if (category !== "other") return [3, 2];
+    } else {
+      // Tunnel fills for other roads
+      if (category === "other") return [4.5, 0.5];
+    }
+  } else if (brunnel === "bridge") {
+    // Bridge other roads have dash
+    if (!isCasing && category === "other") return [2, 1];
+  } else {
+    // Regular other roads have dash
+    if (!isCasing && category === "other") return [3, 1];
+  }
+  return undefined;
+}
+
+// ============================================
+// FACTORY FUNCTION
+// ============================================
+
+export function createRoadLayer(
+  config: RoadLayerConfig,
+): LineLayerSpecification {
+  const { source, style, brunnel, category, isCasing, minzoom, maxzoom } =
+    config;
+
+  const layer: LineLayerSpecification = {
+    id: getLayerId(brunnel, category, isCasing),
+    type: "line",
+    source,
+    "source-layer": "transportation",
+    filter: buildFilter(brunnel, category),
+    paint: {},
+  };
+
+  if (minzoom !== undefined) layer.minzoom = minzoom;
+  if (maxzoom !== undefined) layer.maxzoom = maxzoom;
+
+  if (isCasing) {
+    layer.paint = {
+      "line-color": getCasingColor(style, brunnel, category),
+      "line-gap-width": getCasingGapWidth(category),
+      "line-width": getCasingWidth(category),
+    };
+    const dasharray = getDasharray(brunnel, category, true);
+    if (dasharray) {
+      layer.paint["line-dasharray"] = dasharray;
+    }
+  } else {
+    layer.paint = {
+      "line-color": getFillColor(style, brunnel, category),
+      "line-width": getLineWidth(category),
+    };
+    const dasharray = getDasharray(brunnel, category, false);
+    if (dasharray) {
+      layer.paint["line-dasharray"] = dasharray;
+    }
+  }
+
+  return layer;
+}
+
+// ============================================
+// BATCH CREATION FUNCTIONS
+// ============================================
+
+/**
+ * Creates all tunnel road layers (casing + fill for each category)
+ */
+export function createTunnelLayers(
+  source: string,
+  style: Style,
+): LayerSpecification[] {
+  const categories: RoadCategory[] = [
+    "other",
+    "minor",
+    "link",
+    "major",
+    "highway",
+  ];
+  const layers: LayerSpecification[] = [];
+
+  // Casing layers first
+  for (const category of categories) {
+    layers.push(
+      createRoadLayer({
+        source,
+        style,
+        brunnel: "tunnel",
+        category,
+        isCasing: true,
+      }),
+    );
+  }
+
+  // Fill layers
+  for (const category of categories) {
+    layers.push(
+      createRoadLayer({
+        source,
+        style,
+        brunnel: "tunnel",
+        category,
+        isCasing: false,
+      }),
+    );
+  }
+
+  return layers;
+}
+
+/**
+ * Creates all regular (non-tunnel, non-bridge) road layers
+ */
+export function createRoadLayers(
+  source: string,
+  style: Style,
+): LayerSpecification[] {
+  const layers: LayerSpecification[] = [];
+
+  // Minor service casing (z16+)
+  layers.push({
+    id: "roads_minor_service_casing",
+    type: "line",
+    source,
+    "source-layer": "transportation",
+    minzoom: ZOOM.ROADS_MINOR_SERVICE_MIN,
+    filter: ["all", FILTERS.NOT_BRUNNEL, ["==", ["get", "class"], "service"]],
+    paint: {
+      "line-color": style.minor_service_casing,
+      "line-gap-width": [
+        "interpolate",
+        ["exponential", 1.6],
+        ["zoom"],
+        13,
+        0,
+        18,
+        8,
+      ],
+      "line-width": [
+        "interpolate",
+        ["exponential", 1.6],
+        ["zoom"],
+        13,
+        0,
+        13.5,
+        0.8,
+      ],
+    },
+  });
+
+  // Minor casing
+  layers.push(
+    createRoadLayer({
+      source,
+      style,
+      brunnel: null,
+      category: "minor",
+      isCasing: true,
+    }),
+  );
+
+  // Link casing (z13+)
+  layers.push({
+    ...createRoadLayer({
+      source,
+      style,
+      brunnel: null,
+      category: "link",
+      isCasing: true,
+      minzoom: ZOOM.ROADS_LINK_MIN,
+    }),
+    // Override filter to remove NOT_BRUNNEL (link casing shows everywhere)
+    filter: FILTERS.IS_RAMP,
+  });
+
+  // Major casing late (z12+)
+  layers.push(
+    createRoadLayer({
+      source,
+      style,
+      brunnel: null,
+      category: "major",
+      isCasing: true,
+      minzoom: ZOOM.ROADS_MAJOR_CASING_LATE_MIN,
+    }),
+  );
+
+  // Highway casing late (z12+)
+  layers.push(
+    createRoadLayer({
+      source,
+      style,
+      brunnel: null,
+      category: "highway",
+      isCasing: true,
+      minzoom: ZOOM.ROADS_HIGHWAY_CASING_LATE_MIN,
+    }),
+  );
+
+  // Other roads fill
+  layers.push(
+    createRoadLayer({
+      source,
+      style,
+      brunnel: null,
+      category: "other",
+      isCasing: false,
+    }),
+  );
+
+  // Link roads fill
+  layers.push({
+    ...createRoadLayer({
+      source,
+      style,
+      brunnel: null,
+      category: "link",
+      isCasing: false,
+    }),
+    // Override filter to remove NOT_BRUNNEL
+    filter: FILTERS.IS_RAMP,
+  });
+
+  // Minor service fill
+  layers.push({
+    id: "roads_minor_service",
+    type: "line",
+    source,
+    "source-layer": "transportation",
+    filter: ["all", FILTERS.NOT_BRUNNEL, ["==", ["get", "class"], "service"]],
+    paint: {
+      "line-color": style.minor_service,
+      "line-width": [
+        "interpolate",
+        ["exponential", 1.6],
+        ["zoom"],
+        13,
+        0,
+        18,
+        8,
+      ],
+    },
+  });
+
+  // Minor roads fill
+  layers.push(
+    createRoadLayer({
+      source,
+      style,
+      brunnel: null,
+      category: "minor",
+      isCasing: false,
+    }),
+  );
+
+  // Major casing early (maxzoom 12)
+  layers.push({
+    id: "roads_major_casing_early",
+    type: "line",
+    source,
+    "source-layer": "transportation",
+    maxzoom: ZOOM.ROADS_MAJOR_CASING_EARLY_MAX,
+    filter: [
+      "all",
+      FILTERS.NOT_BRUNNEL,
+      ["in", ["get", "class"], ["literal", [...ROAD_CLASSES.MAJOR]]],
+    ],
+    paint: {
+      "line-color": style.major_casing_early,
+      "line-gap-width": LINE_WIDTHS.MAJOR_CASING_GAP,
+      "line-width": LINE_WIDTHS.CASING_MEDIUM,
+    },
+  });
+
+  // Major roads fill
+  layers.push(
+    createRoadLayer({
+      source,
+      style,
+      brunnel: null,
+      category: "major",
+      isCasing: false,
+    }),
+  );
+
+  // Highway casing early (maxzoom 12)
+  layers.push({
+    id: "roads_highway_casing_early",
+    type: "line",
+    source,
+    "source-layer": "transportation",
+    maxzoom: ZOOM.ROADS_HIGHWAY_CASING_EARLY_MAX,
+    filter: [
+      "all",
+      FILTERS.NOT_BRUNNEL,
+      ["in", ["get", "class"], ["literal", [...ROAD_CLASSES.HIGHWAY]]],
+      FILTERS.NOT_RAMP,
+    ],
+    paint: {
+      "line-color": style.highway_casing_early,
+      "line-gap-width": [
+        "interpolate",
+        ["exponential", 1.6],
+        ["zoom"],
+        3,
+        0,
+        3.5,
+        0.5,
+        18,
+        10,
+      ],
+      "line-width": [
+        "interpolate",
+        ["exponential", 1.6],
+        ["zoom"],
+        7,
+        0,
+        7.5,
+        1,
+      ],
+    },
+  });
+
+  // Highway fill
+  layers.push(
+    createRoadLayer({
+      source,
+      style,
+      brunnel: null,
+      category: "highway",
+      isCasing: false,
+    }),
+  );
+
+  return layers;
+}
+
+/**
+ * Creates all bridge road layers (casing + fill for each category)
+ */
+export function createBridgeLayers(
+  source: string,
+  style: Style,
+): LayerSpecification[] {
+  const categories: RoadCategory[] = ["other", "link", "minor", "major"];
+  const layers: LayerSpecification[] = [];
+
+  // Casing layers first (all at z12+)
+  for (const category of categories) {
+    layers.push(
+      createRoadLayer({
+        source,
+        style,
+        brunnel: "bridge",
+        category,
+        isCasing: true,
+        minzoom: ZOOM.ROADS_BRIDGES_MIN,
+      }),
+    );
+  }
+
+  // Fill layers
+  for (const category of categories) {
+    layers.push(
+      createRoadLayer({
+        source,
+        style,
+        brunnel: "bridge",
+        category,
+        isCasing: false,
+        minzoom: ZOOM.ROADS_BRIDGES_MIN,
+      }),
+    );
+  }
+
+  // Highway casing (z12+)
+  layers.push(
+    createRoadLayer({
+      source,
+      style,
+      brunnel: "bridge",
+      category: "highway",
+      isCasing: true,
+      minzoom: ZOOM.ROADS_BRIDGES_MIN,
+    }),
+  );
+
+  // Highway fill (no minzoom in original)
+  layers.push(
+    createRoadLayer({
+      source,
+      style,
+      brunnel: "bridge",
+      category: "highway",
+      isCasing: false,
+    }),
+  );
+
+  return layers;
+}
+
+/**
+ * Creates pier layer (special road type)
+ */
+export function createPierLayer(
+  source: string,
+  style: Style,
+): LayerSpecification {
+  return {
+    id: "roads_pier",
+    type: "line",
+    source,
+    "source-layer": "transportation",
+    filter: ["==", "subclass", "pier"],
+    paint: {
+      "line-color": style.pier,
+      "line-width": [
+        "interpolate",
+        ["exponential", 1.6],
+        ["zoom"],
+        12,
+        0,
+        12.5,
+        0.5,
+        20,
+        16,
+      ],
+    },
+  };
+}