@macrostrat/column-views 3.2.2 → 3.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/dist/index.cjs +15 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +11 -5
- package/dist/maps/column-correlation/core.cjs +10 -30
- package/dist/maps/column-correlation/core.cjs.map +1 -1
- package/dist/maps/column-correlation/core.d.ts +1 -1
- package/dist/maps/column-correlation/core.js +10 -30
- package/dist/maps/column-correlation/core.js.map +1 -1
- package/dist/maps/column-navigation/mapbox/index.cjs +156 -118
- package/dist/maps/column-navigation/mapbox/index.cjs.map +1 -1
- package/dist/maps/column-navigation/mapbox/index.d.ts +23 -2
- package/dist/maps/column-navigation/mapbox/index.js +158 -120
- package/dist/maps/column-navigation/mapbox/index.js.map +1 -1
- package/dist/maps/column-navigation/mapbox/keyboard-navigation.cjs +7 -1
- package/dist/maps/column-navigation/mapbox/keyboard-navigation.cjs.map +1 -1
- package/dist/maps/column-navigation/mapbox/keyboard-navigation.d.ts +3 -26
- package/dist/maps/column-navigation/mapbox/keyboard-navigation.js +9 -3
- package/dist/maps/column-navigation/mapbox/keyboard-navigation.js.map +1 -1
- package/dist/maps/index.d.ts +2 -2
- package/dist/maps/{_shared/inset-map.cjs → inset-map/index.cjs} +1 -1
- package/dist/maps/inset-map/index.cjs.map +1 -0
- package/dist/maps/{_shared/inset-map.js → inset-map/index.js} +1 -1
- package/dist/maps/inset-map/index.js.map +1 -0
- package/dist/maps/layers/columns.cjs +161 -0
- package/dist/maps/layers/columns.cjs.map +1 -0
- package/dist/maps/layers/columns.d.ts +28 -0
- package/dist/maps/layers/columns.js +161 -0
- package/dist/maps/layers/columns.js.map +1 -0
- package/dist/maps/layers/index.d.ts +2 -0
- package/dist/maps/{units-overlay/index.cjs → layers/units.cjs} +41 -88
- package/dist/maps/layers/units.cjs.map +1 -0
- package/dist/maps/{units-overlay/index.d.ts → layers/units.d.ts} +1 -1
- package/dist/maps/{units-overlay/index.js → layers/units.js} +34 -82
- package/dist/maps/layers/units.js.map +1 -0
- package/dist/unit-details/age-range.cjs +86 -44
- package/dist/unit-details/age-range.cjs.map +1 -1
- package/dist/unit-details/age-range.d.ts +32 -5
- package/dist/unit-details/age-range.js +84 -44
- package/dist/unit-details/age-range.js.map +1 -1
- package/package.json +4 -4
- package/src/maps/column-correlation/core.ts +9 -29
- package/src/maps/column-navigation/mapbox/index.ts +191 -138
- package/src/maps/column-navigation/mapbox/keyboard-navigation.ts +17 -3
- package/src/maps/index.ts +2 -2
- package/src/maps/layers/columns.ts +210 -0
- package/src/maps/layers/index.ts +2 -0
- package/src/maps/{units-overlay/index.ts → layers/units.ts} +34 -84
- package/src/maps/unit-map.stories.ts +27 -12
- package/src/unit-details/age-range.ts +124 -47
- package/dist/maps/_shared/index.d.ts +0 -2
- package/dist/maps/_shared/inset-map.cjs.map +0 -1
- package/dist/maps/_shared/inset-map.js.map +0 -1
- package/dist/maps/_shared/styles.cjs +0 -73
- package/dist/maps/_shared/styles.cjs.map +0 -1
- package/dist/maps/_shared/styles.d.ts +0 -2
- package/dist/maps/_shared/styles.js +0 -73
- package/dist/maps/_shared/styles.js.map +0 -1
- package/dist/maps/units-overlay/index.cjs.map +0 -1
- package/dist/maps/units-overlay/index.js.map +0 -1
- package/src/maps/_shared/index.ts +0 -2
- package/src/maps/_shared/styles.ts +0 -76
- /package/dist/maps/{_shared/inset-map.d.ts → inset-map/index.d.ts} +0 -0
- /package/src/maps/{_shared/inset-map.ts → inset-map/index.ts} +0 -0
- /package/src/maps/{_shared → inset-map}/inset-map.stories.ts +0 -0
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const colorUtils = require("@macrostrat/color-utils");
|
|
4
|
-
const mapboxUtils = require("@macrostrat/mapbox-utils");
|
|
5
|
-
function buildColumnsStyle(color) {
|
|
6
|
-
let columnColor = color ?? colorUtils.getCSSVariable("--text-subtle-color", "black");
|
|
7
|
-
const columnSelectedColor = colorUtils.getCSSVariable("--selection-color", "purple");
|
|
8
|
-
columnColor = [
|
|
9
|
-
"coalesce",
|
|
10
|
-
["feature-state", "color"],
|
|
11
|
-
["get", "color"],
|
|
12
|
-
columnColor
|
|
13
|
-
];
|
|
14
|
-
return {
|
|
15
|
-
sources: {
|
|
16
|
-
columns: mapboxUtils.buildGeoJSONSource()
|
|
17
|
-
},
|
|
18
|
-
version: 8,
|
|
19
|
-
layers: [
|
|
20
|
-
{
|
|
21
|
-
id: "columns-fill",
|
|
22
|
-
type: "fill",
|
|
23
|
-
source: "columns",
|
|
24
|
-
paint: {
|
|
25
|
-
"fill-color": columnColor,
|
|
26
|
-
"fill-opacity": [
|
|
27
|
-
"case",
|
|
28
|
-
["boolean", ["feature-state", "selected"], false],
|
|
29
|
-
0.5,
|
|
30
|
-
["boolean", ["feature-state", "hover"], false],
|
|
31
|
-
0.3,
|
|
32
|
-
0.1
|
|
33
|
-
]
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
id: "columns-line",
|
|
38
|
-
type: "line",
|
|
39
|
-
source: "columns",
|
|
40
|
-
paint: {
|
|
41
|
-
"line-color": columnColor,
|
|
42
|
-
"line-width": 2,
|
|
43
|
-
"line-opacity": 0.5
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
id: "columns-points",
|
|
48
|
-
type: "circle",
|
|
49
|
-
source: "columns",
|
|
50
|
-
paint: {
|
|
51
|
-
"circle-radius": 4,
|
|
52
|
-
"circle-color": [
|
|
53
|
-
"case",
|
|
54
|
-
["boolean", ["feature-state", "selected"], false],
|
|
55
|
-
columnSelectedColor,
|
|
56
|
-
columnColor
|
|
57
|
-
],
|
|
58
|
-
"circle-opacity": [
|
|
59
|
-
"case",
|
|
60
|
-
["boolean", ["feature-state", "selected"], false],
|
|
61
|
-
1,
|
|
62
|
-
["boolean", ["feature-state", "hover"], false],
|
|
63
|
-
0.7,
|
|
64
|
-
0.5
|
|
65
|
-
]
|
|
66
|
-
},
|
|
67
|
-
filter: ["==", "$type", "Point"]
|
|
68
|
-
}
|
|
69
|
-
]
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
exports.buildColumnsStyle = buildColumnsStyle;
|
|
73
|
-
//# sourceMappingURL=styles.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs","sources":["../../../src/maps/_shared/styles.ts"],"sourcesContent":["import { getCSSVariable } from \"@macrostrat/color-utils\";\nimport { buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\nimport type { Style } from \"mapbox-gl\";\n\nexport function buildColumnsStyle(color: string): Style {\n let columnColor: any =\n color ?? getCSSVariable(\"--text-subtle-color\", \"black\");\n const columnSelectedColor = getCSSVariable(\"--selection-color\", \"purple\");\n\n // If color is in the feature state or geojson properties, use that as second choice\n\n columnColor = [\n \"coalesce\",\n [\"feature-state\", \"color\"],\n [\"get\", \"color\"],\n columnColor,\n ];\n\n return {\n sources: {\n columns: buildGeoJSONSource(),\n },\n version: 8,\n layers: [\n {\n id: \"columns-fill\",\n type: \"fill\",\n source: \"columns\",\n paint: {\n \"fill-color\": columnColor,\n \"fill-opacity\": [\n \"case\",\n [\"boolean\", [\"feature-state\", \"selected\"], false],\n 0.5,\n [\"boolean\", [\"feature-state\", \"hover\"], false],\n 0.3,\n 0.1,\n ],\n },\n },\n {\n id: \"columns-line\",\n type: \"line\",\n source: \"columns\",\n paint: {\n \"line-color\": columnColor,\n \"line-width\": 2,\n \"line-opacity\": 0.5,\n },\n },\n {\n id: \"columns-points\",\n type: \"circle\",\n source: \"columns\",\n paint: {\n \"circle-radius\": 4,\n \"circle-color\": [\n \"case\",\n [\"boolean\", [\"feature-state\", \"selected\"], false],\n columnSelectedColor,\n columnColor,\n ],\n \"circle-opacity\": [\n \"case\",\n [\"boolean\", [\"feature-state\", \"selected\"], false],\n 1,\n [\"boolean\", [\"feature-state\", \"hover\"], false],\n 0.7,\n 0.5,\n ],\n },\n filter: [\"==\", \"$type\", \"Point\"],\n },\n ],\n };\n}\n"],"names":["getCSSVariable","buildGeoJSONSource"],"mappings":";;;;AAIO,SAAS,kBAAkB,OAAsB;AACtD,MAAI,cACF,SAASA,0BAAe,uBAAuB,OAAO;AACxD,QAAM,sBAAsBA,WAAAA,eAAe,qBAAqB,QAAQ;AAIxE,gBAAc;AAAA,IACZ;AAAA,IACA,CAAC,iBAAiB,OAAO;AAAA,IACzB,CAAC,OAAO,OAAO;AAAA,IACf;AAAA,EAAA;AAGF,SAAO;AAAA,IACL,SAAS;AAAA,MACP,SAASC,YAAAA,mBAAA;AAAA,IAAmB;AAAA,IAE9B,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,UAAU,GAAG,KAAK;AAAA,YAChD;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,UAAU,GAAG,KAAK;AAAA,YAChD;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,kBAAkB;AAAA,YAChB;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,UAAU,GAAG,KAAK;AAAA,YAChD;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QAEF,QAAQ,CAAC,MAAM,SAAS,OAAO;AAAA,MAAA;AAAA,IACjC;AAAA,EACF;AAEJ;;"}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { getCSSVariable } from "@macrostrat/color-utils";
|
|
2
|
-
import { buildGeoJSONSource } from "@macrostrat/mapbox-utils";
|
|
3
|
-
function buildColumnsStyle(color) {
|
|
4
|
-
let columnColor = color ?? getCSSVariable("--text-subtle-color", "black");
|
|
5
|
-
const columnSelectedColor = getCSSVariable("--selection-color", "purple");
|
|
6
|
-
columnColor = [
|
|
7
|
-
"coalesce",
|
|
8
|
-
["feature-state", "color"],
|
|
9
|
-
["get", "color"],
|
|
10
|
-
columnColor
|
|
11
|
-
];
|
|
12
|
-
return {
|
|
13
|
-
sources: {
|
|
14
|
-
columns: buildGeoJSONSource()
|
|
15
|
-
},
|
|
16
|
-
version: 8,
|
|
17
|
-
layers: [
|
|
18
|
-
{
|
|
19
|
-
id: "columns-fill",
|
|
20
|
-
type: "fill",
|
|
21
|
-
source: "columns",
|
|
22
|
-
paint: {
|
|
23
|
-
"fill-color": columnColor,
|
|
24
|
-
"fill-opacity": [
|
|
25
|
-
"case",
|
|
26
|
-
["boolean", ["feature-state", "selected"], false],
|
|
27
|
-
0.5,
|
|
28
|
-
["boolean", ["feature-state", "hover"], false],
|
|
29
|
-
0.3,
|
|
30
|
-
0.1
|
|
31
|
-
]
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
id: "columns-line",
|
|
36
|
-
type: "line",
|
|
37
|
-
source: "columns",
|
|
38
|
-
paint: {
|
|
39
|
-
"line-color": columnColor,
|
|
40
|
-
"line-width": 2,
|
|
41
|
-
"line-opacity": 0.5
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
id: "columns-points",
|
|
46
|
-
type: "circle",
|
|
47
|
-
source: "columns",
|
|
48
|
-
paint: {
|
|
49
|
-
"circle-radius": 4,
|
|
50
|
-
"circle-color": [
|
|
51
|
-
"case",
|
|
52
|
-
["boolean", ["feature-state", "selected"], false],
|
|
53
|
-
columnSelectedColor,
|
|
54
|
-
columnColor
|
|
55
|
-
],
|
|
56
|
-
"circle-opacity": [
|
|
57
|
-
"case",
|
|
58
|
-
["boolean", ["feature-state", "selected"], false],
|
|
59
|
-
1,
|
|
60
|
-
["boolean", ["feature-state", "hover"], false],
|
|
61
|
-
0.7,
|
|
62
|
-
0.5
|
|
63
|
-
]
|
|
64
|
-
},
|
|
65
|
-
filter: ["==", "$type", "Point"]
|
|
66
|
-
}
|
|
67
|
-
]
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
export {
|
|
71
|
-
buildColumnsStyle
|
|
72
|
-
};
|
|
73
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../src/maps/_shared/styles.ts"],"sourcesContent":["import { getCSSVariable } from \"@macrostrat/color-utils\";\nimport { buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\nimport type { Style } from \"mapbox-gl\";\n\nexport function buildColumnsStyle(color: string): Style {\n let columnColor: any =\n color ?? getCSSVariable(\"--text-subtle-color\", \"black\");\n const columnSelectedColor = getCSSVariable(\"--selection-color\", \"purple\");\n\n // If color is in the feature state or geojson properties, use that as second choice\n\n columnColor = [\n \"coalesce\",\n [\"feature-state\", \"color\"],\n [\"get\", \"color\"],\n columnColor,\n ];\n\n return {\n sources: {\n columns: buildGeoJSONSource(),\n },\n version: 8,\n layers: [\n {\n id: \"columns-fill\",\n type: \"fill\",\n source: \"columns\",\n paint: {\n \"fill-color\": columnColor,\n \"fill-opacity\": [\n \"case\",\n [\"boolean\", [\"feature-state\", \"selected\"], false],\n 0.5,\n [\"boolean\", [\"feature-state\", \"hover\"], false],\n 0.3,\n 0.1,\n ],\n },\n },\n {\n id: \"columns-line\",\n type: \"line\",\n source: \"columns\",\n paint: {\n \"line-color\": columnColor,\n \"line-width\": 2,\n \"line-opacity\": 0.5,\n },\n },\n {\n id: \"columns-points\",\n type: \"circle\",\n source: \"columns\",\n paint: {\n \"circle-radius\": 4,\n \"circle-color\": [\n \"case\",\n [\"boolean\", [\"feature-state\", \"selected\"], false],\n columnSelectedColor,\n columnColor,\n ],\n \"circle-opacity\": [\n \"case\",\n [\"boolean\", [\"feature-state\", \"selected\"], false],\n 1,\n [\"boolean\", [\"feature-state\", \"hover\"], false],\n 0.7,\n 0.5,\n ],\n },\n filter: [\"==\", \"$type\", \"Point\"],\n },\n ],\n };\n}\n"],"names":[],"mappings":";;AAIO,SAAS,kBAAkB,OAAsB;AACtD,MAAI,cACF,SAAS,eAAe,uBAAuB,OAAO;AACxD,QAAM,sBAAsB,eAAe,qBAAqB,QAAQ;AAIxE,gBAAc;AAAA,IACZ;AAAA,IACA,CAAC,iBAAiB,OAAO;AAAA,IACzB,CAAC,OAAO,OAAO;AAAA,IACf;AAAA,EAAA;AAGF,SAAO;AAAA,IACL,SAAS;AAAA,MACP,SAAS,mBAAA;AAAA,IAAmB;AAAA,IAE9B,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,UAAU,GAAG,KAAK;AAAA,YAChD;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,UAAU,GAAG,KAAK;AAAA,YAChD;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,kBAAkB;AAAA,YAChB;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,UAAU,GAAG,KAAK;AAAA,YAChD;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QAEF,QAAQ,CAAC,MAAM,SAAS,OAAO;AAAA,MAAA;AAAA,IACjC;AAAA,EACF;AAEJ;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/maps/units-overlay/index.ts"],"sourcesContent":["import {\n useLithologies,\n useMacrostratColumns,\n} from \"@macrostrat/data-provider\";\nimport { useAPIResult } from \"@macrostrat/ui-components\";\nimport { useMapStyleOperator } from \"@macrostrat/mapbox-react\";\nimport { FeatureCollection } from \"geojson\";\nimport { useMemo } from \"react\";\nimport { mergeStyles, setGeoJSON } from \"@macrostrat/mapbox-utils\";\nimport { UnitLithology, UnitLong } from \"@macrostrat/api-types\";\nimport { flattenLithologies, getMixedColorForData } from \"../../units\";\nimport { getBestFGDCPatternForLithologyList } from \"../../units/resolvers\";\nimport {\n setupStyleImageManager,\n loadStyleImage,\n StyleFragment,\n} from \"@macrostrat/map-styles\";\nimport { asChromaColor, getCSSVariable } from \"@macrostrat/color-utils\";\nimport { buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\nimport pMap from \"p-map\";\n\nexport interface UnitsOverlayProps {\n time: number;\n ageSpan?: number;\n project?: number | number[];\n patterns?: boolean;\n}\n\nexport function MacrostratUnitsOverlay(props: UnitsOverlayProps) {\n const { time, ageSpan = 0.05, patterns = false } = props;\n const lithMap = useLithologies();\n\n useMapStyleOperator(\n (map) => {\n if (!patterns) return;\n setupStyleImageManager(map, { verbose: false });\n },\n [patterns],\n );\n\n const params = useMemo(() => {\n let project: number[] | undefined;\n if (Number.isFinite(props.project)) {\n project = [props.project as number];\n } else if (!Array.isArray(props.project)) {\n project = undefined;\n }\n // Project can only be a single project for now\n const projectCompat =\n project != null && project.length > 0 ? project[0] : undefined;\n\n return {\n age_bottom: time + ageSpan / 2,\n age_top: time - ageSpan / 2,\n response: \"long\",\n project: projectCompat,\n };\n }, [time, ageSpan, props.project]);\n\n const units: UnitLong[] = useAPIResult(\"/units\", params);\n const columns = useMacrostratColumns(params.project, false);\n\n // Set up basic columns layer\n useMapStyleOperator(\n (map) => {\n if (columns == null) {\n return;\n }\n const data: FeatureCollection = {\n type: \"FeatureCollection\",\n features: columns,\n };\n setGeoJSON(map, \"columns\", data);\n },\n [columns],\n );\n\n useMapStyleOperator(\n (map) => {\n if (units == null || columns == null || lithMap == null) {\n return;\n }\n\n const getColorForLithology = (data: UnitLithology): string | null => {\n return lithMap?.get(data.lith_id)?.color ?? null;\n };\n\n const unitsMap = postProcessUnits(units, getColorForLithology);\n handleUnitsLayerUpdate(map, unitsMap, columns);\n if (patterns) {\n handlePatternOverlayUpdate(\n map,\n unitsMap,\n columns,\n getColorForLithology,\n ).then(() => {});\n }\n },\n [units, lithMap, columns, patterns],\n );\n\n return null;\n}\n\nfunction handleUnitsLayerUpdate(\n map,\n unitsMap: Map<number, UnitsDisplayInfo>,\n columns: any[],\n) {\n // Update feature states\n for (const column of columns) {\n const col_id = column.properties.col_id;\n const info = unitsMap.get(Number(col_id));\n const color = info?.color;\n map.setFeatureState(\n { source: \"columns\", id: col_id },\n {\n color,\n shown: color != null,\n },\n );\n }\n}\n\nasync function handlePatternOverlayUpdate(\n map,\n unitsMap: Map<number, UnitsDisplayInfo>,\n columns: any[],\n getColor: LithologyColorGetter,\n) {\n // synthesize patterns not yet in cache\n\n const colsWithPatterns = [];\n const patternIDs = new Set<string>();\n // Update feature states\n for (const column of columns) {\n const col_id = column.properties.col_id;\n const info = unitsMap.get(Number(col_id));\n if (info == null) continue;\n const pattern = getPatternSpec(info?.liths, getColor);\n if (pattern == null) continue;\n\n colsWithPatterns.push({\n type: \"Feature\",\n geometry: column.geometry,\n properties: {\n col_id,\n pattern,\n },\n });\n patternIDs.add(pattern);\n }\n\n const patternsToLoad = patternIDs.values().filter((d) => !map.hasImage(d));\n\n const mapper = async (patternID) => {\n try {\n await loadStyleImage(map, patternID, { pixelRatio: 10 });\n } catch (e) {}\n };\n // Load all pattern images\n await pMap(patternsToLoad, mapper, { concurrency: 5 });\n\n // Set data for pattern layer\n // This is inefficient but the only way to set per-feature patterns in Mapbox\n const patternData: FeatureCollection = {\n type: \"FeatureCollection\",\n features: colsWithPatterns,\n };\n setGeoJSON(map, \"column-patterns\", patternData);\n}\n\nconst cachedColors = new Map<string, string>();\n\nfunction getDarkenedColor(color: string): string {\n /** Memoized function to get a darkened version of a color for pattern use */\n if (cachedColors.has(color)) {\n return cachedColors.get(color);\n }\n const c1 = asChromaColor(color).set(\"hsl.l\", 0.4).set(\"hsl.s\", 0.8).hex();\n cachedColors.set(color, c1);\n return c1;\n}\n\ninterface UnitsDisplayInfo {\n col_id: number;\n units: UnitLong[];\n color: string;\n liths: UnitLithology[];\n}\n\ntype LithologyColorGetter = (val: UnitLithology) => string | null;\n\nfunction postProcessUnits(\n units: UnitLong[],\n getColor: LithologyColorGetter,\n): Map<number, UnitsDisplayInfo> {\n // Group by col_id\n const unitsByColumn: Map<number, UnitLong[]> = new Map();\n for (const unit of units) {\n const col_id = Number(unit.col_id);\n if (!unitsByColumn.has(col_id)) {\n unitsByColumn.set(col_id, [unit]);\n } else {\n unitsByColumn.set(col_id, [...unitsByColumn.get(col_id), unit]);\n }\n }\n\n // Summarize units for display\n const res = new Map<number, UnitsDisplayInfo>();\n for (const [col_id, unitList] of unitsByColumn.entries()) {\n const liths = flattenLithologies(unitList.map((u) => u.lith));\n res.set(col_id, {\n col_id,\n units: unitList,\n liths,\n color: getMixedColorForData(liths, getColor),\n });\n }\n\n return res;\n}\n\nfunction getPatternSpec(\n liths: UnitLithology[],\n getColor: LithologyColorGetter,\n): string | null {\n const patternData = getBestFGDCPatternForLithologyList(liths);\n if (patternData == null) return null;\n let { patternID, lith } = patternData;\n const color = getDarkenedColor(getColor(lith));\n return `fgdc:${patternID}:${color}:transparent`;\n}\n\ntype UnitsStyleOptions = {\n color?: string;\n patterns?: boolean;\n};\n\nexport function buildUnitsStyle(opts: UnitsStyleOptions = {}): StyleFragment {\n const { color = null, patterns = false } = opts;\n\n let columnBaseColor: any =\n color ?? getCSSVariable(\"--text-subtle-color\", \"black\");\n const columnSelectedColor = getCSSVariable(\"--selection-color\", \"purple\");\n\n // If color is in the feature state or geojson properties, use that as second choice\n\n let columnColor: any = [\n \"coalesce\",\n [\"feature-state\", \"color\"],\n [\"get\", \"color\"],\n columnBaseColor,\n ];\n\n const baseStyle: StyleFragment = {\n sources: {\n columns: buildGeoJSONSource(),\n },\n version: 8,\n layers: [\n {\n id: \"columns-fill\",\n type: \"fill\",\n source: \"columns\",\n paint: {\n \"fill-color\": columnColor,\n \"fill-opacity\": [\n \"case\",\n [\"boolean\", [\"feature-state\", \"shown\"], false],\n 0.8,\n [\"boolean\", [\"feature-state\", \"hover\"], false],\n 0.3,\n 0.1,\n ],\n },\n },\n {\n id: \"columns-line\",\n type: \"line\",\n source: \"columns\",\n paint: {\n \"line-color\": columnColor,\n \"line-width\": 1,\n \"line-opacity\": 0.5,\n },\n },\n {\n id: \"columns-points\",\n type: \"circle\",\n source: \"columns\",\n paint: {\n \"circle-radius\": 4,\n \"circle-color\": [\n \"case\",\n [\"boolean\", [\"feature-state\", \"shown\"], false],\n columnColor,\n columnBaseColor,\n ],\n \"circle-opacity\": [\n \"case\",\n [\"boolean\", [\"feature-state\", \"shown\"], false],\n 0.8,\n [\"boolean\", [\"feature-state\", \"hover\"], false],\n 0.3,\n 0.1,\n ],\n },\n filter: [\"==\", \"$type\", \"Point\"],\n },\n ],\n };\n\n if (!patterns) {\n return baseStyle;\n }\n\n const patternStyle: StyleFragment = {\n sources: {\n \"column-patterns\": buildGeoJSONSource(),\n },\n layers: [\n {\n id: \"columns-fill-pattern\",\n type: \"fill\",\n source: \"column-patterns\",\n paint: {\n \"fill-pattern\": [\"get\", \"pattern\"],\n \"fill-opacity\": 1,\n },\n },\n ],\n };\n\n return mergeStyles(baseStyle, patternStyle);\n}\n"],"names":["useLithologies","useMapStyleOperator","setupStyleImageManager","useMemo","useAPIResult","useMacrostratColumns","setGeoJSON","loadStyleImage","pMap","asChromaColor","flattenLithologies","getMixedColorForData","getBestFGDCPatternForLithologyList","getCSSVariable","buildGeoJSONSource","mergeStyles"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/maps/units-overlay/index.ts"],"sourcesContent":["import {\n useLithologies,\n useMacrostratColumns,\n} from \"@macrostrat/data-provider\";\nimport { useAPIResult } from \"@macrostrat/ui-components\";\nimport { useMapStyleOperator } from \"@macrostrat/mapbox-react\";\nimport { FeatureCollection } from \"geojson\";\nimport { useMemo } from \"react\";\nimport { mergeStyles, setGeoJSON } from \"@macrostrat/mapbox-utils\";\nimport { UnitLithology, UnitLong } from \"@macrostrat/api-types\";\nimport { flattenLithologies, getMixedColorForData } from \"../../units\";\nimport { getBestFGDCPatternForLithologyList } from \"../../units/resolvers\";\nimport {\n setupStyleImageManager,\n loadStyleImage,\n StyleFragment,\n} from \"@macrostrat/map-styles\";\nimport { asChromaColor, getCSSVariable } from \"@macrostrat/color-utils\";\nimport { buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\nimport pMap from \"p-map\";\n\nexport interface UnitsOverlayProps {\n time: number;\n ageSpan?: number;\n project?: number | number[];\n patterns?: boolean;\n}\n\nexport function MacrostratUnitsOverlay(props: UnitsOverlayProps) {\n const { time, ageSpan = 0.05, patterns = false } = props;\n const lithMap = useLithologies();\n\n useMapStyleOperator(\n (map) => {\n if (!patterns) return;\n setupStyleImageManager(map, { verbose: false });\n },\n [patterns],\n );\n\n const params = useMemo(() => {\n let project: number[] | undefined;\n if (Number.isFinite(props.project)) {\n project = [props.project as number];\n } else if (!Array.isArray(props.project)) {\n project = undefined;\n }\n // Project can only be a single project for now\n const projectCompat =\n project != null && project.length > 0 ? project[0] : undefined;\n\n return {\n age_bottom: time + ageSpan / 2,\n age_top: time - ageSpan / 2,\n response: \"long\",\n project: projectCompat,\n };\n }, [time, ageSpan, props.project]);\n\n const units: UnitLong[] = useAPIResult(\"/units\", params);\n const columns = useMacrostratColumns(params.project, false);\n\n // Set up basic columns layer\n useMapStyleOperator(\n (map) => {\n if (columns == null) {\n return;\n }\n const data: FeatureCollection = {\n type: \"FeatureCollection\",\n features: columns,\n };\n setGeoJSON(map, \"columns\", data);\n },\n [columns],\n );\n\n useMapStyleOperator(\n (map) => {\n if (units == null || columns == null || lithMap == null) {\n return;\n }\n\n const getColorForLithology = (data: UnitLithology): string | null => {\n return lithMap?.get(data.lith_id)?.color ?? null;\n };\n\n const unitsMap = postProcessUnits(units, getColorForLithology);\n handleUnitsLayerUpdate(map, unitsMap, columns);\n if (patterns) {\n handlePatternOverlayUpdate(\n map,\n unitsMap,\n columns,\n getColorForLithology,\n ).then(() => {});\n }\n },\n [units, lithMap, columns, patterns],\n );\n\n return null;\n}\n\nfunction handleUnitsLayerUpdate(\n map,\n unitsMap: Map<number, UnitsDisplayInfo>,\n columns: any[],\n) {\n // Update feature states\n for (const column of columns) {\n const col_id = column.properties.col_id;\n const info = unitsMap.get(Number(col_id));\n const color = info?.color;\n map.setFeatureState(\n { source: \"columns\", id: col_id },\n {\n color,\n shown: color != null,\n },\n );\n }\n}\n\nasync function handlePatternOverlayUpdate(\n map,\n unitsMap: Map<number, UnitsDisplayInfo>,\n columns: any[],\n getColor: LithologyColorGetter,\n) {\n // synthesize patterns not yet in cache\n\n const colsWithPatterns = [];\n const patternIDs = new Set<string>();\n // Update feature states\n for (const column of columns) {\n const col_id = column.properties.col_id;\n const info = unitsMap.get(Number(col_id));\n if (info == null) continue;\n const pattern = getPatternSpec(info?.liths, getColor);\n if (pattern == null) continue;\n\n colsWithPatterns.push({\n type: \"Feature\",\n geometry: column.geometry,\n properties: {\n col_id,\n pattern,\n },\n });\n patternIDs.add(pattern);\n }\n\n const patternsToLoad = patternIDs.values().filter((d) => !map.hasImage(d));\n\n const mapper = async (patternID) => {\n try {\n await loadStyleImage(map, patternID, { pixelRatio: 10 });\n } catch (e) {}\n };\n // Load all pattern images\n await pMap(patternsToLoad, mapper, { concurrency: 5 });\n\n // Set data for pattern layer\n // This is inefficient but the only way to set per-feature patterns in Mapbox\n const patternData: FeatureCollection = {\n type: \"FeatureCollection\",\n features: colsWithPatterns,\n };\n setGeoJSON(map, \"column-patterns\", patternData);\n}\n\nconst cachedColors = new Map<string, string>();\n\nfunction getDarkenedColor(color: string): string {\n /** Memoized function to get a darkened version of a color for pattern use */\n if (cachedColors.has(color)) {\n return cachedColors.get(color);\n }\n const c1 = asChromaColor(color).set(\"hsl.l\", 0.4).set(\"hsl.s\", 0.8).hex();\n cachedColors.set(color, c1);\n return c1;\n}\n\ninterface UnitsDisplayInfo {\n col_id: number;\n units: UnitLong[];\n color: string;\n liths: UnitLithology[];\n}\n\ntype LithologyColorGetter = (val: UnitLithology) => string | null;\n\nfunction postProcessUnits(\n units: UnitLong[],\n getColor: LithologyColorGetter,\n): Map<number, UnitsDisplayInfo> {\n // Group by col_id\n const unitsByColumn: Map<number, UnitLong[]> = new Map();\n for (const unit of units) {\n const col_id = Number(unit.col_id);\n if (!unitsByColumn.has(col_id)) {\n unitsByColumn.set(col_id, [unit]);\n } else {\n unitsByColumn.set(col_id, [...unitsByColumn.get(col_id), unit]);\n }\n }\n\n // Summarize units for display\n const res = new Map<number, UnitsDisplayInfo>();\n for (const [col_id, unitList] of unitsByColumn.entries()) {\n const liths = flattenLithologies(unitList.map((u) => u.lith));\n res.set(col_id, {\n col_id,\n units: unitList,\n liths,\n color: getMixedColorForData(liths, getColor),\n });\n }\n\n return res;\n}\n\nfunction getPatternSpec(\n liths: UnitLithology[],\n getColor: LithologyColorGetter,\n): string | null {\n const patternData = getBestFGDCPatternForLithologyList(liths);\n if (patternData == null) return null;\n let { patternID, lith } = patternData;\n const color = getDarkenedColor(getColor(lith));\n return `fgdc:${patternID}:${color}:transparent`;\n}\n\ntype UnitsStyleOptions = {\n color?: string;\n patterns?: boolean;\n};\n\nexport function buildUnitsStyle(opts: UnitsStyleOptions = {}): StyleFragment {\n const { color = null, patterns = false } = opts;\n\n let columnBaseColor: any =\n color ?? getCSSVariable(\"--text-subtle-color\", \"black\");\n const columnSelectedColor = getCSSVariable(\"--selection-color\", \"purple\");\n\n // If color is in the feature state or geojson properties, use that as second choice\n\n let columnColor: any = [\n \"coalesce\",\n [\"feature-state\", \"color\"],\n [\"get\", \"color\"],\n columnBaseColor,\n ];\n\n const baseStyle: StyleFragment = {\n sources: {\n columns: buildGeoJSONSource(),\n },\n version: 8,\n layers: [\n {\n id: \"columns-fill\",\n type: \"fill\",\n source: \"columns\",\n paint: {\n \"fill-color\": columnColor,\n \"fill-opacity\": [\n \"case\",\n [\"boolean\", [\"feature-state\", \"shown\"], false],\n 0.8,\n [\"boolean\", [\"feature-state\", \"hover\"], false],\n 0.3,\n 0.1,\n ],\n },\n },\n {\n id: \"columns-line\",\n type: \"line\",\n source: \"columns\",\n paint: {\n \"line-color\": columnColor,\n \"line-width\": 1,\n \"line-opacity\": 0.5,\n },\n },\n {\n id: \"columns-points\",\n type: \"circle\",\n source: \"columns\",\n paint: {\n \"circle-radius\": 4,\n \"circle-color\": [\n \"case\",\n [\"boolean\", [\"feature-state\", \"shown\"], false],\n columnColor,\n columnBaseColor,\n ],\n \"circle-opacity\": [\n \"case\",\n [\"boolean\", [\"feature-state\", \"shown\"], false],\n 0.8,\n [\"boolean\", [\"feature-state\", \"hover\"], false],\n 0.3,\n 0.1,\n ],\n },\n filter: [\"==\", \"$type\", \"Point\"],\n },\n ],\n };\n\n if (!patterns) {\n return baseStyle;\n }\n\n const patternStyle: StyleFragment = {\n sources: {\n \"column-patterns\": buildGeoJSONSource(),\n },\n layers: [\n {\n id: \"columns-fill-pattern\",\n type: \"fill\",\n source: \"column-patterns\",\n paint: {\n \"fill-pattern\": [\"get\", \"pattern\"],\n \"fill-opacity\": 1,\n },\n },\n ],\n };\n\n return mergeStyles(baseStyle, patternStyle);\n}\n"],"names":[],"mappings":";;;;;;;;;;AA4BO,SAAS,uBAAuB,OAA0B;AAC/D,QAAM,EAAE,MAAM,UAAU,MAAM,WAAW,UAAU;AACnD,QAAM,UAAU,eAAA;AAEhB;AAAA,IACE,CAAC,QAAQ;AACP,UAAI,CAAC,SAAU;AACf,6BAAuB,KAAK,EAAE,SAAS,MAAA,CAAO;AAAA,IAChD;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGX,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI;AACJ,QAAI,OAAO,SAAS,MAAM,OAAO,GAAG;AAClC,gBAAU,CAAC,MAAM,OAAiB;AAAA,IACpC,WAAW,CAAC,MAAM,QAAQ,MAAM,OAAO,GAAG;AACxC,gBAAU;AAAA,IACZ;AAEA,UAAM,gBACJ,WAAW,QAAQ,QAAQ,SAAS,IAAI,QAAQ,CAAC,IAAI;AAEvD,WAAO;AAAA,MACL,YAAY,OAAO,UAAU;AAAA,MAC7B,SAAS,OAAO,UAAU;AAAA,MAC1B,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb,GAAG,CAAC,MAAM,SAAS,MAAM,OAAO,CAAC;AAEjC,QAAM,QAAoB,aAAa,UAAU,MAAM;AACvD,QAAM,UAAU,qBAAqB,OAAO,SAAS,KAAK;AAG1D;AAAA,IACE,CAAC,QAAQ;AACP,UAAI,WAAW,MAAM;AACnB;AAAA,MACF;AACA,YAAM,OAA0B;AAAA,QAC9B,MAAM;AAAA,QACN,UAAU;AAAA,MAAA;AAEZ,iBAAW,KAAK,WAAW,IAAI;AAAA,IACjC;AAAA,IACA,CAAC,OAAO;AAAA,EAAA;AAGV;AAAA,IACE,CAAC,QAAQ;AACP,UAAI,SAAS,QAAQ,WAAW,QAAQ,WAAW,MAAM;AACvD;AAAA,MACF;AAEA,YAAM,uBAAuB,CAAC,SAAuC;AACnE,eAAO,SAAS,IAAI,KAAK,OAAO,GAAG,SAAS;AAAA,MAC9C;AAEA,YAAM,WAAW,iBAAiB,OAAO,oBAAoB;AAC7D,6BAAuB,KAAK,UAAU,OAAO;AAC7C,UAAI,UAAU;AACZ;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,EACA,KAAK,MAAM;AAAA,QAAC,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,OAAO,SAAS,SAAS,QAAQ;AAAA,EAAA;AAGpC,SAAO;AACT;AAEA,SAAS,uBACP,KACA,UACA,SACA;AAEA,aAAW,UAAU,SAAS;AAC5B,UAAM,SAAS,OAAO,WAAW;AACjC,UAAM,OAAO,SAAS,IAAI,OAAO,MAAM,CAAC;AACxC,UAAM,QAAQ,MAAM;AACpB,QAAI;AAAA,MACF,EAAE,QAAQ,WAAW,IAAI,OAAA;AAAA,MACzB;AAAA,QACE;AAAA,QACA,OAAO,SAAS;AAAA,MAAA;AAAA,IAClB;AAAA,EAEJ;AACF;AAEA,eAAe,2BACb,KACA,UACA,SACA,UACA;AAGA,QAAM,mBAAmB,CAAA;AACzB,QAAM,iCAAiB,IAAA;AAEvB,aAAW,UAAU,SAAS;AAC5B,UAAM,SAAS,OAAO,WAAW;AACjC,UAAM,OAAO,SAAS,IAAI,OAAO,MAAM,CAAC;AACxC,QAAI,QAAQ,KAAM;AAClB,UAAM,UAAU,eAAe,MAAM,OAAO,QAAQ;AACpD,QAAI,WAAW,KAAM;AAErB,qBAAiB,KAAK;AAAA,MACpB,MAAM;AAAA,MACN,UAAU,OAAO;AAAA,MACjB,YAAY;AAAA,QACV;AAAA,QACA;AAAA,MAAA;AAAA,IACF,CACD;AACD,eAAW,IAAI,OAAO;AAAA,EACxB;AAEA,QAAM,iBAAiB,WAAW,OAAA,EAAS,OAAO,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC,CAAC;AAEzE,QAAM,SAAS,OAAO,cAAc;AAClC,QAAI;AACF,YAAM,eAAe,KAAK,WAAW,EAAE,YAAY,IAAI;AAAA,IACzD,SAAS,GAAG;AAAA,IAAC;AAAA,EACf;AAEA,QAAM,KAAK,gBAAgB,QAAQ,EAAE,aAAa,GAAG;AAIrD,QAAM,cAAiC;AAAA,IACrC,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAEZ,aAAW,KAAK,mBAAmB,WAAW;AAChD;AAEA,MAAM,mCAAmB,IAAA;AAEzB,SAAS,iBAAiB,OAAuB;AAE/C,MAAI,aAAa,IAAI,KAAK,GAAG;AAC3B,WAAO,aAAa,IAAI,KAAK;AAAA,EAC/B;AACA,QAAM,KAAK,cAAc,KAAK,EAAE,IAAI,SAAS,GAAG,EAAE,IAAI,SAAS,GAAG,EAAE,IAAA;AACpE,eAAa,IAAI,OAAO,EAAE;AAC1B,SAAO;AACT;AAWA,SAAS,iBACP,OACA,UAC+B;AAE/B,QAAM,oCAA6C,IAAA;AACnD,aAAW,QAAQ,OAAO;AACxB,UAAM,SAAS,OAAO,KAAK,MAAM;AACjC,QAAI,CAAC,cAAc,IAAI,MAAM,GAAG;AAC9B,oBAAc,IAAI,QAAQ,CAAC,IAAI,CAAC;AAAA,IAClC,OAAO;AACL,oBAAc,IAAI,QAAQ,CAAC,GAAG,cAAc,IAAI,MAAM,GAAG,IAAI,CAAC;AAAA,IAChE;AAAA,EACF;AAGA,QAAM,0BAAU,IAAA;AAChB,aAAW,CAAC,QAAQ,QAAQ,KAAK,cAAc,WAAW;AACxD,UAAM,QAAQ,mBAAmB,SAAS,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAC5D,QAAI,IAAI,QAAQ;AAAA,MACd;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,OAAO,qBAAqB,OAAO,QAAQ;AAAA,IAAA,CAC5C;AAAA,EACH;AAEA,SAAO;AACT;AAEA,SAAS,eACP,OACA,UACe;AACf,QAAM,cAAc,mCAAmC,KAAK;AAC5D,MAAI,eAAe,KAAM,QAAO;AAChC,MAAI,EAAE,WAAW,KAAA,IAAS;AAC1B,QAAM,QAAQ,iBAAiB,SAAS,IAAI,CAAC;AAC7C,SAAO,QAAQ,SAAS,IAAI,KAAK;AACnC;AAOO,SAAS,gBAAgB,OAA0B,IAAmB;AAC3E,QAAM,EAAE,QAAQ,MAAM,WAAW,UAAU;AAE3C,MAAI,kBACF,SAAS,eAAe,uBAAuB,OAAO;AAC5B,iBAAe,qBAAqB,QAAQ;AAIxE,MAAI,cAAmB;AAAA,IACrB;AAAA,IACA,CAAC,iBAAiB,OAAO;AAAA,IACzB,CAAC,OAAO,OAAO;AAAA,IACf;AAAA,EAAA;AAGF,QAAM,YAA2B;AAAA,IAC/B,SAAS;AAAA,MACP,SAAS,mBAAA;AAAA,IAAmB;AAAA,IAE9B,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,kBAAkB;AAAA,YAChB;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QAEF,QAAQ,CAAC,MAAM,SAAS,OAAO;AAAA,MAAA;AAAA,IACjC;AAAA,EACF;AAGF,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM,eAA8B;AAAA,IAClC,SAAS;AAAA,MACP,mBAAmB,mBAAA;AAAA,IAAmB;AAAA,IAExC,QAAQ;AAAA,MACN;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,gBAAgB,CAAC,OAAO,SAAS;AAAA,UACjC,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAGF,SAAO,YAAY,WAAW,YAAY;AAC5C;"}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { getCSSVariable } from "@macrostrat/color-utils";
|
|
2
|
-
import { buildGeoJSONSource } from "@macrostrat/mapbox-utils";
|
|
3
|
-
import type { Style } from "mapbox-gl";
|
|
4
|
-
|
|
5
|
-
export function buildColumnsStyle(color: string): Style {
|
|
6
|
-
let columnColor: any =
|
|
7
|
-
color ?? getCSSVariable("--text-subtle-color", "black");
|
|
8
|
-
const columnSelectedColor = getCSSVariable("--selection-color", "purple");
|
|
9
|
-
|
|
10
|
-
// If color is in the feature state or geojson properties, use that as second choice
|
|
11
|
-
|
|
12
|
-
columnColor = [
|
|
13
|
-
"coalesce",
|
|
14
|
-
["feature-state", "color"],
|
|
15
|
-
["get", "color"],
|
|
16
|
-
columnColor,
|
|
17
|
-
];
|
|
18
|
-
|
|
19
|
-
return {
|
|
20
|
-
sources: {
|
|
21
|
-
columns: buildGeoJSONSource(),
|
|
22
|
-
},
|
|
23
|
-
version: 8,
|
|
24
|
-
layers: [
|
|
25
|
-
{
|
|
26
|
-
id: "columns-fill",
|
|
27
|
-
type: "fill",
|
|
28
|
-
source: "columns",
|
|
29
|
-
paint: {
|
|
30
|
-
"fill-color": columnColor,
|
|
31
|
-
"fill-opacity": [
|
|
32
|
-
"case",
|
|
33
|
-
["boolean", ["feature-state", "selected"], false],
|
|
34
|
-
0.5,
|
|
35
|
-
["boolean", ["feature-state", "hover"], false],
|
|
36
|
-
0.3,
|
|
37
|
-
0.1,
|
|
38
|
-
],
|
|
39
|
-
},
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
id: "columns-line",
|
|
43
|
-
type: "line",
|
|
44
|
-
source: "columns",
|
|
45
|
-
paint: {
|
|
46
|
-
"line-color": columnColor,
|
|
47
|
-
"line-width": 2,
|
|
48
|
-
"line-opacity": 0.5,
|
|
49
|
-
},
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
id: "columns-points",
|
|
53
|
-
type: "circle",
|
|
54
|
-
source: "columns",
|
|
55
|
-
paint: {
|
|
56
|
-
"circle-radius": 4,
|
|
57
|
-
"circle-color": [
|
|
58
|
-
"case",
|
|
59
|
-
["boolean", ["feature-state", "selected"], false],
|
|
60
|
-
columnSelectedColor,
|
|
61
|
-
columnColor,
|
|
62
|
-
],
|
|
63
|
-
"circle-opacity": [
|
|
64
|
-
"case",
|
|
65
|
-
["boolean", ["feature-state", "selected"], false],
|
|
66
|
-
1,
|
|
67
|
-
["boolean", ["feature-state", "hover"], false],
|
|
68
|
-
0.7,
|
|
69
|
-
0.5,
|
|
70
|
-
],
|
|
71
|
-
},
|
|
72
|
-
filter: ["==", "$type", "Point"],
|
|
73
|
-
},
|
|
74
|
-
],
|
|
75
|
-
};
|
|
76
|
-
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|