diff --git a/banner.png b/banner.png deleted file mode 100644 index 1b8c2f3..0000000 Binary files a/banner.png and /dev/null differ diff --git a/src/uhm/components/map/mapUtils.ts b/src/uhm/components/map/mapUtils.ts index 6de7cc9..275c248 100644 --- a/src/uhm/components/map/mapUtils.ts +++ b/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 [ - "countries-fill", - "countries-line", - "routes-line", - "routes-path-arrow-fill", - "routes-path-arrow-line", - "routes-path-hit", - "places-circle", - "places-symbol", - ].filter((layerId) => Boolean(map.getLayer(layerId))); + const selectableSources = ["countries", "places", PATH_ARROW_SOURCE_ID]; + const style = map.getStyle(); + if (!style || !style.layers) return []; + + return style.layers + .filter((layer) => "source" in layer && selectableSources.includes(layer.source as string)) + .map((layer) => layer.id); } export function filterDraftByBinding( diff --git a/src/uhm/components/map/useMapLayers.ts b/src/uhm/components/map/useMapLayers.ts index 0ca6e58..310ffa7 100644 --- a/src/uhm/components/map/useMapLayers.ts +++ b/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, diff --git a/src/uhm/lib/map/engines/selectingEngine.ts b/src/uhm/lib/map/engines/selectingEngine.ts index 6375f43..b9089cc 100644 --- a/src/uhm/lib/map/engines/selectingEngine.ts +++ b/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) { diff --git a/src/uhm/lib/map/styles/geotypes/attack_route.ts b/src/uhm/lib/map/styles/geotypes/attack_route.ts new file mode 100644 index 0000000..a62c02b --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/battle.ts b/src/uhm/lib/map/styles/geotypes/battle.ts new file mode 100644 index 0000000..121e9ff --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/bridge.ts b/src/uhm/lib/map/styles/geotypes/bridge.ts new file mode 100644 index 0000000..8199f7b --- /dev/null +++ b/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 + ] + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/capital.ts b/src/uhm/lib/map/styles/geotypes/capital.ts new file mode 100644 index 0000000..04cb171 --- /dev/null +++ b/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 + ] + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/castle.ts b/src/uhm/lib/map/styles/geotypes/castle.ts new file mode 100644 index 0000000..81e8241 --- /dev/null +++ b/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 + ] + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/city.ts b/src/uhm/lib/map/styles/geotypes/city.ts new file mode 100644 index 0000000..bb3e25b --- /dev/null +++ b/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 + ] + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/civilization.ts b/src/uhm/lib/map/styles/geotypes/civilization.ts new file mode 100644 index 0000000..beda40b --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/country.ts b/src/uhm/lib/map/styles/geotypes/country.ts new file mode 100644 index 0000000..ca3ad34 --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/defense_line.ts b/src/uhm/lib/map/styles/geotypes/defense_line.ts new file mode 100644 index 0000000..c8e9068 --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/empire.ts b/src/uhm/lib/map/styles/geotypes/empire.ts new file mode 100644 index 0000000..4870683 --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/fortress.ts b/src/uhm/lib/map/styles/geotypes/fortress.ts new file mode 100644 index 0000000..d01d369 --- /dev/null +++ b/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 + ] + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/index.ts b/src/uhm/lib/map/styles/geotypes/index.ts new file mode 100644 index 0000000..8e485f7 --- /dev/null +++ b/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) + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/invasion_route.ts b/src/uhm/lib/map/styles/geotypes/invasion_route.ts new file mode 100644 index 0000000..50c996b --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/kingdom.ts b/src/uhm/lib/map/styles/geotypes/kingdom.ts new file mode 100644 index 0000000..f6bae6f --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/migration_route.ts b/src/uhm/lib/map/styles/geotypes/migration_route.ts new file mode 100644 index 0000000..113b3f7 --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/person_activity.ts b/src/uhm/lib/map/styles/geotypes/person_activity.ts new file mode 100644 index 0000000..d386e6e --- /dev/null +++ b/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 + ] + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/person_birthplace.ts b/src/uhm/lib/map/styles/geotypes/person_birthplace.ts new file mode 100644 index 0000000..bd59224 --- /dev/null +++ b/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 + ] + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/person_deathplace.ts b/src/uhm/lib/map/styles/geotypes/person_deathplace.ts new file mode 100644 index 0000000..8a963d0 --- /dev/null +++ b/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 + ] + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/port.ts b/src/uhm/lib/map/styles/geotypes/port.ts new file mode 100644 index 0000000..1b2ff65 --- /dev/null +++ b/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 + ] + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/rebellion_zone.ts b/src/uhm/lib/map/styles/geotypes/rebellion_zone.ts new file mode 100644 index 0000000..590f669 --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/refugee_route.ts b/src/uhm/lib/map/styles/geotypes/refugee_route.ts new file mode 100644 index 0000000..668c164 --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/retreat_route.ts b/src/uhm/lib/map/styles/geotypes/retreat_route.ts new file mode 100644 index 0000000..55f697e --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/ruin.ts b/src/uhm/lib/map/styles/geotypes/ruin.ts new file mode 100644 index 0000000..f6ac4fd --- /dev/null +++ b/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 + ] + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/shipping_route.ts b/src/uhm/lib/map/styles/geotypes/shipping_route.ts new file mode 100644 index 0000000..3b8ebc7 --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/state.ts b/src/uhm/lib/map/styles/geotypes/state.ts new file mode 100644 index 0000000..1989cd7 --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/temple.ts b/src/uhm/lib/map/styles/geotypes/temple.ts new file mode 100644 index 0000000..9258cf1 --- /dev/null +++ b/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 + ] + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/trade_route.ts b/src/uhm/lib/map/styles/geotypes/trade_route.ts new file mode 100644 index 0000000..77bd73d --- /dev/null +++ b/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 + } + } + ]; +} diff --git a/src/uhm/lib/map/styles/geotypes/war.ts b/src/uhm/lib/map/styles/geotypes/war.ts new file mode 100644 index 0000000..a261e5f --- /dev/null +++ b/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 + } + } + ]; +}