Skip to content

Commit 3dc7de1

Browse files
davidsklar99davidsklar99
authored
Merge pull request #54 from UW-Macrostrat/styling
Styling and image updates
2 parents ca3b516 + 864d1bc commit 3dc7de1

File tree

12 files changed

+713
-608
lines changed

12 files changed

+713
-608
lines changed

‎pages/checkin/index.ts‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import { LngLatCoords } from "@macrostrat/map-interface";
22
import { useState, useCallback } from 'react';
33
import 'mapbox-gl/dist/mapbox-gl.css';
4-
import { BlankImage, imageExists, Footer, getProfilePicUrl, getImageUrl } from "~/components/general";
4+
import { BlankImage, Footer, getProfilePicUrl, getImageUrl } from "~/components/general";
55
import { Icon } from "@blueprintjs/core";
66
import h from "./main.module.sass";
77
import { SETTINGS } from "@macrostrat-web/settings";
88
import "@macrostrat/style-system";
99
import { Overlay2 } from "@blueprintjs/core";
10-
import { MapAreaContainer, MapView, MapMarker } from "@macrostrat/map-interface";
11-
import 'mapbox-gl/dist/mapbox-gl.css';
12-
import { MapPosition } from "@macrostrat/mapbox-utils";
13-
import { PanelCard } from "@macrostrat/map-interface";
1410
import { LithologyList } from "@macrostrat/data-components";
1511
import { ClientOnly } from "vike-react/ClientOnly";
1612

@@ -74,14 +70,13 @@ const [isOpen, setIsOpen] = useState(false);
7470

7571
// add checkin photo and notes
7672
const imageSrc = getImageUrl(checkin.person_id, checkin.photo);
77-
const headerImgUrl = checkin.photo && imageExists(imageSrc) ? imageSrc : null;
7873
const headerBody = h('h4', {className: 'observation-header'}, checkin.notes);
7974

8075
observations.push(
8176
h('div', {className: 'observation'}, [
82-
headerImgUrl ? h('a', {href: "/photo/" + checkin.photo},
83-
h(BlankImage, { className: 'observation-image', src: headerImgUrl})
84-
) : null,
77+
h('a', {href: "/photo/" + checkin.photo},
78+
h(BlankImage, { className: 'observation-image', src: imageSrc, alt: "presentation" })
79+
),
8580
h("div.observation-body", headerBody),
8681
])
8782
);
@@ -91,14 +86,13 @@ const [isOpen, setIsOpen] = useState(false);
9186
if(Object.keys(observation.rocks).length != 0) {
9287
// if photo exists
9388
const imageSrc = getImageUrl(checkin.person_id, observation.photo);
94-
const observationURL = observation.photo && imageExists(imageSrc) ? imageSrc : null;
9589
let observationBody = observationFooter(observation);
9690

9791
observations.push(
9892
h('div', {className: 'observation'}, [
99-
observationURL ? h('a', {href: "/photo/" + observation.photo},
100-
h(BlankImage, { className: 'observation-image', src: observationURL})
101-
) : null,
93+
h('a', {href: "/photo/" + observation.photo},
94+
h(BlankImage, { className: 'observation-image', src: imageSrc })
95+
),
10296
observationBody,
10397
])
10498
);

‎pages/checkin/main.module.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ h4
137137
.observation-image
138138
width: 100%
139139
cursor: pointer
140+
font-size: 0
140141

141142
.close
142143
position: absolute

‎pages/checkin/map.client.ts‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
1-
import { useState } from 'react';
1+
import { useEffect, useState } from 'react';
22
import 'mapbox-gl/dist/mapbox-gl.css';
33
import { Icon } from "@blueprintjs/core";
44
import h from "./main.module.sass";
55
import { SETTINGS } from "@macrostrat-web/settings";
66
import "@macrostrat/style-system";
7-
import { MapAreaContainer, MapView, MapMarker } from "@macrostrat/map-interface";
7+
import { MapAreaContainer, MapView } from "@macrostrat/map-interface";
88
import 'mapbox-gl/dist/mapbox-gl.css';
99
import { MapPosition } from "@macrostrat/mapbox-utils";
1010
import { PanelCard } from "@macrostrat/map-interface";
11+
import mapboxgl from 'mapbox-gl';
1112

1213

1314
export function MapContainer({center, setOverlayOpen}) {
1415
const [style, setStyle] = useState("mapbox://styles/jczaplewski/cje04mr9l3mo82spihpralr4i");
1516
const [styleText, setStyleText] = useState("Show Satelite");
17+
const [map, setMap] = useState(null);
18+
19+
useEffect(() => {
20+
if (map) {
21+
new mapboxgl.Marker().setLngLat(center).addTo(map);
22+
}
23+
}, [style, map]);
1624

1725
const newMapPosition: MapPosition = {
1826
camera: {
19-
lat: center.lat, // Latitude
20-
lng: center.lng, // Longitude
21-
altitude: 300000, // Altitude (height from the Earth's surface)
27+
lat: center.lat,
28+
lng: center.lng,
29+
altitude: 300000,
2230
},
2331
};
2432

@@ -30,11 +38,10 @@ export function MapContainer({center, setOverlayOpen}) {
3038
return h("div.overlay-container", [
3139
h(MapAreaContainer, { style: {height: "93vh", top: "7vh"} },
3240
[
33-
h(MapView, { style: style, mapboxToken: SETTINGS.mapboxAccessToken, mapPosition: newMapPosition }, [
34-
h(MapMarker, {
35-
position: center,
36-
}),
37-
]),
41+
h(MapView, { style: style, mapboxToken: SETTINGS.mapboxAccessToken, mapPosition: newMapPosition, onMapLoaded: (map) => {
42+
console.log("Map loaded", map);
43+
setMap(map);
44+
}})
3845
]
3946
),
4047
h('div', {className: 'banner'}, [

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

Lines changed: 95 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,13 @@ import { useRockdAPI, Image, pageCarousel, createCheckins } from "~/components/g
1212
import "@macrostrat/style-system";
1313
import { MapPosition } from "@macrostrat/mapbox-utils";
1414
import { ClientOnly } from "vike-react/ClientOnly";
15+
import {
16+
MapAreaContainer,
17+
MapMarker,
18+
MapView,
19+
} from "@macrostrat/map-interface";
20+
import { mapboxAccessToken } from "@macrostrat-web/settings";
1521

16-
function MapContainer(props) {
17-
return h(
18-
ClientOnly,
19-
{
20-
load: () => import("./map.client").then((d) => d.WeaverMapContainer),
21-
fallback: h("div.loading", "Loading map..."),
22-
},
23-
(component) => h(component, props)
24-
);
25-
}
2622

2723
export function Page() {
2824
return h(
@@ -674,3 +670,92 @@ function renderSection(label, key, resultList, setFn, existingIds, setAutocomple
674670
])
675671
: null;
676672
}
673+
674+
675+
export function MapContainer({style, mapPosition, onSelectPosition, setSelectedCheckin, overlay}) {
676+
return h(
677+
"div.map-container",
678+
[
679+
// The Map Area Container
680+
h(
681+
MapAreaContainer,
682+
{
683+
className: "map-area-container",
684+
style: { "paddingLeft": "calc(30% + 14px)",},
685+
},
686+
[
687+
h(MapView, { style, mapboxToken: mapboxAccessToken, mapPosition }, [
688+
h(MapMarker, {
689+
setPosition: onSelectPosition,
690+
}),
691+
]),
692+
693+
// The Overlay Div
694+
overlay,
695+
h(ClickedCheckins, {setSelectedCheckin}),
696+
]
697+
),
698+
]
699+
);
700+
}
701+
702+
703+
function ClickedCheckins({setSelectedCheckin}) {
704+
const mapRef = useMapRef();
705+
const map = mapRef.current;
706+
707+
useEffect(() => {
708+
if (!map) return;
709+
710+
const handleClick = (e) => {
711+
const cluster = map.queryRenderedFeatures(e.point, {
712+
layers: ['clusters']
713+
});
714+
715+
if(cluster.length > 0) {
716+
const zoom = cluster[0].properties.expansion_zoom;
717+
console.log("cluster", cluster[0]);
718+
719+
console.log("zoom", zoom);
720+
721+
map.flyTo({
722+
center: cluster[0].geometry.coordinates,
723+
zoom: zoom + 2,
724+
speed: 0.5,
725+
});
726+
}
727+
728+
const features = map.queryRenderedFeatures(e.point, {
729+
layers: ['unclustered-point']
730+
});
731+
732+
if (features.length > 0) {
733+
const checkinId = features[0].properties.id;
734+
735+
// add marker
736+
const coord = features[0].geometry.coordinates.slice();
737+
console.log("coordinates", coord);
738+
739+
const el = document.createElement('div');
740+
el.className = 'selected_pin';
741+
742+
new mapboxgl.Marker(el)
743+
.setLngLat(coord)
744+
.addTo(map);
745+
746+
console.log("data", features[0]);
747+
setSelectedCheckin(checkinId);
748+
} else {
749+
setSelectedCheckin(null);
750+
}
751+
};
752+
753+
map.on('click', handleClick);
754+
755+
return () => {
756+
map.off('click', handleClick);
757+
};
758+
}, [map]);
759+
760+
return null;
761+
}

‎pages/explore/main.module.sass‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -384,9 +384,6 @@ body
384384
display: flex
385385
align-items: center
386386

387-
.setting-icon
388-
cursor: pointer
389-
390387
.filter-divider, .settings-divider
391388
margin-bottom: 10px
392389

@@ -467,4 +464,7 @@ body
467464
.bp5-card, .bp5-navbar, .bp5-button
468465
border-radius: 4px
469466
background-color: var(--panel-background-color)
470-
box-shadow: 0 0 0 1px var(--card-shadow-color)
467+
box-shadow: 0 0 0 1px var(--card-shadow-color)
468+
469+
.settings-icon
470+
cursor: pointer

‎pages/explore/map.client.ts‎

Lines changed: 0 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -9,91 +9,3 @@ import { mapboxAccessToken } from "@macrostrat-web/settings";
99
import mapboxgl from "mapbox-gl";
1010
import { useEffect } from "react";
1111
import { useMapRef } from "@macrostrat/mapbox-react";
12-
13-
export function WeaverMapContainer({style, mapPosition, onSelectPosition, setSelectedCheckin, overlay}) {
14-
return h(
15-
"div.map-container",
16-
[
17-
// The Map Area Container
18-
h(
19-
MapAreaContainer,
20-
{
21-
className: "map-area-container",
22-
style: { "paddingLeft": "calc(30% + 14px)",},
23-
},
24-
[
25-
h(MapView, { style, mapboxToken: mapboxAccessToken, mapPosition }, [
26-
h(MapMarker, {
27-
setPosition: onSelectPosition,
28-
}),
29-
]),
30-
31-
// The Overlay Div
32-
overlay,
33-
h(ClickedCheckins, {setSelectedCheckin}),
34-
]
35-
),
36-
]
37-
);
38-
}
39-
40-
41-
function ClickedCheckins({setSelectedCheckin}) {
42-
const mapRef = useMapRef();
43-
const map = mapRef.current;
44-
45-
useEffect(() => {
46-
if (!map) return;
47-
48-
const handleClick = (e) => {
49-
const cluster = map.queryRenderedFeatures(e.point, {
50-
layers: ['clusters']
51-
});
52-
53-
if(cluster.length > 0) {
54-
const zoom = cluster[0].properties.expansion_zoom;
55-
console.log("cluster", cluster[0]);
56-
57-
console.log("zoom", zoom);
58-
59-
map.flyTo({
60-
center: cluster[0].geometry.coordinates,
61-
zoom: zoom + 2,
62-
speed: 0.5,
63-
});
64-
}
65-
66-
const features = map.queryRenderedFeatures(e.point, {
67-
layers: ['unclustered-point']
68-
});
69-
70-
if (features.length > 0) {
71-
const checkinId = features[0].properties.id;
72-
73-
// add marker
74-
const coord = features[0].geometry.coordinates.slice();
75-
console.log("coordinates", coord);
76-
77-
const el = document.createElement('div');
78-
el.className = 'selected_pin';
79-
80-
new mapboxgl.Marker(el)
81-
.setLngLat(coord)
82-
.addTo(map);
83-
84-
console.log("data", features[0]);
85-
setSelectedCheckin(checkinId);
86-
} else {
87-
setSelectedCheckin(null);
88-
}
89-
};
90-
91-
map.on('click', handleClick);
92-
93-
return () => {
94-
map.off('click', handleClick);
95-
};
96-
}, [map]);
97-
98-
return null;
99-
}

0 commit comments

Comments
 (0)