Merge pull request #260 from UW-Macrostrat/user_features

User features - saved locations

Author: amyfromandi

pages/dev/map/saved-locations/+Page.client.ts

@@ -18,8 +18,7 @@ import {
 } from "@macrostrat/map-interface";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
-import { DetailsPanel } from "./details-panel";
-import Legend from "./legend-text.mdx";
+import { DetailsPanel, SpotsPanel } from "./details-panel";
 import { useInDarkMode } from "@macrostrat/ui-components";
 import { usePageContext } from "vike-react/usePageContext";
 import {
@@ -36,7 +35,7 @@ const baseURL = "/dev/map/saved-locations";
 
 export function Page() {
   const [inspectPosition, onSelectPosition] = useMapLocationManager();
-
+  const [mapInstance, setMapInstance] = useState(null);
   const style = useSavedLocationsStyle();
   const inDarkMode = useInDarkMode();
 
@@ -58,8 +57,10 @@ export function Page() {
       contextPanel: h(
         PanelCard,
         { className: "context-panel" },
-        h(Legend, {
+        h(SpotsPanel, {
           colors: getColors(inDarkMode),
+          onSelectPosition,
+          map: mapInstance,
         })
       ),
       detailPanel: h(DetailsPanel, {
@@ -79,6 +80,7 @@ export function Page() {
         mapboxToken: mapboxAccessToken,
         mapPosition: inspectPosition,
         bounds: [-125, 24, -66, 49],
+        onMapLoaded: (map) => setMapInstance(map),
         onMapMoved(pos, map) {
           setURL(inspectPosition, map);
         },
@@ -129,6 +131,13 @@ function useMapLocationManager(): [MapPosition, PositionBuilder] {
     (position: mapboxgl.LngLat | null, map: mapboxgl.Map | undefined) => {
       setInspectPosition(position);
       setURL(position, map);
+      if (map) {
+        console.log("MAP!!", map)
+        map.flyTo({
+          center: [position.lng, position.lat],
+          zoom: position.zoom || 12,
+        });
+      }
     },
     []
   );
@@ -155,7 +164,7 @@ function setURL(position: mapboxgl.LngLat, map: mapboxgl.Map) {
 
 function buildHashParams(map, selectedPosition) {
   if (selectedPosition == null) return "";
-  const z = map.getZoom();
+  const z = map.getZoom() ?? 7;
   // Parse hash and add zoom level
   let q = new URLSearchParams(window.location.hash.slice(1));
   q.set("z", z.toFixed(0));

pages/dev/map/saved-locations/details-panel.ts

@@ -9,6 +9,7 @@ import {
 import { getColors } from "#/dev/map/rockd-strabospot/map-style";
 import { useInDarkMode } from "@macrostrat/ui-components";
 import { SaveLocationForm } from "./save-location";
+import mapboxgl from "mapbox-gl";
 import React, { useState, useEffect } from "react";
 
 
@@ -17,7 +18,7 @@ import React, { useState, useEffect } from "react";
 const h = hyper.styled(styles);
 export function DetailsPanel({ position, nearbyFeatures, onClose }) {
   if (position == null) return null;
-  let count = 22;
+  let count = 24;
 
   return h(
     LocationPanel,
@@ -26,34 +27,13 @@ export function DetailsPanel({ position, nearbyFeatures, onClose }) {
       position,
     },
     [
-      h(SaveLocationForm, { position, count }),
-      //h(CheckinsPanel, { nearbyFeatures }),
-      h(SpotsPanel, {
-        nearbyFeatures,
-      }),
+      h(SaveLocationForm, { position, count })
+      //h(CheckinsPanel, { nearbyFeatures })
     ]
   );
 }
 
-//implement tileserver api to reorient user to an exact location
-/*
-export function CheckinsPanel({ nearbyFeatures }) {
-  const checkins = useNearbyCheckins(nearbyFeatures);
-  const titleComponent = () =>
-    h(PanelHeader, {
-      title: "Checkins",
-      sourceLink: h(SystemLink, { href: "https://rockd.org" }, "Rockd"),
-      hasData: checkins.length != 0,
-    });
-
-  return h(FeatureTypePanel, {
-    features: checkins,
-    titleComponent,
-    featureComponent: CheckinFeature,
-  });
-}
- */
-export function SpotsPanel({ nearbyFeatures }) {
+export function SpotsPanel({ onSelectPosition, map }) {
   const [features, setFeatures] = useState([]); // State to store features
   const [loading, setLoading] = useState(true); // State to track loading
   const [error, setError] = useState(null); // State to track errors
@@ -79,11 +59,19 @@ export function SpotsPanel({ nearbyFeatures }) {
     fetchFeatures();
   }, []);
 
-  console.log("features!!", features)
-
-  const FeatureComponent = ({ data }) => {
+  const FeatureComponent = ({ data, onSelectPosition, map }) => {
+    const handleLinkClick = () => {
+      if (onSelectPosition) {
+        onSelectPosition({ lng: data.longitude, lat: data.latitude, zoom: 7 }, map);
+      }
+    };
   return h("div.feature", [
-    h("h3.feature-title", data.location_name),
+    h("h3.feature-title",
+      {
+        style: { cursor: "pointer", textDecoration: "bold", color: "purple" }, // Optional styling for a clickable look
+        onClick: handleLinkClick,
+      },
+      data.location_name),
     h("p.feature-description", data.location_description),
     h("p.feature-coordinates", [
       `Latitude: ${data.latitude}, Longitude: ${data.longitude}`,
@@ -107,7 +95,7 @@ export function SpotsPanel({ nearbyFeatures }) {
     titleComponent,
     loading,
     error,
-    featureComponent: FeatureComponent,
+    featureComponent: (props) => h(FeatureComponent, { ...props, onSelectPosition, map }),
   });
 }
 
@@ -166,40 +154,6 @@ function SystemLink({ href, children }) {
   ]);
 }
 
-export function LegendList() {
-  const darkMode = useInDarkMode();
-  const colors = getColors(darkMode);
-  return h("ul.legend-list", [
-    h(
-      LegendItem,
-      {
-        color: colors.checkins,
-        name: "My saved locations",
-      },
-      "Will show the user locations on the map. Need to build it within the tileserver."
-    ),
-  ]);
-}
-
-function LegendItem({ color, name, sourceLink, children }) {
-  let child = children;
-  if (typeof children === "string") {
-    child = h("p.description", children);
-  }
-
-  return h("li.legend-item", [
-    h(LegendHeader, { color, name, sourceLink }),
-    h("div.legend-body", child),
-  ]);
-}
-
-function LegendHeader({ color, name, sourceLink = null }) {
-  return h("div.legend-header", [
-    h(Swatch, { color }),
-    h("h4", name),
-    sourceLink,
-  ]);
-}
 
 function Swatch({ color }) {
   return h("span.swatch", { style: { backgroundColor: color } });

pages/dev/map/saved-locations/legend-text.mdx

@@ -50,6 +50,9 @@
     color: var(--secondary-color)
 
 .context-panel
+  overflow-y: auto
+  max-height: 100vh
+  width: fit-content
 
   h3
     margin-bottom: 0.5em

pages/dev/map/saved-locations/main.module.sass

@@ -41,7 +41,7 @@
       max-width: 180px
 
     select
-      max-width: 100px
+      max-width: 140px
       font-size: 0.9em
 
   .button-container