Skip to content

Commit 2cd9f28

Browse files
davidsklar99davidsklar99
authored
Merge pull request #44 from UW-Macrostrat/explore_updates
Explore Styling
2 parents 297a1ea + 3a6d28c commit 2cd9f28

File tree

9 files changed

+185
-158
lines changed

9 files changed

+185
-158
lines changed

‎pages/explore/+Page.client.ts‎

Lines changed: 82 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -51,40 +51,10 @@ const type =
5151
};
5252

5353
function weaverStyle(type: object) {
54-
const colors = {
55-
a: "#51bbd6",
56-
b: "#f1f075",
57-
c: "#f28cb1",
58-
};
59-
6054
const clusterThreshold = 1;
6155

6256
const baseColor = "#868aa2";
6357
const endColor = "#212435";
64-
const scale = chroma.scale([baseColor, endColor]).mode("hsl");
65-
66-
const _circleColor = (step) => {
67-
return scale(step / _steps.length);
68-
};
69-
70-
const circleColor = (step) => _circleColor(step).hex();
71-
const _steps = [1, 20, 100, 200, 500];
72-
73-
function steps(fn: (step: number) => any) {
74-
let res: any[] = ["step", ["coalesce", ["get", "point_count"], 0]];
75-
76-
let ix = 0;
77-
for (const step of _steps) {
78-
res.push(fn(ix), step);
79-
ix++;
80-
}
81-
res.push(fn(ix));
82-
return res;
83-
}
84-
85-
const textColor = (step) => {
86-
return chroma(baseColor).brighten(2).hex();
87-
};
8858

8959
return {
9060
sources: {
@@ -101,13 +71,33 @@ function weaverStyle(type: object) {
10171
"source-layer": "default",
10272
filter: ['>', ['get', 'n'], clusterThreshold],
10373
paint: {
104-
"circle-radius": steps((step) => 8 + step * 2),
105-
"circle-color": steps(circleColor),
74+
"circle-radius": [
75+
'step',
76+
['get', 'n'],
77+
7, 50,
78+
9, 100,
79+
11, 150,
80+
13, 200,
81+
15,
82+
],
83+
"circle-color": [
84+
'step',
85+
['get', 'n'],
86+
"#7b7fa0", 50,
87+
'#636b8d', 100,
88+
'#4a546e', 150,
89+
'#353b49', 200,
90+
endColor
91+
],
92+
"circle-stroke-color": [
93+
'step',
94+
['get', 'n'],
95+
"#8b8eab", 50,
96+
'#7a7e96', 100,
97+
'#5d5f7c', 150,
98+
'#484b63',
99+
],
106100
"circle-stroke-width": 3,
107-
"circle-stroke-color": steps((step) => {
108-
const c = _circleColor(step);
109-
return c.brighten(0.5).hex();
110-
}),
111101
"circle-stroke-opacity": 1,
112102
},
113103
},
@@ -122,7 +112,7 @@ function weaverStyle(type: object) {
122112
'text-size': 10
123113
},
124114
paint: {
125-
"text-color": "#000"
115+
"text-color": "#fff"
126116
},
127117
},
128118
{
@@ -151,9 +141,10 @@ function WeaverMap({
151141
mapboxToken?: string;
152142
}) {
153143
const [showSatelite, setSatelite] = useState(false);
154-
const style = useMapStyle(type, mapboxToken, showSatelite);
144+
const [showOverlay, setOverlay] = useState(true);
145+
const style = useMapStyle(type, mapboxToken, showSatelite, showOverlay);
155146
const [selectedCheckin, setSelectedCheckin] = useState(null);
156-
const [selectedCheckinPoint, setSelectedCheckinPoint] = useState(null);
147+
const [showSettings, setSettings] = useState(false);
157148

158149
// overlay
159150
const [inspectPosition, setInspectPosition] = useState<mapboxgl.LngLat | null>(null);
@@ -183,15 +174,16 @@ function WeaverMap({
183174
selectedCheckin ? `protected/checkins?checkin_id=${selectedCheckin}` : null
184175
);
185176

177+
const toolbar = h(Toolbar, {showSettings, setSettings});
178+
const contextPanel = h(ContextPanel, {showSettings, showSatelite, setSatelite, showOverlay, setOverlay});
179+
186180
if(selectedCheckin && checkinData) {
187181
const clickedCheckins = h(createSelectedCheckins, {data: checkinData?.success.data, setInspectPosition});
188182

189183
overlay = h("div.sidebox", [
190184
h('div.title', [
191-
h('div', { className: "selected-center" }, [
192-
h("h1", "Selected Checkins"),
193-
h('h3', { className: "coordinates" }, LngLatCoords(LngLatProps))
194-
]),
185+
toolbar,
186+
h("h1", "Selected Checkins"),
195187
]),
196188
h("button", {
197189
className: "close-btn",
@@ -210,6 +202,7 @@ function WeaverMap({
210202
overlay = h("div.sidebox", [
211203
h('div.sidebox-header', [
212204
h('div.title', [
205+
toolbar,
213206
h("h1", "Featured Checkins"),
214207
]),
215208
]),
@@ -226,9 +219,9 @@ function WeaverMap({
226219
h(
227220
MapAreaContainer,
228221
{
229-
contextPanel: h(Toolbar, {showSatelite, setSatelite}),
222+
contextPanel: contextPanel,
230223
className: "map-area-container",
231-
style: { width: "70%", left: "30%" },
224+
style: { "padding-left": "calc(30% + 14px)",},
232225
},
233226
[
234227
h(MapView, { style, mapboxToken }, [
@@ -247,7 +240,7 @@ function WeaverMap({
247240

248241
}
249242

250-
function useMapStyle(type, mapboxToken, showSatelite) {
243+
function useMapStyle(type, mapboxToken, showSatelite, showOverlay) {
251244
const dark = useDarkMode();
252245
const isEnabled = dark?.isEnabled;
253246

@@ -258,17 +251,17 @@ function useMapStyle(type, mapboxToken, showSatelite) {
258251
const finalStyle = showSatelite ? sateliteStyle : baseStyle;
259252

260253
const [actualStyle, setActualStyle] = useState(null);
254+
const overlayStyle = showOverlay ? mergeStyles(_macrostratStyle, weaverStyle(type)) : weaverStyle(type);
261255

262256
// Auto select sample type
263257
useEffect(() => {
264-
const overlayStyle = mergeStyles(_macrostratStyle, weaverStyle(type));
265258
buildInspectorStyle(finalStyle, overlayStyle, {
266259
mapboxToken,
267260
inDarkMode: isEnabled,
268261
}).then((s) => {
269262
setActualStyle(s);
270263
});
271-
}, [isEnabled, showSatelite]);
264+
}, [isEnabled, showSatelite, showOverlay]);
272265

273266
return actualStyle;
274267
}
@@ -287,55 +280,6 @@ function getCheckins(lat1, lat2, lng1, lng2) {
287280
"&maxlng=" + maxLng);
288281
}
289282

290-
function getSelectedCheckins(lat1, lat2, lng1, lng2) {
291-
// abitrary bounds around click point
292-
let minLat = Math.floor(lat1 * 100) / 100;
293-
let maxLat = Math.floor(lat2 * 100) / 100;
294-
let minLng = Math.floor(lng1 * 100) / 100;
295-
let maxLng = Math.floor(lng2 * 100) / 100;
296-
297-
// return 10 pages of results
298-
return useRockdAPI("protected/checkins?minlat=" + minLat +
299-
"&maxlat=" + maxLat +
300-
"&minlng=" + minLng +
301-
"&maxlng=" + maxLng + "&all=10");
302-
}
303-
304-
function SelectedCheckins({selectedResult, inspectPosition, setInspectPosition}) {
305-
const mapRef = useMapRef();
306-
const map = mapRef.current;
307-
308-
// add selected checkin markers
309-
useEffect(() => {
310-
let selectedCords = [];
311-
312-
let previousSelected = document.querySelectorAll('.selected_pin');
313-
previousSelected.forEach((marker) => {
314-
marker.remove();
315-
});
316-
317-
// if selected checkins
318-
if(selectedResult?.length > 0 && inspectPosition) {
319-
selectedResult.forEach((checkin) => {
320-
selectedCords.push([checkin.lng, checkin.lat]);
321-
});
322-
323-
selectedCords.forEach((coord) => {
324-
// marker
325-
const el = document.createElement('div');
326-
el.className = 'selected_pin';
327-
328-
// Create marker
329-
new mapboxgl.Marker(el)
330-
.setLngLat(coord)
331-
.addTo(map);
332-
});
333-
}
334-
}, [selectedResult]);
335-
336-
return h("div", {className: 'checkin-container'}, createCheckins(selectedResult, mapRef, setInspectPosition));
337-
}
338-
339283
function FeatureDetails({setInspectPosition}) {
340284
const mapRef = useMapRef();
341285
const map = mapRef.current;
@@ -346,9 +290,7 @@ function FeatureDetails({setInspectPosition}) {
346290
if(!map) {
347291
result = getCheckins(0, 0, 0, 0);
348292
} else if (bounds) {
349-
const distance = Math.abs(bounds.getEast() - bounds.getWest());
350-
const newEast = bounds.getEast() - distance * .2;
351-
result = getCheckins(bounds.getSouth(), bounds.getNorth(), bounds.getWest(), newEast);
293+
result = getCheckins(bounds.getSouth(), bounds.getNorth(), bounds.getWest(), bounds.getEast());
352294
} else {
353295
result = getCheckins(0, 0, 0, 0);
354296
}
@@ -382,10 +324,8 @@ function FeatureDetails({setInspectPosition}) {
382324
]);
383325
}
384326

385-
function Toolbar({showSatelite, setSatelite}) {
386-
const [showSettings, setSettings] = useState(false);
387-
388-
return h(PanelCard, { className: "toolbar", style: {padding: "0"} }, [
327+
function Toolbar({showSettings, setSettings}) {
328+
return h("div", { className: "toolbar", style: {padding: "0"} }, [
389329
h("div.toolbar-header", [
390330
h("a", { href: "/" },
391331
h(Image, { className: "home-icon", src: "favicon-32x32.png" }),
@@ -395,21 +335,30 @@ function Toolbar({showSatelite, setSatelite}) {
395335
}
396336
}),
397337
]),
398-
h("div", { className: showSettings ? "settings-content" : "hide" }, [
399-
h(Divider, { className: "divider" }),
400-
h("div", { className: "settings" }, [
401-
h(DarkModeButton, { className: "dark-btn", showText: true } ),
402-
h(PanelCard, {className: "map-style", onClick: () => {
403-
setSatelite(!showSatelite);
404-
}}, [
405-
h(Icon, { className: "satellite-icon", icon: "satellite"}),
406-
h("p", "Satellite"),
407-
]),
408-
]),
409-
])
410338
]);
411339
}
412340

341+
function ContextPanel({showSettings, showSatelite, setSatelite, showOverlay, setOverlay}) {
342+
return h(PanelCard, { className: showSettings ? "settings-content" : "hide" }, [
343+
h("div", { className: "settings" }, [
344+
h(DarkModeButton, { className: "dark-btn", showText: true } ),
345+
h(PanelCard, {className: "satellite-style", onClick: () => {
346+
setSatelite(!showSatelite);
347+
}}, [
348+
h(Icon, { className: "satellite-icon", icon: "satellite"}),
349+
h("p", "Satellite"),
350+
]),
351+
h(PanelCard, {className: "map-style", onClick: () => {
352+
setOverlay(!showOverlay);
353+
}}, [
354+
h(Icon, { className: "overlay-icon", icon: "map"}),
355+
h("p", "Overlay"),
356+
]),
357+
]),
358+
359+
])
360+
}
361+
413362
function handleClusterClick() {
414363
const mapRef = useMapRef();
415364
const map = mapRef.current;
@@ -434,6 +383,23 @@ function ClickedCheckins({setSelectedCheckin}) {
434383
if (!map) return;
435384

436385
const handleClick = (e) => {
386+
const cluster = map.queryRenderedFeatures(e.point, {
387+
layers: ['clusters']
388+
});
389+
390+
if(cluster.length > 0) {
391+
const zoom = cluster[0].properties.expansion_zoom;
392+
console.log("cluster", cluster[0]);
393+
394+
console.log("zoom", zoom);
395+
396+
map.flyTo({
397+
center: cluster[0].geometry.coordinates,
398+
zoom: zoom,
399+
speed: 0.5,
400+
});
401+
}
402+
437403
const features = map.queryRenderedFeatures(e.point, {
438404
layers: ['unclustered-point']
439405
});
@@ -472,7 +438,5 @@ function ClickedCheckins({setSelectedCheckin}) {
472438
function createSelectedCheckins(result, setInspectPosition) {
473439
const mapRef = useMapRef();
474440

475-
console.log("data", result);
476-
477441
return createCheckins(result.data, mapRef, setInspectPosition);
478442
}

0 commit comments

Comments
 (0)