@geogdev/styles 0.1.0

package/src/config/styles/light.json

@@ -0,0 +1,129 @@
+{
+  "background": "#f8f9f7",
+  "earth": "#e9e9e6",
+  "park_a": "#b8d9b8",
+  "park_b": "#a8d4a8",
+  "hospital": "#e4dad9",
+  "industrial": "#d1dde1",
+  "school": "#e4ded7",
+  "wood_a": "#b0d0b0",
+  "wood_b": "#a0c8a0",
+  "pedestrian": "#d8ead8",
+  "scrub_a": "#c0dcc0",
+  "scrub_b": "#b0d4b0",
+  "glacier": "#f0f8ff",
+  "sand": "#f5e8d0",
+  "beach": "#f0e4c8",
+  "aerodrome": "#dadbdf",
+  "runway": "#e0e0e0",
+  "water": "#88c5e0",
+  "zoo": "#b8d9b8",
+  "military": "#dcdcdc",
+
+  "tunnel_other_casing": "#e5e5e2",
+  "tunnel_minor_casing": "#e5e5e2",
+  "tunnel_link_casing": "#e0e0dd",
+  "tunnel_major_casing": "#dcdcd9",
+  "tunnel_highway_casing": "#d8d8d5",
+  "tunnel_other": "#d0d0d0",
+  "tunnel_minor": "#c8c8c8",
+  "tunnel_link": "#c0c0c0",
+  "tunnel_major": "#b8b8b8",
+  "tunnel_highway": "#b0b0b0",
+
+  "pier": "#d0d0d0",
+  "buildings": "#c0bcb8",
+
+  "minor_service_casing": "#e5e5e2",
+  "minor_casing": "#e5e5e2",
+  "link_casing": "#e0e0dd",
+  "major_casing_late": "#dcdcd9",
+  "highway_casing_late": "#d8d8d5",
+  "other": "#d0d0d0",
+  "minor_service": "#c8c8c8",
+  "minor_a": "#c8c8c8",
+  "minor_b": "#c8c8c8",
+  "link": "#c0c0c0",
+  "major_casing_early": "#dcdcd9",
+  "major": "#b8b8b8",
+  "highway_casing_early": "#d8d8d5",
+  "highway": "#b0b0b0",
+
+  "railway": "#d5d5d5",
+  "boundaries": "#d4b8bc",
+
+  "bridges_other_casing": "#e5e5e2",
+  "bridges_minor_casing": "#e5e5e2",
+  "bridges_link_casing": "#e0e0dd",
+  "bridges_major_casing": "#dcdcd9",
+  "bridges_highway_casing": "#d8d8d5",
+  "bridges_other": "#d0d0d0",
+  "bridges_minor": "#c8c8c8",
+  "bridges_link": "#c0c0c0",
+  "bridges_major": "#b8b8b8",
+  "bridges_highway": "#b0b0b0",
+
+  "roads_label_minor": "#8a9299",
+  "roads_label_minor_halo": "#ffffff",
+  "roads_label_major": "#5a6570",
+  "roads_label_major_halo": "#ffffff",
+  "ocean_label": "#7a8a92",
+  "subplace_label": "#8a9299",
+  "subplace_label_halo": "#ffffff",
+  "city_label": "#5a6570",
+  "city_label_halo": "#ffffff",
+  "state_label": "#8a9299",
+  "state_label_halo": "#ffffff",
+  "country_label": "#5a6570",
+
+  "address_label": "#8a9299",
+  "address_label_halo": "#ffffff",
+
+  "pois": {
+    "blue": "#3498db",
+    "green": "#27ae60",
+    "lapis": "#9b59b6",
+    "pink": "#d63384",
+    "red": "#e74c3c",
+    "slategray": "#5a6570",
+    "tangerine": "#e76f51",
+    "turquoise": "#2a9d8f"
+  },
+
+  "landcover": {
+    "grassland": "#c8e0c8",
+    "barren": "#f5ddb8",
+    "urban_area": "#e9e9e6",
+    "farmland": "#d0e8d0",
+    "glacier": "#f0f8ff",
+    "scrub": "#c0dcc0",
+    "forest": "#a8d0a8",
+    "rock": "#d0ccc8",
+    "wetland": "#b8d8d0"
+  },
+
+  "transit_rail": "#888888",
+  "transit_freight": "#666666",
+  "transit_bus": "#cc7700",
+  "transit_heritage": "#9999bb",
+
+  "shields": {
+    "interstate_fill": "#5a7090",
+    "interstate_stroke": "#907070",
+    "interstate_text": "#f0f0ee",
+    "us_highway_fill": "#f0f0ee",
+    "us_highway_stroke": "#808080",
+    "us_highway_text": "#505050",
+    "state_fill": "#f0f0ee",
+    "state_stroke": "#808080",
+    "state_text": "#505050",
+    "county_fill": "#d8d8a0",
+    "county_stroke": "#808080",
+    "county_text": "#505050",
+    "default_fill": "#f0f0ee",
+    "default_stroke": "#808080",
+    "default_text": "#505050",
+    "banner_text": "#505050",
+    "banner_text_halo": "#f0f0ee"
+  }
+}

package/src/config/styles/warm.json

@@ -0,0 +1,129 @@
+{
+  "background": "#f8f4f0",
+  "earth": "#e9e4df",
+  "park_a": "#c8e6c9",
+  "park_b": "#c8e6c9",
+  "hospital": "#f0e8e8",
+  "industrial": "#e0e0e0",
+  "school": "#e4ded7",
+  "wood_a": "#b8d4a8",
+  "wood_b": "#b8d4a8",
+  "pedestrian": "#e8e8e8",
+  "scrub_a": "#c8d9a8",
+  "scrub_b": "#c8d9a8",
+  "glacier": "#f0f8ff",
+  "sand": "#f4e4c8",
+  "beach": "#f4e4c8",
+  "aerodrome": "#dadbdf",
+  "runway": "#d0ccc8",
+  "water": "#a8d5f2",
+  "zoo": "#c8e6c9",
+  "military": "#dcdcdc",
+
+  "tunnel_other_casing": "#e5e5e2",
+  "tunnel_minor_casing": "#e5e5e2",
+  "tunnel_link_casing": "#e0e0dd",
+  "tunnel_major_casing": "#dcdcd9",
+  "tunnel_highway_casing": "#d8d8d5",
+  "tunnel_other": "#cccccc",
+  "tunnel_minor": "#ffffff",
+  "tunnel_link": "#ffa94d",
+  "tunnel_major": "#ffa94d",
+  "tunnel_highway": "#ff6b6b",
+
+  "pier": "#d0d0d0",
+  "buildings": "#d0d0d0",
+
+  "minor_service_casing": "#e5e5e2",
+  "minor_casing": "#e5e5e2",
+  "link_casing": "#e0e0dd",
+  "major_casing_late": "#dcdcd9",
+  "highway_casing_late": "#d8d8d5",
+  "other": "#888888",
+  "minor_service": "#ffffff",
+  "minor_a": "#ffffff",
+  "minor_b": "#ffffff",
+  "link": "#ffa94d",
+  "major_casing_early": "#dcdcd9",
+  "major": "#ffa94d",
+  "highway_casing_early": "#d8d8d5",
+  "highway": "#ff6b6b",
+
+  "railway": "#d5d5d5",
+  "boundaries": "#d4b8bc",
+
+  "bridges_other_casing": "#e5e5e2",
+  "bridges_minor_casing": "#e5e5e2",
+  "bridges_link_casing": "#e0e0dd",
+  "bridges_major_casing": "#dcdcd9",
+  "bridges_highway_casing": "#d8d8d5",
+  "bridges_other": "#cccccc",
+  "bridges_minor": "#ffffff",
+  "bridges_link": "#ffa94d",
+  "bridges_major": "#ffa94d",
+  "bridges_highway": "#ff6b6b",
+
+  "roads_label_minor": "#8a9299",
+  "roads_label_minor_halo": "#ffffff",
+  "roads_label_major": "#5a6570",
+  "roads_label_major_halo": "#ffffff",
+  "ocean_label": "#7a8a92",
+  "subplace_label": "#333333",
+  "subplace_label_halo": "#ffffff",
+  "city_label": "#333333",
+  "city_label_halo": "#ffffff",
+  "state_label": "#8a9299",
+  "state_label_halo": "#ffffff",
+  "country_label": "#5a6570",
+
+  "address_label": "#8a9299",
+  "address_label_halo": "#ffffff",
+
+  "pois": {
+    "blue": "#5a7a9a",
+    "green": "#6b8e23",
+    "lapis": "#8b668b",
+    "pink": "#cd5c5c",
+    "red": "#b22222",
+    "slategray": "#7a6a5a",
+    "tangerine": "#d2691e",
+    "turquoise": "#5f9ea0"
+  },
+
+  "landcover": {
+    "grassland": "#d4e7b8",
+    "barren": "#f4e4c8",
+    "urban_area": "#e9e4df",
+    "farmland": "#d4e7b8",
+    "glacier": "#f0f8ff",
+    "scrub": "#c8d9a8",
+    "forest": "#b8d4a8",
+    "rock": "#d8d0c8",
+    "wetland": "#c0e0d8"
+  },
+
+  "transit_rail": "#888888",
+  "transit_freight": "#666666",
+  "transit_bus": "#cc7700",
+  "transit_heritage": "#9999bb",
+
+  "shields": {
+    "interstate_fill": "#4a7090",
+    "interstate_stroke": "#e07050",
+    "interstate_text": "#fff8f0",
+    "us_highway_fill": "#fff8f0",
+    "us_highway_stroke": "#c06030",
+    "us_highway_text": "#5a3020",
+    "state_fill": "#fff8f0",
+    "state_stroke": "#c06030",
+    "state_text": "#5a3020",
+    "county_fill": "#ffd060",
+    "county_stroke": "#a05020",
+    "county_text": "#5a3020",
+    "default_fill": "#fff8f0",
+    "default_stroke": "#c06030",
+    "default_text": "#5a3020",
+    "banner_text": "#5a3020",
+    "banner_text_halo": "#fff8f0"
+  }
+}

package/src/config/zoom.json

@@ -0,0 +1,40 @@
+{
+  "LANDCOVER_FADE_START": 5,
+  "LANDCOVER_FADE_END": 7,
+  "LANDCOVER_GREEN_START": 5,
+  "LANDCOVER_GREEN_END": 8,
+
+  "PARK_FADE_START": 5,
+  "PARK_FADE_END": 8,
+  "LANDUSE_FADE_START": 6,
+  "LANDUSE_FADE_END": 11,
+
+  "AEROWAY_MIN": 11,
+
+  "WATERWAY_STREAM_MIN": 14,
+  "WATERWAY_RIVER_MIN": 9,
+
+  "ROADS_MINOR_SERVICE_MIN": 16,
+  "ROADS_LINK_MIN": 13,
+  "ROADS_MAJOR_CASING_LATE_MIN": 12,
+  "ROADS_MAJOR_CASING_EARLY_MAX": 12,
+  "ROADS_HIGHWAY_CASING_LATE_MIN": 12,
+  "ROADS_HIGHWAY_CASING_EARLY_MAX": 12,
+  "ROADS_BRIDGES_MIN": 12,
+
+  "TRANSIT_PASSENGER_RAIL_MIN": 10,
+  "TRANSIT_FREIGHT_RAIL_MIN": 11,
+  "TRANSIT_URBAN_RAIL_MIN": 11,
+  "TRANSIT_MIXED_RAIL_MIN": 11,
+  "TRANSIT_HERITAGE_MIN": 13,
+  "TRANSIT_BUS_MIN": 13,
+  "TRANSIT_SERVICE_TRACKS_MIN": 14,
+  "TRANSIT_FERRY_MIN": 4,
+
+  "LABELS_ADDRESS_MIN": 18,
+  "LABELS_WATERWAY_MIN": 13,
+  "LABELS_ROADS_ONEWAY_MIN": 16,
+  "LABELS_ROADS_MINOR_MIN": 15,
+  "LABELS_ROADS_MAJOR_MIN": 11,
+  "LABELS_POI_MIN": 10
+}

package/src/constants.ts

@@ -0,0 +1,243 @@
+import type { ExpressionSpecification } from "@maplibre/maplibre-gl-style-spec";
+import featuresConfig from "./config/features.json";
+import poiConfig from "./config/poi.json";
+import zoomConfig from "./config/zoom.json";
+
+// ============================================
+// ZOOM LEVEL CONSTANTS (from JSON config)
+// ============================================
+
+export const ZOOM = zoomConfig;
+
+// ============================================
+// ROAD CLASS CONSTANTS (from JSON config)
+// ============================================
+
+export const ROAD_CLASSES = featuresConfig.roadClasses;
+
+// ============================================
+// POI TIER CONSTANTS (from JSON config)
+// For progressive disclosure based on zoom level
+// ============================================
+
+export const POI_TIERS = poiConfig.tiers;
+
+// ============================================
+// POI COLOR CATEGORIES (from JSON config)
+// For matching subclasses to colors
+// ============================================
+
+export const POI_CATEGORIES = poiConfig.categories;
+
+// ============================================
+// COMMON FILTER PATTERNS
+// ============================================
+
+export const FILTERS = {
+  // Brunnel (bridge/tunnel) filters
+  IS_TUNNEL: ["==", ["get", "brunnel"], "tunnel"] as ExpressionSpecification,
+  IS_BRIDGE: ["==", ["get", "brunnel"], "bridge"] as ExpressionSpecification,
+  NOT_BRUNNEL: ["!", ["has", "brunnel"]] as ExpressionSpecification,
+
+  // Ramp (link roads) filter
+  IS_RAMP: ["==", ["get", "ramp"], 1] as ExpressionSpecification,
+  NOT_RAMP: ["!=", ["get", "ramp"], 1] as ExpressionSpecification,
+
+  // Geometry type filters
+  IS_POLYGON: ["==", "$type", "Polygon"] as ExpressionSpecification,
+  IS_LINESTRING: [
+    "==",
+    ["geometry-type"],
+    "LineString",
+  ] as ExpressionSpecification,
+  IS_POINT: ["==", ["geometry-type"], "Point"] as ExpressionSpecification,
+} as const;
+
+// ============================================
+// LINE WIDTH INTERPOLATIONS
+// Common patterns for road widths
+// ============================================
+
+export const LINE_WIDTHS = {
+  // Other/path roads
+  OTHER: [
+    "interpolate",
+    ["exponential", 1.6],
+    ["zoom"],
+    14,
+    0,
+    20,
+    7,
+  ] as ExpressionSpecification,
+
+  // Minor roads
+  MINOR: [
+    "interpolate",
+    ["exponential", 1.6],
+    ["zoom"],
+    11,
+    0,
+    12.5,
+    0.5,
+    15,
+    2,
+    18,
+    11,
+  ] as ExpressionSpecification,
+
+  // Link roads
+  LINK: [
+    "interpolate",
+    ["exponential", 1.6],
+    ["zoom"],
+    13,
+    0,
+    13.5,
+    1,
+    18,
+    11,
+  ] as ExpressionSpecification,
+
+  // Major roads
+  MAJOR: [
+    "interpolate",
+    ["exponential", 1.6],
+    ["zoom"],
+    6,
+    0,
+    12,
+    1.6,
+    15,
+    3,
+    18,
+    13,
+  ] as ExpressionSpecification,
+
+  // Highway
+  HIGHWAY: [
+    "interpolate",
+    ["exponential", 1.6],
+    ["zoom"],
+    3,
+    0,
+    6,
+    1.1,
+    12,
+    1.6,
+    15,
+    5,
+    18,
+    15,
+  ] as ExpressionSpecification,
+
+  // Minor casing gap
+  MINOR_CASING_GAP: [
+    "interpolate",
+    ["exponential", 1.6],
+    ["zoom"],
+    11,
+    0,
+    12.5,
+    0.5,
+    15,
+    2,
+    18,
+    11,
+  ] as ExpressionSpecification,
+
+  // Link casing gap
+  LINK_CASING_GAP: [
+    "interpolate",
+    ["exponential", 1.6],
+    ["zoom"],
+    13,
+    0,
+    13.5,
+    1,
+    18,
+    11,
+  ] as ExpressionSpecification,
+
+  // Major casing gap
+  MAJOR_CASING_GAP: [
+    "interpolate",
+    ["exponential", 1.6],
+    ["zoom"],
+    7,
+    0,
+    7.5,
+    0.5,
+    18,
+    13,
+  ] as ExpressionSpecification,
+
+  // Highway casing gap
+  HIGHWAY_CASING_GAP: [
+    "interpolate",
+    ["exponential", 1.6],
+    ["zoom"],
+    3,
+    0,
+    3.5,
+    0.5,
+    18,
+    15,
+  ] as ExpressionSpecification,
+
+  // Casing width (thin outline)
+  CASING_THIN: [
+    "interpolate",
+    ["exponential", 1.6],
+    ["zoom"],
+    12,
+    0,
+    12.5,
+    1,
+  ] as ExpressionSpecification,
+
+  CASING_MEDIUM: [
+    "interpolate",
+    ["exponential", 1.6],
+    ["zoom"],
+    9,
+    0,
+    9.5,
+    1,
+  ] as ExpressionSpecification,
+
+  CASING_THICK: [
+    "interpolate",
+    ["exponential", 1.6],
+    ["zoom"],
+    7,
+    0,
+    7.5,
+    1,
+    20,
+    15,
+  ] as ExpressionSpecification,
+} as const;
+
+// ============================================
+// LANDCOVER SUBCLASSES (from JSON config)
+// ============================================
+
+export const LANDCOVER_SUBCLASSES = featuresConfig.landcoverSubclasses;
+
+// ============================================
+// LANDUSE CLASSES (from JSON config)
+// ============================================
+
+export const LANDUSE_CLASSES = featuresConfig.landuseClasses;
+
+// ============================================
+// PLACE CLASSES (from JSON config)
+// ============================================
+
+export const PLACE_CLASSES = featuresConfig.placeClasses;
+
+// ============================================
+// WATER CLASSES (from JSON config)
+// ============================================
+
+export const WATER_CLASSES = featuresConfig.waterClasses;

package/src/generateStyle.ts

@@ -0,0 +1,70 @@
+import fs from "node:fs";
+import path from "node:path";
+import type { StyleSpecification } from "@maplibre/maplibre-gl-style-spec";
+import {
+  type Style,
+  type StyleName,
+  isValidStyleName,
+  layers,
+  namedStyle,
+} from "./index";
+
+const DEFAULT_ASSETS_URL = "https://assets-dev.geog.dev";
+
+export interface GenerateStyleOptions {
+  assetsUrl?: string;
+}
+
+export async function generateStyle(
+  args: string[],
+  options?: GenerateStyleOptions,
+) {
+  if (args.length < 2) {
+    throw new TypeError(
+      "usage: generate-style OUTPUT TILEJSON_URL [STYLE.js|STYLE.ts|STYLE.json|STYLE_NAME] LANG",
+    );
+  }
+
+  const assetsUrl = (options?.assetsUrl ?? DEFAULT_ASSETS_URL).replace(
+    /\/$/,
+    "",
+  );
+  const tileJson = args[0];
+  const styleArg = args[1];
+  let spriteValue: StyleName | undefined;
+
+  let styleObj: Style;
+  if (styleArg.endsWith(".json")) {
+    styleObj = JSON.parse(fs.readFileSync(styleArg, "utf-8"));
+  } else if (styleArg.endsWith(".js") || styleArg.endsWith(".ts")) {
+    styleObj = (await import(path.resolve(styleArg))).default;
+  } else {
+    // Map each style to its corresponding sprite set
+    if (isValidStyleName(styleArg)) {
+      spriteValue = styleArg;
+    }
+    styleObj = namedStyle(styleArg);
+  }
+
+  const lang = args[2];
+
+  const style: StyleSpecification = {
+    version: 8,
+    sources: {
+      geog: {
+        type: "vector",
+        attribution:
+          '<a href="https://github.com/geogdev/tiles">Geog</a> © <a href="https://osm.org/copyright">OpenStreetMap</a>',
+        url: tileJson,
+      },
+    },
+    layers: layers("geog", styleObj, { lang: lang }),
+    glyphs: `${assetsUrl}/fonts/{fontstack}/{range}.pbf`,
+  };
+
+  if (spriteValue) {
+    style.sprite = `${assetsUrl}/sprites/v0/${spriteValue}`;
+  }
+
+  return JSON.stringify(style, null, 2);
+}

package/src/index.ts

@@ -0,0 +1,76 @@
+import type { LayerSpecification } from "@maplibre/maplibre-gl-style-spec";
+import {
+  LANGUAGE_SCRIPT_PAIRS,
+  getCountryName,
+  getMultilineName,
+} from "./language";
+import { labelsLayers, nolabelsLayers } from "./layers";
+import {
+  DARK,
+  GRAY,
+  LIGHT,
+  type Landcover,
+  type Pois,
+  STYLE_NAMES,
+  type Shields,
+  type Style,
+  type StyleName,
+  WARM,
+  isValidStyleName,
+} from "./styles";
+
+// Re-export language utilities
+export { LANGUAGE_SCRIPT_PAIRS, getMultilineName, getCountryName };
+
+// Re-export style types and constants
+export type { Landcover, Pois, Shields, Style, StyleName };
+export { LIGHT, DARK, GRAY, WARM, STYLE_NAMES, isValidStyleName };
+
+// Re-export layer factories for advanced usage
+export { labelsLayers, nolabelsLayers } from "./layers";
+export * from "./layers";
+
+/**
+ * Returns a named style by string identifier
+ * @throws Error if style name is not found
+ */
+export function namedStyle(name: string): Style {
+  if (isValidStyleName(name)) {
+    switch (name) {
+      case "light":
+        return LIGHT;
+      case "dark":
+        return DARK;
+      case "gray":
+        return GRAY;
+      case "warm":
+        return WARM;
+    }
+  }
+  throw new Error(
+    `Style not found: ${name}. Valid styles are: ${STYLE_NAMES.join(", ")}`,
+  );
+}
+
+/**
+ * Generates all MapLibre GL layers for a given style
+ * @param source - The source ID to use for layers
+ * @param style - The style theme to apply
+ * @param options - Optional configuration
+ * @param options.labelsOnly - If true, only generate label layers
+ * @param options.lang - Language code for labels (required for label layers)
+ */
+export function layers(
+  source: string,
+  style: Style,
+  options?: { labelsOnly?: boolean; lang?: string },
+): LayerSpecification[] {
+  let result: LayerSpecification[] = [];
+  if (!options?.labelsOnly) {
+    result = nolabelsLayers(source, style);
+  }
+  if (options?.lang) {
+    result = result.concat(labelsLayers(source, style, options.lang));
+  }
+  return result;
+}