Kain344/History-user
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
taDuc
2026-05-12 14:47:00 +07:00
parent 8f6d848d55
commit d40c3831cb
32 changed files with 1499 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
banner.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 MiB

src/uhm/components/map/mapUtils.ts
+8 -10
View File
@@ -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(
src/uhm/components/map/useMapLayers.ts
+7 -197
View File
@@ -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
+6 -11
View File
@@ -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
+68
View File
@@ -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
+40
View File
@@ -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
+53
View File
@@ -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
+53
View File
@@ -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
+53
View File
@@ -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
+53
View File
@@ -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
+40
View File
@@ -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
+40
View File
@@ -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
+35
View File
@@ -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
+40
View File
@@ -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
+53
View File
@@ -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
+64
View File
@@ -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
+68
View File
@@ -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
+40
View File
@@ -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
+68
View File
@@ -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
+53
View File
@@ -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
+53
View File
@@ -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
+53
View File
@@ -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
+53
View File
@@ -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
+40
View File
@@ -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
+68
View File
@@ -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
+68
View File
@@ -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
+53
View File
@@ -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
+68
View File
@@ -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
+40
View File
@@ -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
+53
View File
@@ -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
+68
View File
@@ -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
+40
View File
@@ -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
}
}
];
}