feat: implement modularized map layer styles for various geographic types and update map engine integration

src/uhm/components/map/mapUtils.ts

@@ -9,6 +9,7 @@ import {
     RASTER_BASE_INSERT_BEFORE_LAYER_ID,
     RASTER_BASE_LAYER_ID,
     RASTER_BASE_SOURCE_ID,
+    PATH_ARROW_SOURCE_ID
 } from "@/uhm/lib/map/constants";
 import { PATH_RENDER_BY_TYPE } from "@/uhm/lib/map/styles/style";
 import { getRasterTileTemplateUrl } from "@/uhm/api/tiles";
@@ -87,16 +88,13 @@ export function createRasterBaseLayer() {
 }
 
 export function getSelectableLayers(map: maplibregl.Map): string[] {
-    return [
+    const selectableSources = ["countries", "places", PATH_ARROW_SOURCE_ID];
-        "countries-fill",
+    const style = map.getStyle();
-        "countries-line",
+    if (!style || !style.layers) return [];
-        "routes-line",
+    
-        "routes-path-arrow-fill",
+    return style.layers
-        "routes-path-arrow-line",
+        .filter((layer) => "source" in layer && selectableSources.includes(layer.source as string))
-        "routes-path-hit",
+        .map((layer) => layer.id);
-        "places-circle",
-        "places-symbol",
-    ].filter((layerId) => Boolean(map.getLayer(layerId)));
 }
 
 export function filterDraftByBinding(

src/uhm/components/map/useMapLayers.ts

@@ -11,6 +11,7 @@ import {
 } from "@/uhm/lib/map/styles/style";
 import { EMPTY_FEATURE_COLLECTION } from "@/uhm/lib/map/geo/constants";
 import { PATH_ARROW_ICON_ID, PATH_ARROW_SOURCE_ID } from "@/uhm/lib/map/constants";
+import { getAllGeotypeLayers } from "@/uhm/lib/map/styles/geotypes";
 import {
     addPointSymbolLayer,
     applyBackgroundLayerVisibility,
@@ -319,153 +320,18 @@ export function setupMapLayers(
         promoteId: "id",
     });
 
-    map.addLayer({
-        id: "countries-fill",
-        type: "fill",
-        source: "countries",
-        filter: ["==", ["geometry-type"], "Polygon"],
-        paint: {
-            "fill-color": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                "#22c55e",
-                [
-                    "==",
-                    ["coalesce", ["get", "entity_id"], ""],
-                    "",
-                ],
-                "#ef4444",
-                buildTypeMatchExpression(POLYGON_FILL_BY_TYPE, "#f59e0b"),
-            ],
-            "fill-opacity": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                0.6,
-                buildTypeMatchExpression(POLYGON_OPACITY_BY_TYPE, 0.5),
-            ],
-        },
-    });
-
-    map.addLayer({
-        id: "countries-line",
-        type: "line",
-        source: "countries",
-        filter: ["==", ["geometry-type"], "Polygon"],
-        paint: {
-            "line-color": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                "#14532d",
-                buildTypeMatchExpression(POLYGON_STROKE_BY_TYPE, "#fbbf24"),
-            ],
-            "line-width": 2,
-        },
-    });
-
-    map.addLayer({
-        id: "routes-line",
-        type: "line",
-        source: "countries",
-        filter: [
-            "all",
-            ["==", ["geometry-type"], "LineString"],
-            ["!=", buildTypeMatchExpression(PATH_RENDER_BY_TYPE, false), true],
-        ],
-        paint: {
-            "line-color": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                "#22c55e",
-                ["==", ["coalesce", ["get", "entity_id"], ""], ""],
-                "#ef4444",
-                buildTypeMatchExpression(LINE_COLOR_BY_TYPE, "#38bdf8"),
-            ],
-            "line-width": [
-                "interpolate",
-                ["linear"],
-                ["zoom"],
-                1, 2.2,
-                4, 3.2,
-                6, 4.2,
-            ],
-            "line-opacity": 0.9,
-        },
-    });
-
-    map.addLayer({
-        id: "routes-path-arrow-fill",
-        type: "fill",
-        source: PATH_ARROW_SOURCE_ID,
-        paint: {
-            "fill-color": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                "#22c55e",
-                ["==", ["coalesce", ["get", "entity_id"], ""], ""],
-                "#ef4444",
-                buildTypeMatchExpression(LINE_COLOR_BY_TYPE, "#38bdf8"),
-            ],
-            "fill-opacity": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                0.92,
-                0.82,
-            ],
-        },
-    });
-
-    map.addLayer({
-        id: "routes-path-arrow-line",
-        type: "line",
-        source: PATH_ARROW_SOURCE_ID,
-        paint: {
-            "line-color": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                "#14532d",
-                "#0f172a",
-            ],
-            "line-width": [
-                "interpolate",
-                ["linear"],
-                ["zoom"],
-                1, 0.45,
-                4, 0.8,
-                6, 1.2,
-            ],
-            "line-opacity": 0.9,
-        },
-    });
-
-    map.addLayer({
-        id: "routes-path-hit",
-        type: "line",
-        source: "countries",
-        filter: [
-            "all",
-            ["==", ["geometry-type"], "LineString"],
-            buildTypeMatchExpression(PATH_RENDER_BY_TYPE, false),
-        ],
-        paint: {
-            "line-color": "#ffffff",
-            "line-width": [
-                "interpolate",
-                ["linear"],
-                ["zoom"],
-                1, 12,
-                4, 18,
-                6, 24,
-            ],
-            "line-opacity": 0,
-        },
-    });
-
     map.addSource("places", {
         type: "geojson",
         data: { type: "FeatureCollection", features: [] },
         promoteId: "id",
     });
 
+    
+    const geotypeLayers = getAllGeotypeLayers("countries", PATH_ARROW_SOURCE_ID, "places");
+    for (const layer of geotypeLayers) {
+        map.addLayer(layer);
+    }
+
     // editing overlays
     map.addSource("edit-shape", {
         type: "geojson",
@@ -498,62 +364,6 @@ export function setupMapLayers(
         },
     });
 
-    map.addLayer({
-        id: "places-circle",
-        type: "circle",
-        source: "places",
-        paint: {
-            "circle-color": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                "#22c55e",
-                "#ef4444",
-            ],
-            "circle-radius": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                8,
-                4,
-            ],
-            "circle-stroke-color": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                "#14532d",
-                "#ffffff",
-            ],
-            "circle-stroke-width": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                3,
-                1,
-            ],
-            "circle-opacity": 0.9,
-        },
-    });
-
-    map.addLayer({
-        id: "places-selected-halo",
-        type: "circle",
-        source: "places",
-        paint: {
-            "circle-color": "#22c55e",
-            "circle-radius": 13,
-            "circle-opacity": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                0.28,
-                0,
-            ],
-            "circle-stroke-color": "#14532d",
-            "circle-stroke-width": [
-                "case",
-                ["boolean", ["feature-state", "selected"], false],
-                2,
-                0,
-            ],
-        },
-    });
-
     map.addSource("entity-focus", {
         type: "geojson",
         data: EMPTY_FEATURE_COLLECTION,

src/uhm/lib/map/engines/selectingEngine.ts

@@ -9,16 +9,7 @@ export function initSelect(
     onEdit?: (feature: maplibregl.MapGeoJSONFeature) => void,
     onSelectIds?: (ids: (string | number)[]) => void
 ) {
-    const SELECTABLE_LAYERS = [
+
-        "countries-fill",
-        "countries-line",
-        "routes-line",
-        "routes-path-arrow-fill",
-        "routes-path-arrow-line",
-        "routes-path-hit",
-        "places-circle",
-        "places-symbol",
-    ] as const;
     const FEATURE_STATE_SOURCES = [
         "countries",
         "places",
@@ -129,7 +120,11 @@ export function initSelect(
     }
 
     function getSelectableLayers(): string[] {
-        return SELECTABLE_LAYERS.filter((layerId) => Boolean(map.getLayer(layerId)));
+        const style = map.getStyle();
+        if (!style || !style.layers) return [];
+        return style.layers
+            .filter((layer) => "source" in layer && FEATURE_STATE_SOURCES.includes(layer.source as any))
+            .map((layer) => layer.id);
     }
 
     function setSelectionStateForId(id: string | number, selected: boolean) {

src/uhm/lib/map/styles/geotypes/attack_route.ts

@@ -0,0 +1,68 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getAttackRouteLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "attack_route-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "attack_route"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#ef4444"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 2.2, 4, 3.2, 6, 4.2],
+            "line-opacity": 0.9
+        }
+    },
+        {
+        id: "attack_route-hit",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "attack_route"]],
+        paint: {
+            "line-color": "#ffffff",
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 12, 4, 18, 6, 24],
+            "line-opacity": 0
+        }
+    },
+        {
+        id: "attack_route-path-arrow-fill",
+        type: "fill",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "attack_route"],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#ef4444"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.92,
+                0.82
+            ]
+        }
+    },
+        {
+        id: "attack_route-path-arrow-line",
+        type: "line",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "attack_route"],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#0f172a"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 0.45, 4, 0.8, 6, 1.2],
+            "line-opacity": 0.9
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/battle.ts

@@ -0,0 +1,40 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getBattleLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "battle-fill",
+        type: "fill",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "battle"]],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#f43f5e"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.6,
+                0.34
+            ]
+        }
+    },
+        {
+        id: "battle-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "battle"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#9f1239"
+            ],
+            "line-width": 2
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/bridge.ts

@@ -0,0 +1,53 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getBridgeLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "bridge-circle",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "bridge"]],
+        paint: {
+            "circle-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                "#ef4444"
+            ],
+            "circle-radius": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 8, 4
+            ],
+            "circle-stroke-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#ffffff"
+            ],
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 3, 1
+            ],
+            "circle-opacity": 0.9
+        }
+    },
+        {
+        id: "bridge-selected-halo",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "bridge"]],
+        paint: {
+            "circle-color": "#22c55e",
+            "circle-radius": 13,
+            "circle-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.28, 0
+            ],
+            "circle-stroke-color": "#14532d",
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 2, 0
+            ]
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/capital.ts

@@ -0,0 +1,53 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getCapitalLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "capital-circle",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "capital"]],
+        paint: {
+            "circle-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                "#ef4444"
+            ],
+            "circle-radius": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 8, 4
+            ],
+            "circle-stroke-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#ffffff"
+            ],
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 3, 1
+            ],
+            "circle-opacity": 0.9
+        }
+    },
+        {
+        id: "capital-selected-halo",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "capital"]],
+        paint: {
+            "circle-color": "#22c55e",
+            "circle-radius": 13,
+            "circle-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.28, 0
+            ],
+            "circle-stroke-color": "#14532d",
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 2, 0
+            ]
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/castle.ts

@@ -0,0 +1,53 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getCastleLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "castle-circle",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "castle"]],
+        paint: {
+            "circle-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                "#ef4444"
+            ],
+            "circle-radius": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 8, 4
+            ],
+            "circle-stroke-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#ffffff"
+            ],
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 3, 1
+            ],
+            "circle-opacity": 0.9
+        }
+    },
+        {
+        id: "castle-selected-halo",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "castle"]],
+        paint: {
+            "circle-color": "#22c55e",
+            "circle-radius": 13,
+            "circle-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.28, 0
+            ],
+            "circle-stroke-color": "#14532d",
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 2, 0
+            ]
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/city.ts

@@ -0,0 +1,53 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getCityLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "city-circle",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "city"]],
+        paint: {
+            "circle-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                "#ef4444"
+            ],
+            "circle-radius": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 8, 4
+            ],
+            "circle-stroke-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#ffffff"
+            ],
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 3, 1
+            ],
+            "circle-opacity": 0.9
+        }
+    },
+        {
+        id: "city-selected-halo",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "city"]],
+        paint: {
+            "circle-color": "#22c55e",
+            "circle-radius": 13,
+            "circle-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.28, 0
+            ],
+            "circle-stroke-color": "#14532d",
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 2, 0
+            ]
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/civilization.ts

@@ -0,0 +1,40 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getCivilizationLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "civilization-fill",
+        type: "fill",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "civilization"]],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#14b8a6"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.6,
+                0.38
+            ]
+        }
+    },
+        {
+        id: "civilization-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "civilization"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#134e4a"
+            ],
+            "line-width": 2
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/country.ts

@@ -0,0 +1,40 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getCountryLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "country-fill",
+        type: "fill",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "country"]],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#2563eb"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.6,
+                0.5
+            ]
+        }
+    },
+        {
+        id: "country-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "country"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#1e3a8a"
+            ],
+            "line-width": 2
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/defense_line.ts

@@ -0,0 +1,35 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getDefenseLineLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "defense_line-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "defense_line"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#f97316"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 2.2, 4, 3.2, 6, 4.2],
+            "line-dasharray": [3, 2],
+            "line-opacity": 0.9
+        }
+    },
+        {
+        id: "defense_line-hit",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "defense_line"]],
+        paint: {
+            "line-color": "#ffffff",
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 12, 4, 18, 6, 24],
+            "line-opacity": 0
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/empire.ts

@@ -0,0 +1,40 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getEmpireLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "empire-fill",
+        type: "fill",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "empire"]],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#f59e0b"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.6,
+                0.5
+            ]
+        }
+    },
+        {
+        id: "empire-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "empire"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#7c2d12"
+            ],
+            "line-width": 2
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/fortress.ts

@@ -0,0 +1,53 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getFortressLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "fortress-circle",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "fortress"]],
+        paint: {
+            "circle-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                "#ef4444"
+            ],
+            "circle-radius": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 8, 4
+            ],
+            "circle-stroke-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#ffffff"
+            ],
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 3, 1
+            ],
+            "circle-opacity": 0.9
+        }
+    },
+        {
+        id: "fortress-selected-halo",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "fortress"]],
+        paint: {
+            "circle-color": "#22c55e",
+            "circle-radius": 13,
+            "circle-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.28, 0
+            ],
+            "circle-stroke-color": "#14532d",
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 2, 0
+            ]
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/index.ts

@@ -0,0 +1,64 @@
+import maplibregl from "maplibre-gl";
+export const TYPE_MATCH_EXPR: maplibregl.ExpressionSpecification = ["coalesce", ["get", "type"], ["get", "entity_type_id"], ""];
+
+import { getDefenseLineLayers } from "./defense_line";
+import { getAttackRouteLayers } from "./attack_route";
+import { getRetreatRouteLayers } from "./retreat_route";
+import { getInvasionRouteLayers } from "./invasion_route";
+import { getMigrationRouteLayers } from "./migration_route";
+import { getRefugeeRouteLayers } from "./refugee_route";
+import { getTradeRouteLayers } from "./trade_route";
+import { getShippingRouteLayers } from "./shipping_route";
+import { getCountryLayers } from "./country";
+import { getStateLayers } from "./state";
+import { getEmpireLayers } from "./empire";
+import { getKingdomLayers } from "./kingdom";
+import { getWarLayers } from "./war";
+import { getBattleLayers } from "./battle";
+import { getCivilizationLayers } from "./civilization";
+import { getRebellionZoneLayers } from "./rebellion_zone";
+import { getPersonDeathplaceLayers } from "./person_deathplace";
+import { getPersonBirthplaceLayers } from "./person_birthplace";
+import { getPersonActivityLayers } from "./person_activity";
+import { getTempleLayers } from "./temple";
+import { getCapitalLayers } from "./capital";
+import { getCityLayers } from "./city";
+import { getFortressLayers } from "./fortress";
+import { getCastleLayers } from "./castle";
+import { getRuinLayers } from "./ruin";
+import { getPortLayers } from "./port";
+import { getBridgeLayers } from "./bridge";
+
+import { LayerSpecification } from "maplibre-gl";
+
+export function getAllGeotypeLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        ...getDefenseLineLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getAttackRouteLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getRetreatRouteLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getInvasionRouteLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getMigrationRouteLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getRefugeeRouteLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getTradeRouteLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getShippingRouteLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getCountryLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getStateLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getEmpireLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getKingdomLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getWarLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getBattleLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getCivilizationLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getRebellionZoneLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getPersonDeathplaceLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getPersonBirthplaceLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getPersonActivityLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getTempleLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getCapitalLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getCityLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getFortressLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getCastleLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getRuinLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getPortLayers(sourceId, pathArrowSourceId, pointSourceId),
+        ...getBridgeLayers(sourceId, pathArrowSourceId, pointSourceId)
+    ];
+}

src/uhm/lib/map/styles/geotypes/invasion_route.ts

@@ -0,0 +1,68 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getInvasionRouteLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "invasion_route-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "invasion_route"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#b91c1c"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 2.2, 4, 3.2, 6, 4.2],
+            "line-opacity": 0.9
+        }
+    },
+        {
+        id: "invasion_route-hit",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "invasion_route"]],
+        paint: {
+            "line-color": "#ffffff",
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 12, 4, 18, 6, 24],
+            "line-opacity": 0
+        }
+    },
+        {
+        id: "invasion_route-path-arrow-fill",
+        type: "fill",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "invasion_route"],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#b91c1c"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.92,
+                0.82
+            ]
+        }
+    },
+        {
+        id: "invasion_route-path-arrow-line",
+        type: "line",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "invasion_route"],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#0f172a"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 0.45, 4, 0.8, 6, 1.2],
+            "line-opacity": 0.9
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/kingdom.ts

@@ -0,0 +1,40 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getKingdomLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "kingdom-fill",
+        type: "fill",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "kingdom"]],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#d97706"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.6,
+                0.5
+            ]
+        }
+    },
+        {
+        id: "kingdom-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "kingdom"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#9a3412"
+            ],
+            "line-width": 2
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/migration_route.ts

@@ -0,0 +1,68 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getMigrationRouteLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "migration_route-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "migration_route"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#0ea5e9"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 2.2, 4, 3.2, 6, 4.2],
+            "line-opacity": 0.9
+        }
+    },
+        {
+        id: "migration_route-hit",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "migration_route"]],
+        paint: {
+            "line-color": "#ffffff",
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 12, 4, 18, 6, 24],
+            "line-opacity": 0
+        }
+    },
+        {
+        id: "migration_route-path-arrow-fill",
+        type: "fill",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "migration_route"],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#0ea5e9"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.92,
+                0.82
+            ]
+        }
+    },
+        {
+        id: "migration_route-path-arrow-line",
+        type: "line",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "migration_route"],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#0f172a"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 0.45, 4, 0.8, 6, 1.2],
+            "line-opacity": 0.9
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/person_activity.ts

@@ -0,0 +1,53 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getPersonActivityLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "person_activity-circle",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "person_activity"]],
+        paint: {
+            "circle-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                "#ef4444"
+            ],
+            "circle-radius": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 8, 4
+            ],
+            "circle-stroke-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#ffffff"
+            ],
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 3, 1
+            ],
+            "circle-opacity": 0.9
+        }
+    },
+        {
+        id: "person_activity-selected-halo",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "person_activity"]],
+        paint: {
+            "circle-color": "#22c55e",
+            "circle-radius": 13,
+            "circle-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.28, 0
+            ],
+            "circle-stroke-color": "#14532d",
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 2, 0
+            ]
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/person_birthplace.ts

@@ -0,0 +1,53 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getPersonBirthplaceLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "person_birthplace-circle",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "person_birthplace"]],
+        paint: {
+            "circle-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                "#ef4444"
+            ],
+            "circle-radius": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 8, 4
+            ],
+            "circle-stroke-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#ffffff"
+            ],
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 3, 1
+            ],
+            "circle-opacity": 0.9
+        }
+    },
+        {
+        id: "person_birthplace-selected-halo",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "person_birthplace"]],
+        paint: {
+            "circle-color": "#22c55e",
+            "circle-radius": 13,
+            "circle-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.28, 0
+            ],
+            "circle-stroke-color": "#14532d",
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 2, 0
+            ]
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/person_deathplace.ts

@@ -0,0 +1,53 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getPersonDeathplaceLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "person_deathplace-circle",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "person_deathplace"]],
+        paint: {
+            "circle-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                "#ef4444"
+            ],
+            "circle-radius": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 8, 4
+            ],
+            "circle-stroke-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#ffffff"
+            ],
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 3, 1
+            ],
+            "circle-opacity": 0.9
+        }
+    },
+        {
+        id: "person_deathplace-selected-halo",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "person_deathplace"]],
+        paint: {
+            "circle-color": "#22c55e",
+            "circle-radius": 13,
+            "circle-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.28, 0
+            ],
+            "circle-stroke-color": "#14532d",
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 2, 0
+            ]
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/port.ts

@@ -0,0 +1,53 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getPortLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "port-circle",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "port"]],
+        paint: {
+            "circle-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                "#ef4444"
+            ],
+            "circle-radius": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 8, 4
+            ],
+            "circle-stroke-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#ffffff"
+            ],
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 3, 1
+            ],
+            "circle-opacity": 0.9
+        }
+    },
+        {
+        id: "port-selected-halo",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "port"]],
+        paint: {
+            "circle-color": "#22c55e",
+            "circle-radius": 13,
+            "circle-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.28, 0
+            ],
+            "circle-stroke-color": "#14532d",
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 2, 0
+            ]
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/rebellion_zone.ts

@@ -0,0 +1,40 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getRebellionZoneLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "rebellion_zone-fill",
+        type: "fill",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "rebellion_zone"]],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#7c3aed"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.6,
+                0.32
+            ]
+        }
+    },
+        {
+        id: "rebellion_zone-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "rebellion_zone"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#4c1d95"
+            ],
+            "line-width": 2
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/refugee_route.ts

@@ -0,0 +1,68 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getRefugeeRouteLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "refugee_route-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "refugee_route"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#06b6d4"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 2.2, 4, 3.2, 6, 4.2],
+            "line-opacity": 0.9
+        }
+    },
+        {
+        id: "refugee_route-hit",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "refugee_route"]],
+        paint: {
+            "line-color": "#ffffff",
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 12, 4, 18, 6, 24],
+            "line-opacity": 0
+        }
+    },
+        {
+        id: "refugee_route-path-arrow-fill",
+        type: "fill",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "refugee_route"],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#06b6d4"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.92,
+                0.82
+            ]
+        }
+    },
+        {
+        id: "refugee_route-path-arrow-line",
+        type: "line",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "refugee_route"],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#0f172a"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 0.45, 4, 0.8, 6, 1.2],
+            "line-opacity": 0.9
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/retreat_route.ts

@@ -0,0 +1,68 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getRetreatRouteLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "retreat_route-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "retreat_route"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#94a3b8"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 2.2, 4, 3.2, 6, 4.2],
+            "line-opacity": 0.9
+        }
+    },
+        {
+        id: "retreat_route-hit",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "retreat_route"]],
+        paint: {
+            "line-color": "#ffffff",
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 12, 4, 18, 6, 24],
+            "line-opacity": 0
+        }
+    },
+        {
+        id: "retreat_route-path-arrow-fill",
+        type: "fill",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "retreat_route"],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#94a3b8"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.92,
+                0.82
+            ]
+        }
+    },
+        {
+        id: "retreat_route-path-arrow-line",
+        type: "line",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "retreat_route"],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#0f172a"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 0.45, 4, 0.8, 6, 1.2],
+            "line-opacity": 0.9
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/ruin.ts

@@ -0,0 +1,53 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getRuinLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "ruin-circle",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "ruin"]],
+        paint: {
+            "circle-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                "#ef4444"
+            ],
+            "circle-radius": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 8, 4
+            ],
+            "circle-stroke-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#ffffff"
+            ],
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 3, 1
+            ],
+            "circle-opacity": 0.9
+        }
+    },
+        {
+        id: "ruin-selected-halo",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "ruin"]],
+        paint: {
+            "circle-color": "#22c55e",
+            "circle-radius": 13,
+            "circle-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.28, 0
+            ],
+            "circle-stroke-color": "#14532d",
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 2, 0
+            ]
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/shipping_route.ts

@@ -0,0 +1,68 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getShippingRouteLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "shipping_route-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "shipping_route"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#2563eb"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 2.2, 4, 3.2, 6, 4.2],
+            "line-opacity": 0.9
+        }
+    },
+        {
+        id: "shipping_route-hit",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "shipping_route"]],
+        paint: {
+            "line-color": "#ffffff",
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 12, 4, 18, 6, 24],
+            "line-opacity": 0
+        }
+    },
+        {
+        id: "shipping_route-path-arrow-fill",
+        type: "fill",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "shipping_route"],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#2563eb"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.92,
+                0.82
+            ]
+        }
+    },
+        {
+        id: "shipping_route-path-arrow-line",
+        type: "line",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "shipping_route"],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#0f172a"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 0.45, 4, 0.8, 6, 1.2],
+            "line-opacity": 0.9
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/state.ts

@@ -0,0 +1,40 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getStateLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "state-fill",
+        type: "fill",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "state"]],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#0ea5e9"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.6,
+                0.5
+            ]
+        }
+    },
+        {
+        id: "state-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "state"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#0c4a6e"
+            ],
+            "line-width": 2
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/temple.ts

@@ -0,0 +1,53 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getTempleLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "temple-circle",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "temple"]],
+        paint: {
+            "circle-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                "#ef4444"
+            ],
+            "circle-radius": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 8, 4
+            ],
+            "circle-stroke-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#ffffff"
+            ],
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 3, 1
+            ],
+            "circle-opacity": 0.9
+        }
+    },
+        {
+        id: "temple-selected-halo",
+        type: "circle",
+        source: pointSourceId!,
+        filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "temple"]],
+        paint: {
+            "circle-color": "#22c55e",
+            "circle-radius": 13,
+            "circle-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.28, 0
+            ],
+            "circle-stroke-color": "#14532d",
+            "circle-stroke-width": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 2, 0
+            ]
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/trade_route.ts

@@ -0,0 +1,68 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getTradeRouteLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "trade_route-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "trade_route"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#eab308"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 2.2, 4, 3.2, 6, 4.2],
+            "line-opacity": 0.9
+        }
+    },
+        {
+        id: "trade_route-hit",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", TYPE_MATCH_EXPR, "trade_route"]],
+        paint: {
+            "line-color": "#ffffff",
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 12, 4, 18, 6, 24],
+            "line-opacity": 0
+        }
+    },
+        {
+        id: "trade_route-path-arrow-fill",
+        type: "fill",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "trade_route"],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#eab308"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.92,
+                0.82
+            ]
+        }
+    },
+        {
+        id: "trade_route-path-arrow-line",
+        type: "line",
+        source: pathArrowSourceId!,
+        filter: ["==", TYPE_MATCH_EXPR, "trade_route"],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#0f172a"
+            ],
+            "line-width": ["interpolate", ["linear"], ["zoom"], 1, 0.45, 4, 0.8, 6, 1.2],
+            "line-opacity": 0.9
+        }
+    }
+    ];
+}

src/uhm/lib/map/styles/geotypes/war.ts

@@ -0,0 +1,40 @@
+import { LayerSpecification } from "maplibre-gl";
+import { TYPE_MATCH_EXPR } from "./index";
+
+export function getWarLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
+    return [
+        {
+        id: "war-fill",
+        type: "fill",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "war"]],
+        paint: {
+            "fill-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#22c55e",
+                ["==", ["coalesce", ["get", "entity_id"], ""], ""], "#ef4444",
+                "#dc2626"
+            ],
+            "fill-opacity": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], 0.6,
+                0.3
+            ]
+        }
+    },
+        {
+        id: "war-line",
+        type: "line",
+        source: sourceId,
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", TYPE_MATCH_EXPR, "war"]],
+        paint: {
+            "line-color": [
+                "case",
+                ["boolean", ["feature-state", "selected"], false], "#14532d",
+                "#7f1d1d"
+            ],
+            "line-width": 2
+        }
+    }
+    ];
+}