everything merged, featured checkins show up most times

Author: davidsklar99

pages/dev/test-site/explore/+Page.client.ts

@@ -118,8 +118,8 @@ function FeatureDetails() {
   let checkins = [];
   let result;
 
-  if(mapRef == null) {
-    result = getCheckins(0, 100, 0, 100);
+  if(!mapRef.current) {
+    return h(Spinner)
   } else {
     let map = mapRef.current;
 
@@ -241,15 +241,19 @@ function WeaverMap({
 
   const [featuredCheckins, setFeaturedCheckin] = useState(h(Spinner));
 
+  // overlay
+  const [isOpenSelected, setOpenSelected] = useState(true);
+
   const [inspectPosition, setInspectPosition] =
     useState<mapboxgl.LngLat | null>(null);
 
   const onSelectPosition = useCallback((position: mapboxgl.LngLat) => {
     setInspectPosition(position);
+    setOpenSelected(true);
   }, []);
 
   let detailElement = null;
-  let selectedCheckin = h('h1', { className: 'no-checkins' }, "No Checkin(s) Selected");
+  let selectedCheckin = null;
   let result = getCheckins(inspectPosition?.lat - .05, inspectPosition?.lat + .05, inspectPosition?.lng - .05, inspectPosition?.lng + .05);
   if (inspectPosition != null) {
     detailElement = h(
@@ -266,15 +270,28 @@ function WeaverMap({
     selectedCheckin = getSelectedCheckins(result);
   }
 
-  // TODO: have run depend on changing mapRef
   let featuredCheckin = h(FeatureDetails);
+  let overlay;
 
-  let overlay = h(
-    "div.overlay-div",
-    [
-      h(ExpansionPanel, {title: "Selected Checkins"}, selectedCheckin),
-      h(ExpansionPanel, {title: "Featured Checkins"}, featuredCheckin),
+  if (selectedCheckin == null || !isOpenSelected) {
+    overlay = h("div.sidebox", [
+      h('div.title', h("h1", "Featured Checkins")),
+      h("div.overlay-div", featuredCheckin),
     ]);
+  } else {
+    overlay = h("div.sidebox", [
+      h('div.title', [
+        h("h1", "Selected Checkins"),
+        h('h3', { className: "coordinates" }, formatCoordinates(inspectPosition.lat, inspectPosition.lng)),
+      ]),
+      h("button", {
+        className: "close-btn",
+        onClick: () => setOpenSelected(false)
+      }, "X"),
+      h("div.overlay-div", selectedCheckin)
+    ]);
+  }
+
 
   if(style == null) return null;
 
@@ -346,4 +363,16 @@ function useMapStyle(type, mapboxToken) {
   }, []);
 
   return actualStyle;
+}
+
+function formatCoordinates(latitude, longitude) {
+  // Round latitude and longitude to 4 decimal places
+  const roundedLatitude = latitude.toFixed(4);
+  const roundedLongitude = longitude.toFixed(4);
+
+  const latitudeDirection = latitude >= 0 ? 'N' : 'S';
+  const longitudeDirection = longitude >= 0 ? 'E' : 'W';
+
+  // Return the formatted string with rounded values
+  return `${Math.abs(roundedLatitude)}° ${latitudeDirection}, ${Math.abs(roundedLongitude)}° ${longitudeDirection}`;
 }

pages/dev/test-site/explore/main.styl

@@ -94,16 +94,16 @@ h3,h4,p
 
 .overlay-div
   position: absolute
-  top: 0
+  top: 10%
   left: 0
   z-index: 1000
-  background: rgba(255, 255, 255, 0.9)
-  padding: 8px
   border-radius: 0 4px 4px 0
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
-  max-height: 100vh 
+  height: 90vh 
   overflow-y: auto
-  width: 30%
+  width 100%
+  padding 8px
+  padding-top 0
 
 .overlay-div > *:not(:last-child) 
   margin-bottom 8px
@@ -169,4 +169,51 @@ h3,h4,p
 .details-image
   width 40px
   margin-left 10px
-  margin-top 4px
+  margin-top 4px
+
+.sidebox
+  position absolute
+  z-index 1000
+  height 100vh
+  width 30%
+  top 0
+  left 0
+  background rgba(255, 255, 255, 0.8)
+
+  .title
+    color black
+    position fixed
+    width 30%
+    background rgba(255, 255, 255, 0.85)
+    margin 0
+    height 10vh
+    display flex
+    flex-direction column
+    align-items center
+    justify-content center
+
+    h1
+      margin-bottom 0
+      margin-top 0
+
+.close-btn
+  position absolute
+  top 10px
+  right 10px
+  background-color #333
+  color white
+  border none
+  border-radius 50%
+  width 30px
+  height 30px
+  display flex
+  justify-content center
+  align-items center
+  font-size 15px
+  cursor pointer
+  box-shadow 0 4px 8px rgba(0, 0, 0, 0.2)
+  transition background-color 0.3s, box-shadow 0.3s
+
+.close-btn:hover
+  background-color #555
+  box-shadow 0 6px 12px rgba(0, 0, 0, 0.3)