feat: implement modularized map layer styles for various geographic types and update map engine integration
This commit is contained in:
taDuc
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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)
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
Reference in New Issue
Block a user