@macrostrat/map-interface 0.1.0 → 0.2.0
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/dist/index.cjs +112 -99
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +51 -34
- package/dist/index.css.map +1 -1
- package/dist/index.js +112 -99
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +12 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +3 -2
- package/src/container.ts +17 -10
- package/src/dev/vector-tile-features.ts +22 -18
- package/src/expansion-panel/index.ts +1 -0
- package/src/expansion-panel/main.module.sass +3 -3
- package/src/location-panel/main.module.sass +3 -0
- package/src/main.module.sass +87 -82
- package/src/map-view/index.ts +49 -27
- package/src/map-view/main.module.sass +7 -0
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;ACGA,cAAc;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,sBAAsB,MAAM,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,sBAAsB,MAAM,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,mBAA0B;IACxB,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB,CAAC;AWXF,8BAA8B,EAC5B,SAAiB,EACjB,OAAO,EACP,MAAc,EACd,IAAa,GACd;;;;;CAAA,0FAQA;AAED,iCAAiC,KAAK,KAAA,0FAIrC;AAED,mBAAmB,MAAM,SAAS,GAAG,MAAM,aAAa,CAAC;AAEzD,+BAA+B,EAC7B,SAAS,EACT,QAAQ,EACR,aAAoB,GACrB,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,aAAa,CAAC,EAAE,WAAW,CAAC;CAC7B;;wDAWA;kBmB0GQ,kBAAkB;;;;;;;;;kBwB9ClB,iBAAiB;;;AGxG1B,8BAA8B,KAAK,KAAA,0FAOlC;AAED,4BAA4B,KAAK,KAAA,0FAQhC;AAED;IACE,mBAAmB;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,uDAAuD;IACvD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,qCAAqC;IACrC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CACrD;AAED,6BAA6B,KAAK,EAAE,WAAW;;wDAmC9C;AAED,0BAA0B,KAAK,KAAA;;wDAY9B;AE/ED,oCAAoC,KAAK,KAAA,0FAGxC;AAED,8BAA8B,KAAK,KAAA,0FAOlC;ACjBD;IACE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,+BACE,SAAS,EAAE,MAAM,GAAG,MAAM,EAC1B,MAAM,GAAE,WAAkB;;;;;;;;;;;;;;;;GA2B3B;AA8CD,6BAA6B,WAAW,GAAG;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,oCACE,SAAS,EAAE,SAAS,KAAK,GAAG,MAAM,EAClC,YAAY,GAAE,SAAS,KAAK,GAAG,MAAM,GAAG,IAAW,EACnD,MAAM,GAAE,qBAA0B,2BAwBnC;AC1ED,4HAQC;AClCD,uHAEC;AAMD,OAAO,MAAM,iHACgE,CAAC;
|
|
1
|
+
{"mappings":"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","sources":["packages/map-interface/mapbox-utils/src/preprocess-styles.ts","packages/map-interface/mapbox-utils/src/position.ts","packages/map-interface/mapbox-utils/src/view-info.ts","packages/map-interface/mapbox-utils/src/labels.ts","packages/map-interface/mapbox-utils/src/index.ts","packages/map-interface/mapbox-react/src/context.ts","packages/map-interface/mapbox-react/src/hooks.ts","packages/map-interface/mapbox-react/src/controls.ts","packages/map-interface/mapbox-react/src/terrain.ts","packages/map-interface/mapbox-react/src/debugger.ts","packages/map-interface/mapbox-react/src/focus-state.ts","packages/map-interface/mapbox-react/src/index.ts","packages/map-interface/src/src/context-panel/index.ts","packages/map-interface/ui-components/src/api/types.ts","packages/map-interface/ui-components/src/util/query-string.ts","packages/map-interface/ui-components/src/util/state-hooks.ts","packages/map-interface/ui-components/src/util/layout-hooks.ts","packages/map-interface/ui-components/src/util/local-storage.ts","packages/map-interface/ui-components/src/util/json-view.ts","packages/map-interface/ui-components/src/util/scroll-helpers.ts","packages/map-interface/ui-components/src/util/migration-helpers.ts","packages/map-interface/ui-components/src/util/box-model.ts","packages/map-interface/ui-components/src/util/event-hooks.ts","packages/map-interface/ui-components/src/util/flexbox.ts","packages/map-interface/ui-components/src/util/index.ts","packages/map-interface/ui-components/src/api/provider.ts","packages/map-interface/ui-components/src/api/data-provider.ts","packages/map-interface/ui-components/src/api/indexing.ts","packages/map-interface/ui-components/src/api/frontend.ts","packages/map-interface/ui-components/src/api/paged.ts","packages/map-interface/ui-components/src/api/index.ts","packages/map-interface/ui-components/src/infinite-scroll.ts","packages/map-interface/ui-components/src/buttons/delete-button.ts","packages/map-interface/ui-components/src/buttons/index.ts","packages/map-interface/ui-components/src/collapse-panel/index.ts","packages/map-interface/ui-components/src/link-card.ts","packages/map-interface/ui-components/src/file-upload/index.ts","packages/map-interface/ui-components/src/image.ts","packages/map-interface/ui-components/src/model-editor.ts","packages/map-interface/ui-components/src/toaster.ts","packages/map-interface/ui-components/src/citations/author-list.ts","packages/map-interface/ui-components/src/citations/index.ts","packages/map-interface/ui-components/src/geodeepdive/reference-card.ts","packages/map-interface/ui-components/src/geodeepdive/index.ts","packages/map-interface/ui-components/src/text.ts","packages/map-interface/ui-components/src/dark-mode.ts","packages/map-interface/ui-components/src/form-controls/slider.ts","packages/map-interface/ui-components/src/form-controls/index.ts","packages/map-interface/ui-components/src/settings/index.ts","packages/map-interface/ui-components/src/error-boundary.ts","packages/map-interface/ui-components/src/patterns/composite-image.ts","packages/map-interface/ui-components/src/patterns/index.ts","packages/map-interface/ui-components/src/collapse-card.ts","packages/map-interface/ui-components/src/modal-panel/draggable-overlay.ts","packages/map-interface/ui-components/src/modal-panel/index.ts","packages/map-interface/ui-components/src/page-layouts/index.ts","packages/map-interface/ui-components/src/index.ts","packages/map-interface/src/src/location-info/utils.ts","packages/map-interface/src/src/location-info/index.ts","packages/map-interface/src/src/location-panel/header.ts","packages/map-interface/src/src/location-panel/index.ts","packages/map-interface/src/src/dev/xray.ts","packages/map-interface/src/src/controls.ts","packages/map-interface/src/src/container.ts","packages/map-interface/src/src/utils.ts","packages/map-interface/src/src/helpers.ts","packages/map-interface/src/src/map-view/terrain.ts","packages/map-interface/src/src/map-view/index.ts","packages/map-interface/src/src/dev/tile-extent.ts","packages/map-interface/src/src/expansion-panel/headers.ts","packages/map-interface/src/src/expansion-panel/index.ts","packages/map-interface/src/src/dev/vector-tile-features.ts","packages/map-interface/src/src/dev/map-page.ts","packages/map-interface/src/src/dev/index.ts","packages/map-interface/src/src/index.ts","packages/map-interface/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"export * from \"./context-panel\";\nexport * from \"./location-panel\";\nexport * from \"./dev\";\nexport * from \"./container\";\nexport * from \"./map-view\";\nexport * from \"./controls\";\nexport * from \"./helpers\";\nexport * from \"./utils\";\nexport * from \"./location-info\";\nexport * from \"./expansion-panel\";\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@macrostrat/map-interface",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Map interface for Macrostrat",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"style": "dist/index.css",
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@macrostrat/hyper": "^2.2.1",
|
|
12
|
-
"@macrostrat/mapbox-react": "^2.0
|
|
12
|
+
"@macrostrat/mapbox-react": "^2.1.0",
|
|
13
13
|
"@macrostrat/mapbox-utils": "^1.2.1",
|
|
14
14
|
"@macrostrat/ui-components": "^3.0.0",
|
|
15
15
|
"@mapbox/tilebelt": "^1.0.2",
|
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
"build": "parcel build"
|
|
34
34
|
},
|
|
35
35
|
"exports": {
|
|
36
|
+
"typescript": "./src/index.ts",
|
|
36
37
|
".": {
|
|
37
38
|
"import": "./dist/index.js",
|
|
38
39
|
"require": "./dist/index.cjs"
|
package/src/container.ts
CHANGED
|
@@ -6,7 +6,7 @@ import { useTransition } from "transition-hook";
|
|
|
6
6
|
import {
|
|
7
7
|
MapboxMapProvider,
|
|
8
8
|
ZoomControl,
|
|
9
|
-
|
|
9
|
+
useMapPosition,
|
|
10
10
|
} from "@macrostrat/mapbox-react";
|
|
11
11
|
import { ToasterContext } from "@macrostrat/ui-components";
|
|
12
12
|
import { MapBottomControls } from "./controls";
|
|
@@ -47,6 +47,7 @@ function _MapAreaContainer({
|
|
|
47
47
|
children?: AnyElement;
|
|
48
48
|
mapControls?: AnyElement;
|
|
49
49
|
contextPanel?: AnyElement;
|
|
50
|
+
contextStack?: AnyElement;
|
|
50
51
|
mainPanel?: AnyElement;
|
|
51
52
|
detailPanel?: AnyElement;
|
|
52
53
|
bottomPanel?: AnyElement;
|
|
@@ -70,12 +71,10 @@ function _MapAreaContainer({
|
|
|
70
71
|
- These styles are doubly applied so we can have both namespaced and
|
|
71
72
|
outside-accessible styles for each case.
|
|
72
73
|
*/
|
|
73
|
-
const
|
|
74
|
+
const mainUIClassName = classNames(
|
|
74
75
|
{
|
|
75
|
-
searching: false,
|
|
76
76
|
"detail-panel-open": _detailPanelOpen,
|
|
77
|
-
"map-context-open":
|
|
78
|
-
"fit-viewport": fitViewport,
|
|
77
|
+
"map-context-open": contextPanelOpen,
|
|
79
78
|
},
|
|
80
79
|
`context-panel-${contextPanelTrans.stage}`,
|
|
81
80
|
`map-context-${contextPanelTrans.stage}`,
|
|
@@ -85,12 +84,20 @@ function _MapAreaContainer({
|
|
|
85
84
|
|
|
86
85
|
return h(
|
|
87
86
|
MapStyledContainer,
|
|
88
|
-
{
|
|
87
|
+
{
|
|
88
|
+
className: classNames("map-page", className, {
|
|
89
|
+
"fit-viewport": fitViewport,
|
|
90
|
+
}),
|
|
91
|
+
mapPosition,
|
|
92
|
+
},
|
|
89
93
|
[
|
|
90
|
-
h("div.main-ui", { className:
|
|
91
|
-
h("div.context-stack",
|
|
94
|
+
h("div.main-ui", { className: mainUIClassName, ...rest }, [
|
|
95
|
+
h("div.context-stack", [
|
|
92
96
|
navbar,
|
|
93
|
-
h
|
|
97
|
+
h("div.context-panel-holder", [
|
|
98
|
+
h.if(contextPanelTrans.shouldMount)([contextPanel]),
|
|
99
|
+
]),
|
|
100
|
+
h("div.spacer"),
|
|
94
101
|
]),
|
|
95
102
|
//h(MapView),
|
|
96
103
|
children ?? mainPanel,
|
|
@@ -119,7 +126,7 @@ interface MapContainerProps {
|
|
|
119
126
|
}
|
|
120
127
|
|
|
121
128
|
export function MapStyledContainer({ className, children }: MapContainerProps) {
|
|
122
|
-
const
|
|
129
|
+
const mapPosition = useMapPosition();
|
|
123
130
|
if (mapPosition != null) {
|
|
124
131
|
const { mapIsRotated, mapUse3D, mapIsGlobal } = mapViewInfo(mapPosition);
|
|
125
132
|
className = classNames(className, {
|
|
@@ -3,30 +3,27 @@ import { useMapRef, useMapStatus } from "@macrostrat/mapbox-react";
|
|
|
3
3
|
import mapboxgl from "mapbox-gl";
|
|
4
4
|
import hyper from "@macrostrat/hyper";
|
|
5
5
|
import styles from "./main.module.sass";
|
|
6
|
-
import { useEffect, useState
|
|
7
|
-
import { JSONView } from "@macrostrat/ui-components";
|
|
6
|
+
import { useEffect, useState } from "react";
|
|
7
|
+
import { JSONView, usePrevious } from "@macrostrat/ui-components";
|
|
8
8
|
import { group } from "d3-array";
|
|
9
9
|
import { ExpansionPanel } from "../expansion-panel";
|
|
10
10
|
|
|
11
11
|
const h = hyper.styled(styles);
|
|
12
12
|
|
|
13
|
-
function
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
export function FeatureProperties({ data, ...rest }) {
|
|
14
|
+
return h("div.feature-properties", [
|
|
15
|
+
h(JSONView, {
|
|
16
|
+
data,
|
|
17
|
+
hideRoot: true,
|
|
18
|
+
...rest,
|
|
19
|
+
}),
|
|
20
|
+
]);
|
|
19
21
|
}
|
|
20
22
|
|
|
21
23
|
export function FeatureRecord({ feature }) {
|
|
22
24
|
const props = feature.properties;
|
|
23
25
|
return h("div.feature-record", [
|
|
24
|
-
h.if(Object.keys(props).length > 0)(
|
|
25
|
-
h(JSONView, {
|
|
26
|
-
data: props,
|
|
27
|
-
hideRoot: true,
|
|
28
|
-
}),
|
|
29
|
-
]),
|
|
26
|
+
h.if(Object.keys(props).length > 0)(FeatureProperties, { data: props }),
|
|
30
27
|
]);
|
|
31
28
|
}
|
|
32
29
|
|
|
@@ -182,7 +179,7 @@ export function FeaturePanel({
|
|
|
182
179
|
ExpansionPanel,
|
|
183
180
|
{ title, className: "basemap-features", expanded: focusedSource == null },
|
|
184
181
|
[
|
|
185
|
-
h(
|
|
182
|
+
h(FeatureGroups, {
|
|
186
183
|
features: filteredFeatures,
|
|
187
184
|
}),
|
|
188
185
|
]
|
|
@@ -190,19 +187,26 @@ export function FeaturePanel({
|
|
|
190
187
|
]);
|
|
191
188
|
}
|
|
192
189
|
|
|
193
|
-
function
|
|
190
|
+
function FeatureGroups({ features }) {
|
|
194
191
|
/** Group features by source and sourceLayer */
|
|
195
192
|
if (features == null) return null;
|
|
196
193
|
|
|
197
194
|
const groups = group(features, (d) => `${d.source} - ${d.sourceLayer}`);
|
|
198
195
|
|
|
199
196
|
return h(
|
|
200
|
-
"div.
|
|
197
|
+
"div.feature-groups",
|
|
201
198
|
Array.from(groups).map(([key, features]) => {
|
|
202
199
|
return h("div.feature-group", [
|
|
203
200
|
h(FeatureHeader, { feature: features[0] }),
|
|
204
|
-
|
|
201
|
+
h(Features, { features }),
|
|
205
202
|
]);
|
|
206
203
|
})
|
|
207
204
|
);
|
|
208
205
|
}
|
|
206
|
+
|
|
207
|
+
export function Features({ features }) {
|
|
208
|
+
return h(
|
|
209
|
+
"div.features",
|
|
210
|
+
features.map((feature, i) => h(FeatureRecord, { key: i, feature }))
|
|
211
|
+
);
|
|
212
|
+
}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
|
|
2
2
|
.panel-subhead
|
|
3
3
|
padding: 0.2em var(--box-horizontal-padding)
|
|
4
|
-
border-top: 1px solid var(--
|
|
5
|
-
border-bottom: 1px solid var(--
|
|
4
|
+
border-top: 1px solid var(--panel-rule-color)
|
|
5
|
+
border-bottom: 1px solid var(--panel-rule-color)
|
|
6
6
|
background-color: var(--accent-color)
|
|
7
7
|
display: flex
|
|
8
8
|
flex-direction: row
|
|
9
9
|
align-items: center
|
|
10
10
|
z-index: 1
|
|
11
11
|
gap: var(--box-horizontal-padding)
|
|
12
|
-
top:
|
|
12
|
+
top: -1px
|
|
13
13
|
position: sticky
|
|
14
14
|
h1, h2, h3, h4
|
|
15
15
|
font-family: Montserrat,sans-serif
|
package/src/main.module.sass
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
position: relative
|
|
5
5
|
width: 100%
|
|
6
6
|
height: 100%
|
|
7
|
+
overflow: hidden
|
|
7
8
|
&.fit-viewport
|
|
8
9
|
height: 100vh
|
|
9
10
|
width: 100vw
|
|
@@ -43,6 +44,7 @@
|
|
|
43
44
|
.panel-card
|
|
44
45
|
padding: 10px
|
|
45
46
|
background-color: var(--panel-background-color)
|
|
47
|
+
overflow: hidden
|
|
46
48
|
|
|
47
49
|
& >:last-child
|
|
48
50
|
margin-bottom: 0
|
|
@@ -148,66 +150,60 @@
|
|
|
148
150
|
& hr
|
|
149
151
|
width: 100%
|
|
150
152
|
|
|
151
|
-
:global
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
left: 0
|
|
156
|
-
right: 0
|
|
153
|
+
:global
|
|
154
|
+
.mapbox-map
|
|
155
|
+
.mapbox-compass, .mapbox-3d
|
|
156
|
+
display: none
|
|
157
157
|
|
|
158
|
-
|
|
159
|
-
:
|
|
160
|
-
display: none
|
|
161
|
-
|
|
162
|
-
:global .mapboxgl-ctrl.mapbox-3d.mapbox-control
|
|
163
|
-
width: unset
|
|
158
|
+
.mapboxgl-ctrl.mapbox-3d.mapbox-control
|
|
159
|
+
width: unset
|
|
164
160
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
161
|
+
.mapboxgl-ctrl.mapbox-3d.mapbox-control button
|
|
162
|
+
width: unset
|
|
163
|
+
padding-inline: 4px
|
|
168
164
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
165
|
+
.mapboxgl-canvas-container
|
|
166
|
+
width: 100%
|
|
167
|
+
height: 100%
|
|
172
168
|
|
|
173
|
-
|
|
174
|
-
|
|
169
|
+
.mapboxgl-ctrl.mapboxgl-ctrl-attrib
|
|
170
|
+
background-color: var(--translucent-panel-background-color) !important
|
|
175
171
|
|
|
176
|
-
|
|
177
|
-
|
|
172
|
+
.mapboxgl-ctrl.mapboxgl-ctrl-attrib a
|
|
173
|
+
color: var(--text-color)
|
|
178
174
|
|
|
179
|
-
|
|
180
|
-
|
|
175
|
+
.mapboxgl-marker svg path
|
|
176
|
+
fill: var(--panel-background-color) !important
|
|
181
177
|
|
|
182
|
-
|
|
183
|
-
|
|
178
|
+
.mapboxgl-marker svg circle
|
|
179
|
+
fill: var(--secondary-color) !important
|
|
184
180
|
|
|
185
|
-
|
|
186
|
-
|
|
181
|
+
.mapbox-control.mapbox-zoom
|
|
182
|
+
background: var(--translucent-panel-background-inner)
|
|
187
183
|
|
|
188
|
-
|
|
189
|
-
|
|
184
|
+
.mapbox-control.mapbox-zoom svg
|
|
185
|
+
fill: var(--text-color) !important
|
|
190
186
|
|
|
191
|
-
|
|
192
|
-
|
|
187
|
+
.mapboxgl-ctrl-logo
|
|
188
|
+
transform: scale(0.9) translate(-8px, 2px)
|
|
193
189
|
|
|
194
|
-
|
|
195
|
-
|
|
190
|
+
.bp4-dark .mapboxgl-ctrl-logo
|
|
191
|
+
filter: invert(100%)
|
|
196
192
|
|
|
197
|
-
|
|
198
|
-
|
|
193
|
+
.mapboxgl-ctrl-group button + button
|
|
194
|
+
border-top: 1px solid var(--panel-rule-color) !important
|
|
199
195
|
|
|
200
|
-
|
|
201
|
-
|
|
196
|
+
.bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon
|
|
197
|
+
filter: invert(40%)
|
|
202
198
|
|
|
203
|
-
|
|
204
|
-
|
|
199
|
+
.bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover
|
|
200
|
+
filter: invert(50%)
|
|
205
201
|
|
|
206
|
-
|
|
207
|
-
|
|
202
|
+
.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon
|
|
203
|
+
filter: invert(40%)
|
|
208
204
|
|
|
209
|
-
|
|
210
|
-
|
|
205
|
+
.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon:hover
|
|
206
|
+
filter: invert(50%)
|
|
211
207
|
|
|
212
208
|
.detail-stack
|
|
213
209
|
position: relative
|
|
@@ -284,9 +280,8 @@
|
|
|
284
280
|
|
|
285
281
|
.infodrawer-stack
|
|
286
282
|
max-height: 70%
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
max-height: 0
|
|
283
|
+
&:global(.exit-active)
|
|
284
|
+
max-height: 0
|
|
290
285
|
|
|
291
286
|
:global(.mapbox-control.mapbox-zoom)
|
|
292
287
|
display: none
|
|
@@ -311,27 +306,27 @@
|
|
|
311
306
|
&>*:last-child
|
|
312
307
|
margin-right: 0
|
|
313
308
|
|
|
314
|
-
&.searching .context-stack
|
|
315
|
-
width: 24em
|
|
316
|
-
|
|
317
309
|
.context-stack
|
|
318
310
|
max-width: 34em
|
|
319
311
|
min-width: 14em
|
|
320
|
-
width: 16em
|
|
321
312
|
transition: width 300ms ease
|
|
322
313
|
padding-bottom: 0.5em
|
|
314
|
+
width: var(--map-context-stack-width, 16em)
|
|
315
|
+
margin-right: 0.5em
|
|
316
|
+
display: flex
|
|
317
|
+
flex-direction: column
|
|
323
318
|
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
margin-right: 0.5em
|
|
319
|
+
&>.spacer
|
|
320
|
+
flex-grow: 0
|
|
327
321
|
|
|
328
|
-
.context-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
322
|
+
.context-panel-holder
|
|
323
|
+
min-height: 0
|
|
324
|
+
position: relative
|
|
325
|
+
&>div
|
|
326
|
+
max-height: 100%
|
|
332
327
|
|
|
333
328
|
.main-ui.detail-panel-open .detail-stack
|
|
334
|
-
width: 30em
|
|
329
|
+
width: var(--map-detail-stack-width, 30em)
|
|
335
330
|
|
|
336
331
|
.detail-stack
|
|
337
332
|
width: 30em
|
|
@@ -339,24 +334,25 @@
|
|
|
339
334
|
display: flex
|
|
340
335
|
flex-direction: column
|
|
341
336
|
|
|
342
|
-
.context-stack,
|
|
343
|
-
.detail-stack
|
|
337
|
+
.context-stack, .detail-stack
|
|
344
338
|
pointer-events: none
|
|
345
339
|
z-index: 100
|
|
346
340
|
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
margin-bottom: 0.5em
|
|
341
|
+
&>div
|
|
342
|
+
pointer-events: all
|
|
343
|
+
margin-bottom: 0.5em
|
|
351
344
|
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
margin-bottom: 0
|
|
345
|
+
&:last-child
|
|
346
|
+
margin-bottom: 0
|
|
355
347
|
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
pointer-events: none
|
|
348
|
+
&.spacer
|
|
349
|
+
pointer-events: none
|
|
359
350
|
|
|
351
|
+
.context-stack .spacer
|
|
352
|
+
min-height: 1em
|
|
353
|
+
|
|
354
|
+
/* Make map fill page rather than containing div,
|
|
355
|
+
by unsetting map position */
|
|
360
356
|
.map-view-container
|
|
361
357
|
position: unset
|
|
362
358
|
|
|
@@ -372,17 +368,26 @@
|
|
|
372
368
|
.main-ui.detail-panel-leave .detail-panel
|
|
373
369
|
opacity: 0
|
|
374
370
|
|
|
375
|
-
.main-ui .context-panel
|
|
376
|
-
|
|
371
|
+
.main-ui .context-panel-holder
|
|
372
|
+
pointer-events: none
|
|
373
|
+
flex: 1
|
|
374
|
+
&>div
|
|
375
|
+
pointer-events: all
|
|
376
|
+
transition: opacity 0.8s ease //, height 0.8s ease, max-height 0.8s ease, padding 0.8s ease
|
|
377
377
|
|
|
378
|
-
.main-ui.context-panel-from .context-panel
|
|
378
|
+
.main-ui.context-panel-from .context-panel-holder>div
|
|
379
379
|
opacity: 0
|
|
380
380
|
|
|
381
|
-
.main-ui.context-panel-enter .context-panel
|
|
381
|
+
.main-ui.context-panel-enter .context-panel-holder>div
|
|
382
382
|
opacity: 1
|
|
383
383
|
|
|
384
|
-
.main-ui.context-panel-leave .context-panel
|
|
384
|
+
.main-ui.context-panel-leave .context-panel-holder>div
|
|
385
385
|
opacity: 0
|
|
386
|
+
// The max-height transition is a bit jerky because of panel padding.
|
|
387
|
+
// We could probably fix this by pulling the panel container itself into
|
|
388
|
+
// the class.
|
|
389
|
+
//max-height: 0
|
|
390
|
+
//padding: 0
|
|
386
391
|
|
|
387
392
|
@media only screen and (max-width: 768px)
|
|
388
393
|
.main-ui .detail-stack
|
|
@@ -396,16 +401,16 @@
|
|
|
396
401
|
max-height: 0
|
|
397
402
|
max-height: 0
|
|
398
403
|
|
|
399
|
-
.main-ui .context-panel
|
|
400
|
-
transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease
|
|
401
|
-
|
|
402
404
|
.main-ui.context-panel-from .context-panel
|
|
403
405
|
max-height: 0
|
|
404
406
|
height: 0
|
|
405
407
|
|
|
406
|
-
.main-ui.context-panel-leave
|
|
407
|
-
|
|
408
|
-
|
|
408
|
+
.main-ui.context-panel-leave
|
|
409
|
+
.context-stack
|
|
410
|
+
.context-panel-holder
|
|
411
|
+
flex: 0
|
|
412
|
+
.spacer
|
|
413
|
+
flex: 1
|
|
409
414
|
|
|
410
415
|
// Shift UI around to center elements if we're in the global view
|
|
411
416
|
@media only screen and (min-width: 768px)
|
package/src/map-view/index.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import hyper from "@macrostrat/hyper";
|
|
2
2
|
import {
|
|
3
3
|
useMapRef,
|
|
4
|
-
useMapStatus,
|
|
5
4
|
useMapDispatch,
|
|
5
|
+
useMapPosition,
|
|
6
6
|
} from "@macrostrat/mapbox-react";
|
|
7
7
|
import {
|
|
8
8
|
mapViewInfo,
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
} from "@macrostrat/mapbox-utils";
|
|
12
12
|
import classNames from "classnames";
|
|
13
13
|
import mapboxgl from "mapbox-gl";
|
|
14
|
-
import { useEffect, useRef } from "react";
|
|
14
|
+
import { useEffect, useRef, useCallback } from "react";
|
|
15
15
|
import styles from "./main.module.sass";
|
|
16
16
|
import rootStyles from "../main.module.sass";
|
|
17
17
|
import { enable3DTerrain } from "./terrain";
|
|
@@ -21,6 +21,7 @@ import {
|
|
|
21
21
|
MapPaddingManager,
|
|
22
22
|
MapResizeManager,
|
|
23
23
|
} from "../helpers";
|
|
24
|
+
import "mapbox-gl/dist/mapbox-gl.css";
|
|
24
25
|
|
|
25
26
|
const h = hyper.styled({ ...styles, ...rootStyles });
|
|
26
27
|
|
|
@@ -36,9 +37,16 @@ export interface MapViewProps extends MapboxCoreOptions {
|
|
|
36
37
|
//style: mapboxgl.Style | string;
|
|
37
38
|
//transformRequest?: mapboxgl.TransformRequestFunction;
|
|
38
39
|
mapPosition?: MapPosition;
|
|
40
|
+
onMapLoad?: (map: mapboxgl.Map) => void;
|
|
39
41
|
}
|
|
40
42
|
|
|
41
|
-
|
|
43
|
+
export interface MapboxOptionsExt extends MapboxCoreOptions {
|
|
44
|
+
mapPosition?: MapPosition;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
function defaultInitializeMap(container, args: MapboxOptionsExt = {}) {
|
|
48
|
+
const { mapPosition, ...rest } = args;
|
|
49
|
+
|
|
42
50
|
const map = new mapboxgl.Map({
|
|
43
51
|
container,
|
|
44
52
|
maxZoom: 18,
|
|
@@ -47,9 +55,14 @@ function initializeMap(container, args: MapboxCoreOptions = {}) {
|
|
|
47
55
|
trackResize: true,
|
|
48
56
|
antialias: true,
|
|
49
57
|
optimizeForTerrain: true,
|
|
50
|
-
...
|
|
58
|
+
...rest,
|
|
51
59
|
});
|
|
52
60
|
|
|
61
|
+
// set initial map position
|
|
62
|
+
if (mapPosition != null) {
|
|
63
|
+
setMapPosition(map, mapPosition);
|
|
64
|
+
}
|
|
65
|
+
|
|
53
66
|
//setMapPosition(map, mapPosition);
|
|
54
67
|
return map;
|
|
55
68
|
}
|
|
@@ -67,12 +80,16 @@ export function MapView(props: MapViewProps) {
|
|
|
67
80
|
const {
|
|
68
81
|
enableTerrain = true,
|
|
69
82
|
style,
|
|
70
|
-
transformRequest,
|
|
71
83
|
mapPosition = defaultMapPosition,
|
|
84
|
+
initializeMap = defaultInitializeMap,
|
|
72
85
|
children,
|
|
73
86
|
accessToken,
|
|
74
87
|
infoMarkerPosition,
|
|
88
|
+
transformRequest,
|
|
75
89
|
projection,
|
|
90
|
+
onMapLoaded = null,
|
|
91
|
+
onStyleLoaded = null,
|
|
92
|
+
...rest
|
|
76
93
|
} = props;
|
|
77
94
|
if (enableTerrain) {
|
|
78
95
|
terrainSourceID ??= "mapbox-3d-dem";
|
|
@@ -90,35 +107,40 @@ export function MapView(props: MapViewProps) {
|
|
|
90
107
|
// Keep track of map position for reloads
|
|
91
108
|
|
|
92
109
|
useEffect(() => {
|
|
93
|
-
if (style == null
|
|
94
|
-
if (mapRef
|
|
95
|
-
|
|
110
|
+
if (style == null) return;
|
|
111
|
+
if (mapRef.current != null) {
|
|
112
|
+
console.log("Setting style", style);
|
|
113
|
+
mapRef.current.setStyle(style);
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
96
116
|
const map = initializeMap(ref.current, {
|
|
97
117
|
style,
|
|
98
|
-
transformRequest,
|
|
99
118
|
projection,
|
|
119
|
+
mapPosition,
|
|
120
|
+
...rest,
|
|
121
|
+
});
|
|
122
|
+
map.on("style.load", () => {
|
|
123
|
+
onStyleLoaded?.(map);
|
|
124
|
+
dispatch({ type: "set-style-loaded", payload: true });
|
|
100
125
|
});
|
|
126
|
+
onMapLoaded?.(map);
|
|
101
127
|
dispatch({ type: "set-map", payload: map });
|
|
102
|
-
|
|
103
|
-
return () => {
|
|
104
|
-
map.remove();
|
|
105
|
-
dispatch({ type: "set-map", payload: null });
|
|
106
|
-
};
|
|
107
|
-
}, [transformRequest, dispatch, style]);
|
|
128
|
+
}, [style]);
|
|
108
129
|
|
|
109
130
|
// Map style updating
|
|
110
|
-
useEffect(() => {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
}, [mapRef.current, style]);
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
131
|
+
// useEffect(() => {
|
|
132
|
+
// if (mapRef?.current == null || style == null) return;
|
|
133
|
+
// mapRef?.current?.setStyle(style);
|
|
134
|
+
// }, [mapRef.current, style]);
|
|
135
|
+
|
|
136
|
+
// Set map position if it changes
|
|
137
|
+
// useEffect(() => {
|
|
138
|
+
// const map = mapRef.current;
|
|
139
|
+
// if (map == null || mapPosition == null) return;
|
|
140
|
+
// setMapPosition(map, mapPosition);
|
|
141
|
+
// }, [mapPosition]);
|
|
142
|
+
|
|
143
|
+
const _computedMapPosition = useMapPosition();
|
|
122
144
|
const { mapUse3D, mapIsRotated } = mapViewInfo(_computedMapPosition);
|
|
123
145
|
|
|
124
146
|
// Get map projection
|