Skip to content

Commit 46ec38f

Browse files
davidsklar99davidsklar99
authored
Merge pull request #40 from UW-Macrostrat/styling
Map Interface Updates
2 parents 7f2cb9c + a636a80 commit 46ec38f

File tree

10 files changed

+330
-82
lines changed

10 files changed

+330
-82
lines changed

‎pages/+Page.client.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ export function Page() {
3636
])
3737
]),
3838
h("div", { className: "new_container map-container" }, [
39-
h("div", { className: "side" }, [
4039
h("div", { className: "map-imgs" }, [
4140
h(Image, { src: "main-page/grand_canyon.jpg", className: "map-shot grand_canyon" }),
4241
h(Image, { src: "main-page/new_zealand.jpg", className: "map-shot new_zealand" }),
@@ -57,7 +56,6 @@ export function Page() {
5756
" (where available)"
5857
])
5958
])
60-
])
6159
]),
6260

6361
h("div", { className: "new_container white-container" }, [
@@ -113,7 +111,7 @@ export function Page() {
113111
h("div", { className: "image-grid" }, [
114112
h("div", { className: "col-sm-6" }, [
115113
h("div", { className: "headline-alligner" }, [
116-
h("div", { className: "center" }, [
114+
h("div", { className: "center left" }, [
117115
h(Image, { src: "main-page/checkin.png", className: "record-block-img" }),
118116
h("p", { className: "record-img-caption" }, h("span", {}, "Take pictures of and rate features"))
119117
])
@@ -122,7 +120,7 @@ export function Page() {
122120

123121
h("div", { className: "col-sm-6" }, [
124122
h("div", { className: "headline-alligner" }, [
125-
h("div", { className: "center" }, [
123+
h("div", { className: "center right" }, [
126124
h(Image, { src: "main-page/strat-names.png", className: "record-block-img" }),
127125
h("p", { className: "record-img-caption" }, h("span", {}, "Tag stratigraphic names, even offline"))
128126
])
@@ -131,7 +129,7 @@ export function Page() {
131129

132130
h("div", { className: "col-sm-6" }, [
133131
h("div", { className: "headline-alligner" }, [
134-
h("div", { className: "center" }, [
132+
h("div", { className: "center left" }, [
135133
h(Image, { src: "main-page/strike-dip.png", className: "record-block-img" }),
136134
h("p", { className: "record-img-caption" }, h("span", {}, "Use your phone's compass to record strike and dip"))
137135
])
@@ -140,7 +138,7 @@ export function Page() {
140138

141139
h("div", { className: "col-sm-6" }, [
142140
h("div", { className: "headline-alligner" }, [
143-
h("div", { className: "center" }, [
141+
h("div", { className: "center right" }, [
144142
h(Image, { src: "main-page/taxa.png", className: "record-block-img" }),
145143
h("p", { className: "record-img-caption" }, [
146144
h("span", {}, "Search for and tag "),

‎pages/checkin/index.ts‎

Lines changed: 54 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import h from "@macrostrat/hyper";
22
import { LngLatCoords } from "@macrostrat/map-interface";
33
import { useEffect, useState, useRef } from 'react';
44
import 'mapbox-gl/dist/mapbox-gl.css';
5-
import { BlankImage, Image, Footer, apiURL, useRockdAPI, imageExists } from "../index";
5+
import { BlankImage, imageExists, Footer, apiURL, apiURLOld, useRockdAPI } from "../index";
66
import { Icon } from "@blueprintjs/core";
77
import "../main.sass";
88
import { SETTINGS } from "@macrostrat-web/settings";
@@ -12,6 +12,7 @@ import "@macrostrat/style-system";
1212
import { MapAreaContainer, MapView, MapMarker } from "@macrostrat/map-interface";
1313
import 'mapbox-gl/dist/mapbox-gl.css';
1414
import { MapPosition } from "@macrostrat/mapbox-utils";
15+
import { PanelCard } from "@macrostrat/map-interface";
1516

1617
export function Checkins({checkinID}) {
1718
const checkinData = useRockdAPI("protected/checkins?checkin_id=" + checkinID);
@@ -28,7 +29,8 @@ export function Checkins({checkinID}) {
2829

2930
if (checkinData.success.data.length == 0) {
3031
return h("div", { className: 'error' }, [
31-
h("h1", "Checkin " + checkinID + " not found"),
32+
h(BlankImage, {className: "error-img", src: "https://rockd.org/assets/img/404.jpg"}),
33+
h("h1", "Checkin " + checkinID + " not found!"),
3234
]);
3335
}
3436

@@ -53,13 +55,13 @@ export function Checkins({checkinID}) {
5355
let observations = [];
5456

5557
// add checkin photo and notes
56-
const showImage = checkin.photo;
57-
const headerImgUrl = showImage ? apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo : "https://storage.macrostrat.org/assets/rockd/rockd.jpg";
58+
const imageSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo;
59+
const headerImgUrl = checkin.photo && imageExists(imageSrc) ? imageSrc : null;
5860
const headerBody = h('h4', {className: 'observation-header'}, checkin.notes);
5961

6062
observations.push(
6163
h('div', {className: 'observation'}, [
62-
showImage ? h(BlankImage, { className: 'observation-img', src: headerImgUrl, onClick: () => {
64+
headerImgUrl ? h(BlankImage, { className: 'observation-img', src: headerImgUrl, onClick: () => {
6365
setOverlayBody(h('div.observation-body',headerBody));
6466
setOverlayImage(headerImgUrl);
6567
setOverlayOpen(!overlayOpen);
@@ -74,13 +76,13 @@ export function Checkins({checkinID}) {
7476
console.log("obs", observation.photo, observation);
7577
if(Object.keys(observation.rocks).length != 0) {
7678
// if photo exists
77-
const showImage = observation.photo;
78-
const imageSrc = showImage ? apiURL + "/protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo : "https://storage.macrostrat.org/assets/rockd/rockd.jpg";
79+
const imageSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo;
80+
const observationURL = observation.photo && imageExists(imageSrc) ? imageSrc : null;
7981
let observationBody = observationFooter(observation);
8082

8183
observations.push(
8284
h('div', {className: 'observation'}, [
83-
showImage ? h(BlankImage, { className: 'observation-img', src: imageSrc, onClick: () => {
85+
observationURL ? h(BlankImage, { className: 'observation-img', src: observationURL, onClick: () => {
8486
setOverlayImage(imageSrc);
8587
setOverlayBody(observationBody);
8688
setOverlayOpen(!overlayOpen);
@@ -91,29 +93,6 @@ export function Checkins({checkinID}) {
9193
}
9294
});
9395

94-
const newMapPosition: MapPosition = {
95-
camera: {
96-
lat: center.lat, // Latitude
97-
lng: center.lng, // Longitude
98-
altitude: 300000, // Altitude (height from the Earth's surface)
99-
},
100-
};
101-
102-
let map = h("div.map", [
103-
h(MapAreaContainer, { style: {height: "93vh", top: "7vh"} },
104-
[
105-
h(MapView, { style: 'mapbox://styles/jczaplewski/cje04mr9l3mo82spihpralr4i', mapboxToken: SETTINGS.mapboxAccessToken, mapPosition: newMapPosition }, [
106-
h(MapMarker, {
107-
position: center,
108-
}),
109-
]),
110-
]
111-
),
112-
h('div', {className: 'banner', onClick: () => {
113-
setShowMap(!showMap);
114-
}}, h(Icon, {className: "left-arrow banner-arrow", icon: "arrow-left", iconSize: "4vh", style: {color: 'black'}})),
115-
])
116-
11796
let LngLatProps = {
11897
position: {
11998
lat: checkin.lat,
@@ -138,6 +117,8 @@ export function Checkins({checkinID}) {
138117
])
139118
]);
140119

120+
const map = h(Map, {center, showMap, setShowMap});
121+
141122
let main = h('div', { className: "container" }, [
142123
h('div', { className: showMap ? 'hide' : 'main'}, [
143124
h('div', { className: "checkin-header" }, [
@@ -204,4 +185,46 @@ function observationFooter(observation) {
204185
h('p', {className: "notes"}, rocks.notes),
205186
]),
206187
]);
188+
}
189+
190+
function Map({center, showMap, setShowMap}) {
191+
const [style, setStyle] = useState("mapbox://styles/jczaplewski/cje04mr9l3mo82spihpralr4i");
192+
const [styleText, setStyleText] = useState("Show Satelite");
193+
194+
const newMapPosition: MapPosition = {
195+
camera: {
196+
lat: center.lat, // Latitude
197+
lng: center.lng, // Longitude
198+
altitude: 300000, // Altitude (height from the Earth's surface)
199+
},
200+
};
201+
202+
const sateliteStyle = 'mapbox://styles/mapbox/satellite-v9';
203+
const whiteStyle = "mapbox://styles/jczaplewski/cje04mr9l3mo82spihpralr4i";
204+
const whiteText = "Show White";
205+
const sateliteText = "Show Satelite";
206+
207+
let map = h("div.map", [
208+
h(MapAreaContainer, { style: {height: "93vh", top: "7vh"} },
209+
[
210+
h(MapView, { style: style, mapboxToken: SETTINGS.mapboxAccessToken, mapPosition: newMapPosition }, [
211+
h(MapMarker, {
212+
position: center,
213+
}),
214+
]),
215+
]
216+
),
217+
h('div', {className: 'banner'}, [
218+
h(Icon, {className: "left-arrow banner-arrow", icon: "arrow-left", iconSize: "4vh", style: {color: 'black'}, onClick: () => {
219+
setShowMap(!showMap);
220+
}}),
221+
h(PanelCard, {className: "banner-button", onClick: () => {
222+
console.log("clicked");
223+
setStyle(style == whiteStyle ? sateliteStyle : whiteStyle);
224+
setStyleText(styleText == whiteText ? sateliteText : whiteText);
225+
}}, styleText),
226+
]),
227+
])
228+
229+
return map;
207230
}

‎pages/checkin/main.sass‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ body
5656
color: var(--text)
5757
padding: 0 20% 5vh 20%
5858
margin: 0
59+
min-height: 74vh
5960

6061
h4
6162
color: var(--text)
@@ -191,6 +192,22 @@ h4
191192
width: 100%
192193
background-color: var(--panel-text)
193194
height: 7vh
195+
display: flex
196+
197+
198+
.banner-arrow
199+
margin-left: 10px
200+
svg
201+
height: 7vh
202+
203+
.banner-button
204+
width: 100px
205+
cursor: pointer
206+
text-align: center
207+
margin: 10px 0
208+
background-color: var(--panel-background)
209+
position: absolute
210+
right: 15px
194211

195212
.map-container
196213
height: 95vh
@@ -236,11 +253,6 @@ h4
236253
svg
237254
height: 10vh
238255

239-
.banner-arrow
240-
margin-left: 10px
241-
svg
242-
height: 7vh
243-
244256
.overlay-header
245257
position: absolute
246258
height: 10vh
@@ -250,4 +262,18 @@ h4
250262
position: relative
251263

252264
.dark-mode-button
253-
height: 5vh
265+
height: 5vh
266+
267+
.error
268+
height: 100vh
269+
width: 100%
270+
text-align: center
271+
font-size: 2em
272+
font-weight: 200
273+
background-color: var(--panel-background-color)
274+
color: var(--panel-text)
275+
padding-top: 5vh
276+
277+
.error-img
278+
width: 50%
279+
text-align: center

0 commit comments

Comments
 (0)