@geogdev/styles 0.1.0

package/src/layers/landcover.ts

@@ -0,0 +1,323 @@
+import type { LayerSpecification } from "@maplibre/maplibre-gl-style-spec";
+import { LANDCOVER_SUBCLASSES, LANDUSE_CLASSES, ZOOM } from "../constants";
+import type { Style } from "../styles";
+
+/**
+ * Creates landcover layers (natural features)
+ */
+export function createLandcoverLayers(
+  source: string,
+  style: Style,
+): LayerSpecification[] {
+  // Return empty array if landcover is not defined in style
+  if (!style.landcover) {
+    return [];
+  }
+
+  return [
+    // Main landcover (fades out at higher zoom)
+    {
+      id: "landcover",
+      type: "fill",
+      source,
+      "source-layer": "landcover",
+      paint: {
+        "fill-color": [
+          "match",
+          ["get", "class"],
+          "grass",
+          style.landcover.grassland,
+          "sand",
+          style.landcover.barren,
+          "farmland",
+          style.landcover.farmland,
+          "ice",
+          style.landcover.glacier,
+          "wood",
+          style.landcover.forest,
+          "rock",
+          style.landcover.rock,
+          "wetland",
+          style.landcover.wetland,
+          style.landcover.forest, // default
+        ],
+        "fill-opacity": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          ZOOM.LANDCOVER_FADE_START,
+          1,
+          ZOOM.LANDCOVER_FADE_END,
+          0,
+        ],
+      },
+    },
+    // Green areas (parks, gardens, golf courses, etc.)
+    {
+      id: "landcover_green",
+      type: "fill",
+      source,
+      "source-layer": "landcover",
+      filter: [
+        "in",
+        ["get", "subclass"],
+        ["literal", [...LANDCOVER_SUBCLASSES.GREEN]],
+      ],
+      paint: {
+        "fill-color": style.park_b,
+        "fill-opacity": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          ZOOM.LANDCOVER_GREEN_START,
+          0,
+          ZOOM.LANDCOVER_GREEN_END,
+          0.5,
+        ],
+      },
+    },
+    // Meadow and grassland
+    {
+      id: "landcover_meadow",
+      type: "fill",
+      source,
+      "source-layer": "landcover",
+      filter: [
+        "in",
+        ["get", "subclass"],
+        ["literal", [...LANDCOVER_SUBCLASSES.MEADOW]],
+      ],
+      paint: {
+        "fill-color": style.landcover.grassland,
+        "fill-opacity": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          ZOOM.LANDCOVER_GREEN_START,
+          0,
+          ZOOM.LANDCOVER_GREEN_END,
+          1,
+        ],
+      },
+    },
+  ];
+}
+
+/**
+ * Creates park layers
+ */
+export function createParkLayers(
+  source: string,
+  style: Style,
+): LayerSpecification[] {
+  return [
+    {
+      id: "park",
+      type: "fill",
+      source,
+      "source-layer": "park",
+      paint: {
+        "fill-opacity": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          ZOOM.PARK_FADE_START,
+          0,
+          ZOOM.PARK_FADE_END,
+          1,
+        ],
+        "fill-color": [
+          "match",
+          ["get", "class"],
+          "national_park",
+          style.park_a,
+          "nature_reserve",
+          style.park_a,
+          "protected_area",
+          style.park_a,
+          style.park_b, // default
+        ],
+      },
+    },
+  ];
+}
+
+/**
+ * Creates landuse layers (human-made features)
+ */
+export function createLanduseLayers(
+  source: string,
+  style: Style,
+): LayerSpecification[] {
+  return [
+    // Green landuse (cemeteries, playgrounds, stadiums, etc.)
+    {
+      id: "landuse_green",
+      type: "fill",
+      source,
+      "source-layer": "landuse",
+      filter: ["in", "class", ...LANDUSE_CLASSES.GREEN],
+      paint: {
+        "fill-opacity": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          ZOOM.LANDUSE_FADE_START,
+          0,
+          ZOOM.LANDUSE_FADE_END,
+          1,
+        ],
+        "fill-color": style.park_b,
+      },
+    },
+    // Hospital
+    {
+      id: "landuse_hospital",
+      type: "fill",
+      source,
+      "source-layer": "landuse",
+      filter: ["==", "class", "hospital"],
+      paint: {
+        "fill-color": style.hospital,
+      },
+    },
+    // Industrial
+    {
+      id: "landuse_industrial",
+      type: "fill",
+      source,
+      "source-layer": "landuse",
+      filter: ["==", "class", "industrial"],
+      paint: {
+        "fill-color": style.industrial,
+      },
+    },
+    // Schools and universities
+    {
+      id: "landuse_school",
+      type: "fill",
+      source,
+      "source-layer": "landuse",
+      filter: ["in", "class", ...LANDUSE_CLASSES.EDUCATION],
+      paint: {
+        "fill-color": style.school,
+      },
+    },
+    // Zoo
+    {
+      id: "landuse_zoo",
+      type: "fill",
+      source,
+      "source-layer": "landuse",
+      filter: ["==", "class", "zoo"],
+      paint: {
+        "fill-color": style.zoo,
+      },
+    },
+    // Aerodrome
+    {
+      id: "landuse_aerodrome",
+      type: "fill",
+      source,
+      "source-layer": "landuse",
+      filter: ["==", "class", "aerodrome"],
+      paint: {
+        "fill-color": style.aerodrome,
+      },
+    },
+    // Pedestrian areas
+    {
+      id: "landuse_pedestrian",
+      type: "fill",
+      source,
+      "source-layer": "landuse",
+      filter: ["in", "class", ...LANDUSE_CLASSES.PEDESTRIAN],
+      paint: {
+        "fill-color": style.pedestrian,
+      },
+    },
+    // Pier
+    {
+      id: "landuse_pier",
+      type: "fill",
+      source,
+      "source-layer": "landuse",
+      filter: ["==", "class", "pier"],
+      paint: {
+        "fill-color": style.pier,
+      },
+    },
+  ];
+}
+
+/**
+ * Creates aeroway layers
+ */
+export function createAerowayLayers(
+  source: string,
+  style: Style,
+): LayerSpecification[] {
+  return [
+    // Aeroway fill (aprons, helipads)
+    {
+      id: "aeroway_fill",
+      type: "fill",
+      source,
+      "source-layer": "aeroway",
+      filter: [
+        "all",
+        ["==", "$type", "Polygon"],
+        ["in", "class", "apron", "helipad"],
+      ],
+      paint: {
+        "fill-color": style.runway,
+      },
+    },
+    // Runway
+    {
+      id: "aeroway_runway",
+      type: "line",
+      source,
+      "source-layer": "aeroway",
+      minzoom: ZOOM.AEROWAY_MIN,
+      filter: ["all", ["==", "$type", "LineString"], ["==", "class", "runway"]],
+      paint: {
+        "line-color": style.runway,
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.2],
+          ["zoom"],
+          11,
+          3,
+          20,
+          48,
+        ],
+      },
+    },
+    // Taxiway
+    {
+      id: "aeroway_taxiway",
+      type: "line",
+      source,
+      "source-layer": "aeroway",
+      minzoom: ZOOM.AEROWAY_MIN,
+      filter: [
+        "all",
+        ["==", "$type", "LineString"],
+        ["==", "class", "taxiway"],
+      ],
+      paint: {
+        "line-color": style.runway,
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.2],
+          ["zoom"],
+          11,
+          1,
+          20,
+          24,
+        ],
+      },
+    },
+  ];
+}

package/src/layers/pois.ts

@@ -0,0 +1,165 @@
+import type {
+  DataDrivenPropertyValueSpecification,
+  LayerSpecification,
+} from "@maplibre/maplibre-gl-style-spec";
+import { POI_CATEGORIES, POI_TIERS, ZOOM } from "../constants";
+import { getMultilineName } from "../language";
+import type { Style } from "../styles";
+
+/**
+ * Creates POI (points of interest) layers
+ * Uses tiered zoom levels for progressive disclosure
+ */
+export function createPoiLayers(
+  source: string,
+  style: Style,
+  lang: string,
+  script?: string,
+): LayerSpecification[] {
+  // Return empty array if POIs are not defined in style
+  if (!style.pois) {
+    return [];
+  }
+
+  return [
+    {
+      id: "pois",
+      type: "symbol",
+      source,
+      "source-layer": "poi",
+      minzoom: ZOOM.LABELS_POI_MIN,
+      filter: [
+        "any",
+        // Tier 1: z10+ - Airports
+        ["all", [">=", ["zoom"], 10], ["==", ["get", "subclass"], "aerodrome"]],
+        // Tier 2: z12+ - Major infrastructure
+        [
+          "all",
+          [">=", ["zoom"], 12],
+          ["in", ["get", "subclass"], ["literal", [...POI_TIERS.TIER_2]]],
+        ],
+        // Tier 3: z14+ - Standard POIs (civic, tourism, religion)
+        [
+          "all",
+          [">=", ["zoom"], 14],
+          ["in", ["get", "subclass"], ["literal", [...POI_TIERS.TIER_3]]],
+          // Rank filter for density control
+          [
+            "<=",
+            ["coalesce", ["get", "rank"], 999],
+            [
+              "interpolate",
+              ["linear"],
+              ["zoom"],
+              14,
+              15,
+              15,
+              50,
+              16,
+              100,
+              17,
+              200,
+            ],
+          ],
+        ],
+        // Tier 4: z15+ - Food, drink, retail, and fuel
+        [
+          "all",
+          [">=", ["zoom"], 15],
+          ["in", ["get", "subclass"], ["literal", [...POI_TIERS.TIER_4]]],
+          // Rank filter
+          [
+            "<=",
+            ["coalesce", ["get", "rank"], 999],
+            ["interpolate", ["linear"], ["zoom"], 15, 30, 16, 75, 17, 150],
+          ],
+        ],
+        // Tier 5: z17+ - Minor POIs
+        [
+          "all",
+          [">=", ["zoom"], 17],
+          ["in", ["get", "subclass"], ["literal", [...POI_TIERS.TIER_5]]],
+        ],
+        // Tier 5b: z17+ - Public access only (pools, gardens)
+        [
+          "all",
+          [">=", ["zoom"], 17],
+          [
+            "in",
+            ["get", "subclass"],
+            ["literal", [...POI_TIERS.TIER_5B_ACCESS]],
+          ],
+          // Only show publicly accessible (not private/customers)
+          [
+            "!",
+            [
+              "in",
+              ["coalesce", ["get", "access"], "yes"],
+              ["literal", ["private", "customers", "no"]],
+            ],
+          ],
+        ],
+      ],
+      layout: {
+        "icon-image": [
+          "match",
+          ["get", "subclass"],
+          // Map subclass names to sprite names where they differ
+          "station",
+          "train_station",
+          "gallery",
+          "art_gallery",
+          // Default: use subclass name directly
+          ["get", "subclass"],
+        ],
+        "icon-size": 0.5, // Scale 48px Phosphor icons to ~24px
+        "text-font": [style.medium || "Noto Sans Medium"],
+        "text-justify": "auto",
+        "text-field": getMultilineName(
+          lang,
+          script,
+          style.medium,
+        ) as DataDrivenPropertyValueSpecification<string>,
+        "text-size": ["interpolate", ["linear"], ["zoom"], 17, 11, 19, 18],
+        "text-max-width": 8,
+        "text-offset": [1.1, 0],
+        "text-variable-anchor": ["left", "right"],
+      },
+      paint: {
+        "text-color": [
+          "case",
+          // Nature/Parks - green
+          ["in", ["get", "subclass"], ["literal", [...POI_CATEGORIES.GREEN]]],
+          style.pois.green,
+          // Transport - lapis
+          ["in", ["get", "subclass"], ["literal", [...POI_CATEGORIES.LAPIS]]],
+          style.pois.lapis,
+          // Civic/Services - slategray
+          [
+            "in",
+            ["get", "subclass"],
+            ["literal", [...POI_CATEGORIES.SLATEGRAY]],
+          ],
+          style.pois.slategray,
+          // Shopping - blue
+          ["in", ["get", "subclass"], ["literal", [...POI_CATEGORIES.BLUE]]],
+          style.pois.blue,
+          // Food & Drink - tangerine
+          [
+            "in",
+            ["get", "subclass"],
+            ["literal", [...POI_CATEGORIES.TANGERINE]],
+          ],
+          style.pois.tangerine,
+          // Tourism/Culture - pink
+          ["in", ["get", "subclass"], ["literal", [...POI_CATEGORIES.PINK]]],
+          style.pois.pink,
+          // Default
+          style.earth,
+        ],
+        "text-halo-color": style.earth,
+        "text-halo-width": 1,
+      },
+    },
+  ];
+}