Add footprint point hover/click actions

Author: rachelekm

demo/app/src/components/Map/DynamicMap.js

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import Leaflet from 'leaflet';
 import * as ReactLeaflet from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
+import Footprint from './Footprint';
 
 import styles from './Map.module.scss';
 
@@ -27,6 +28,7 @@ const Map = ({ children, className, width, height, ...rest }) => {
 
   return (
     <MapContainer className={mapClassName} {...rest}>
+      <Footprint />
       {children(ReactLeaflet, Leaflet)}
     </MapContainer>
   )

demo/app/src/components/Map/Footprint.js

@@ -0,0 +1,63 @@
+import { useMap } from 'react-leaflet';
+import { useEffect, useState } from 'react';
+import { useAppContext } from 'src/context/appContext';
+
+import styles from './Map.module.scss';
+
+
+function getCoords(geojson){
+    return [geojson.geometry.coordinates[1], geojson.geometry.coordinates[0]]
+}
+
+export default function Footprint() {
+    const map = useMap();
+    const [activeMarkerHover, setActiveMarkerHover] = useState(null);
+    const [previousMarkerHover, setPreviousMarkerHover] = useState(null);
+    const [activeMarkerClick, setActiveMarkerClick] = useState(null);
+    const [previousMarkerClick, setPreviousMarkerClick] = useState(null);
+    const { selectedOpportunity, hoveredOpportunity } = useAppContext();
+    const footprintIcon = new L.divIcon({className: styles.footprintCircle});
+
+    useEffect(() => {
+        if (!activeMarkerClick && previousMarkerClick){
+            map.removeLayer(previousMarkerClick);
+            setPreviousMarkerClick(null);
+        }
+        if (!activeMarkerHover && previousMarkerHover){
+            map.removeLayer(previousMarkerHover);
+            setPreviousMarkerHover(null);
+        }
+        if (activeMarkerClick && previousMarkerClick && (activeMarkerClick !== previousMarkerClick)){
+            map.removeLayer(previousMarkerClick);
+            setPreviousMarkerClick(activeMarkerClick);
+        }
+        previousMarkerHover && map.removeLayer(previousMarkerHover);
+        activeMarkerHover && map.addLayer(activeMarkerHover);
+        activeMarkerClick && map.addLayer(activeMarkerClick) && map.flyTo(getCoords(selectedOpportunity), 9);
+    },[activeMarkerHover, previousMarkerHover, activeMarkerClick, previousMarkerClick]);
+
+    useEffect(() => {
+        activeMarkerHover && setPreviousMarkerHover(activeMarkerHover);
+        activeMarkerClick && setPreviousMarkerClick(activeMarkerClick);
+        if (hoveredOpportunity){
+            setActiveMarkerHover(new L.Marker(getCoords(hoveredOpportunity), {
+                icon: footprintIcon
+            }));
+        }
+        else {
+            setActiveMarkerHover(null);
+        }
+
+        if(selectedOpportunity) {
+            setActiveMarkerClick(new L.Marker(getCoords(selectedOpportunity), {
+                icon: footprintIcon
+            }));
+            setActiveMarkerHover(null);
+        }
+        else {
+            setActiveMarkerClick(null);
+        }
+    }, [hoveredOpportunity, selectedOpportunity]);
+
+    return null;
+}

demo/app/src/components/Map/Map.module.scss

@@ -1,4 +1,26 @@
 .map {
   width: 100%;
   height: 100%;
-}
+}
+
+.footprintCircle {
+  display: table-cell;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 50%;
+  border: 2px solid #FA00FF;
+  width: 24px !important;
+  height: 24px !important;
+
+  &:before{
+      display: table-cell;
+      position: absolute;
+      top: 6px;
+      left: 6px;
+      content: "";
+      border-radius: 50%;
+      background-color: #FA00FF;
+      width: 10px;
+      height: 10px;
+  }
+}

demo/app/src/components/Sidebar/Opportunity.js

@@ -5,10 +5,18 @@ export default function Opportunity({
     title,
     provider,
     start,
-    end
+    end,
+    onMouseEnter,
+    onMouseLeave,
+    onClick
 }) {
   return (
-    <div className={styles.opportunityPreview}>
+    <div
+        className={styles.opportunityPreview}
+        onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
         <h1>{title}</h1>
         <h2>{provider}</h2>
         <div className={styles.previewStartDate}>

demo/app/src/components/Sidebar/OpportunityDetail.js

@@ -0,0 +1,24 @@
+import styles from './Sidebar.module.scss'
+import { useAppContext } from 'src/context/appContext';
+import Button from '@components/Button';
+
+export default function OpportunityDetail() {
+  const { selectedOpportunity, setSelectedOpportunity, setHoveredOpportunity } = useAppContext();
+
+  return (
+    <div className={styles.opportunityDetail}>
+        <div className={styles.topBar}>
+            <h3 className={styles.heading}>Detail</h3>
+            <Button
+              onClick={() => {
+                setSelectedOpportunity(null);
+                setHoveredOpportunity(null);
+            }}
+            >
+              x
+            </Button>
+        </div>
+        <div>{selectedOpportunity.id}</div>
+    </div>
+  );
+}

demo/app/src/components/Sidebar/OpportunityList.js

@@ -4,7 +4,7 @@ import { useAppContext } from 'src/context/appContext';
 import { parseStacDatetime } from 'src/utils';
 
 export default function OpportunityList() {
-  const { opportunities, setHoveredOpportunity, setSelectedOpportunity } = useAppContext();
+  const { opportunities, selectedOpportunity, setHoveredOpportunity, setSelectedOpportunity } = useAppContext();
 
   function mouseInStyleChange(e) {
     e.target.style.outline = 'red';
@@ -25,13 +25,17 @@ function mouseOutStyleChange(e) {
                   provider={provider}
                   start={start}
                   end={end}
-                  // onMouseEnter={(e) => {
-                  //     mouseInStyleChange(e);
-                  //     setHoveredOpportunity(index)}}
-                  // onMouseLeave={(e) => {
-                  //     mouseOutStyleChange(e);
-                  //     setHoveredOpportunity(null)}}
-                  // onClick={(e) => setSelectedOpportunity(index)}
+                  onMouseEnter={(e) => {
+                    if(!selectedOpportunity){
+                      mouseInStyleChange(e);
+                      setHoveredOpportunity(opportunities[provider][index])}}
+                    }
+                  onMouseLeave={(e) => {
+                    if(!selectedOpportunity){
+                      mouseOutStyleChange(e);
+                      setHoveredOpportunity(null)}}
+                    }
+                  onClick={(e) => setSelectedOpportunity(opportunities[provider][index])}
               />
             })
         })

demo/app/src/components/Sidebar/Sidebar.js

@@ -11,17 +11,16 @@ import { useAppContext } from 'src/context/appContext';
 import OpportunityList from './OpportunityList';
 import { useEffect, useState } from 'react';
 import { ALL_PROVIDERS as providers } from 'src/utils/constants';
+import OpportunityDetail from './OpportunityDetail';
 
 export default function Sidebar(props) {
   const {
-    opportunities,
+    selectedOpportunity,
     isLoadingOpps,
     errorOpps,
     openFilters,
     setOpenFilters,
     products,
-    isLoadingProducts,
-    isErrorProducts,
     userParams,
     setUserParams
   } = useAppContext();
@@ -151,6 +150,9 @@ export default function Sidebar(props) {
           <RingLoader color="#5fbb9d" />
         </div>
       )}
+      {!!selectedOpportunity && (
+        <OpportunityDetail />
+      )}
     </div>
   );
 }