add the street view pic

components/infoPage/infoBox/InfoBox.tsx

@@ -63,7 +63,7 @@ const InfoBox = () => {
                     </div>
                 </div>
             </div>
-            <div className={`absolute top-[1.125rem] left-4 lg:left-[calc(100%_-_4.5rem)] flex items-center justify-center w-10 h-10 bg-[rgba(255,255,255,.65)] z-30 shadow-2xl`} onClick={() => boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}>
+            <div className={`absolute top-6 left-4 lg:left-[calc(100%_-_4.5rem)] flex items-center justify-center w-10 h-10 bg-[rgba(255,255,255,.65)] z-30 shadow-2xl`} onClick={() => boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}>
                 {
                     boxShown ? <XMarkIcon className='w-6 h-6 text-black' /> : <Bars3Icon className='w-5 h-5 text-black' />
                 }

components/map/mapLayer/MapLayerBtns.tsx

@@ -46,7 +46,7 @@ const MapLayerBtns = ({ clicked, buttonClickHandler }: Props) => {
 
     return (
         <>
-            <div className={`absolute left-20 lg:left-4  flex items-center gap-4 transition-all duration-[1500ms] ease-in-out z-20 ${openStreetView ? " top-[calc(50%_+_1.125rem)]" : "top-[1.125rem]"}`}>
+            <div className={`absolute left-20 lg:left-4  flex items-center gap-4 transition-all duration-[1500ms] ease-in-out z-20 ${openStreetView ? " top-[calc(50%_+_1.5rem)]" : "top-[1.5rem]"}`}>
                 {/* <Image width={80} height={80} src="./icons/previous.svg" alt='previous' className='border-2 border-black' /> */}
                 {/* {
                     openStreetView && <Previous />

components/streetView/StreetInfo.tsx

@@ -16,14 +16,13 @@ const StreetInfo = ({ openStreetView }: Props) => {
 
 
   const selectedSitesFeatures = sites.features.filter(site => site.properties.ID === id)[0]
-  console.log(selectedSitesFeatures)
 
   const [expanded, setExpanded] = useState(true)
 
   return (
     <>
       {
-        openStreetView && <div className={`absolute bottom-[-100%] lg:left-8 lg:top-7 px-4 pt-[1.56rem] lg:pt-4 w-full lg:w-[17.56rem] ${expanded ? "h-[100%] lg:h-[calc(100%_-_3.5rem)]" : "h-[9.375rem] lg:h-[9.5rem]"}  bg-white rounded-[1rem] z-20 overflow-scroll`}>
+        openStreetView && <div className={`absolute bottom-[-100%] lg:left-4 lg:top-6 px-4 pt-[1.56rem] lg:pt-4 w-full lg:w-[17.56rem] ${expanded ? "h-[100%] lg:h-[calc(100%_-_3.5rem)]" : "h-[9.375rem] lg:h-[9.5rem]"}  bg-white rounded-[1rem] z-20 overflow-scroll`}>
           <div className='flex justify-between items-center w-full'>
             <h2 className='font-bold text-heading text-content_black'>{selectedSitesFeatures.properties['Place']}</h2>
 

components/streetView/StreetView.tsx

@@ -4,13 +4,15 @@ import FloodingButton from './FloodingButton'
 import Order from '@/shared/Order'
 
 import useHoverStatus from '@/hooks/useHoverStatus'
+import useOnClickSites from '@/hooks/useOnClickSites'
 
 import StreetInfo from './StreetInfo'
 
 
 import { StreetViewContext, StreetViewType } from '@/contexts/StreetViewContext'
 import { MarkerContext, MarkerContextType } from '@/contexts/MarkerContext'
 
+
 import { ArrowsPointingOutIcon } from '@heroicons/react/20/solid'
 
 type floodingTypes = 'Street View' | 'Minor Flooding' | "Moderate Flooding" | "Major Flooding"
@@ -46,6 +48,9 @@ const floodingBtnsData: {
 const StreetView = () => {
     const { openStreetView, setOpenStreetView } = useContext(StreetViewContext) as StreetViewType
     const { marker, direction, directionDegree, setDirectionDegree } = useContext(MarkerContext) as MarkerContextType
+    const { id } = useOnClickSites()
+
+    const urlID = id < 10 ? `0${id}`: `${id}`
 
     const [clicked, setClicked] = useState({
         "Street View": false,
@@ -54,6 +59,9 @@ const StreetView = () => {
         "Major Flooding": false,
     })
 
+    const [streetViewImgFloodHeight, setStreetViewImgFloodHeight] = useState(0)
+    const [streetViewImgAngle, setStreetViewImgAngle] = useState(1)
+
     const { hovered, mouseEnterHandler, mouseLeaveHandler } = useHoverStatus(floodingBtnsData)
 
 
@@ -68,6 +76,22 @@ const StreetView = () => {
 
         (Object.keys(newClicked) as floodingTypes[]).forEach((c: floodingTypes) => c === title ? newClicked[c] = true : newClicked[c] = false)
         setClicked(newClicked)
+
+        switch(title) {
+            case "Street View":
+                setStreetViewImgFloodHeight(0)
+                break
+            case "Minor Flooding":
+                setStreetViewImgFloodHeight(1)
+                break
+            case "Moderate Flooding":
+                setStreetViewImgFloodHeight(2)
+                break
+            case "Major Flooding":
+                setStreetViewImgFloodHeight(3)
+                break
+
+        }
     }
 
     const changeStreetViewClickHandler = (o: 'previous' | 'next') => {
@@ -76,12 +100,25 @@ const StreetView = () => {
             case 'previous':
                 direction!.setRotation(directionDegree - degree)
                 setDirectionDegree(curr => curr - degree)
+                if(streetViewImgAngle === 1) {
+                    setStreetViewImgAngle(8)
+                } else {
+                    setStreetViewImgAngle(prev => prev-1)
+                }
                 break
             case 'next':
                 direction!.setRotation(directionDegree + degree)
                 setDirectionDegree(curr => curr + degree)
+                if (streetViewImgAngle === 8) {
+                    setStreetViewImgAngle(1)
+                } else {
+                    setStreetViewImgAngle(prev => prev + 1)
+                }
                 break
         }
+
+
+
     }
 
     const fullScreenStreetViewClickHandler = () => {
@@ -90,9 +127,9 @@ const StreetView = () => {
 
     return (
         <div className={`absolute top-0 left-0  ${openStreetView ? "translate-y-0" : "translate-y-[-100%]"} w-full h-[50%] z-20 transition-all duration-[1500ms] ease-in-out`}>
-            {/* <img src="https://raw.githubusercontent.com/BetaNYC/floodgen-images/main/flood_image_output/01_F0_V2.png?token=GHSAT0AAAAAACED3PLELYEM7BONTPFDFV4UZP2JJVA" alt="" className='w-full h-full object-cover' /> */}
+            <img src={`https://raw.githubusercontent.com/BetaNYC/floodgen-images/main/flood_image_output/${urlID}_F${streetViewImgFloodHeight}_V${streetViewImgAngle}.png`} alt="" className='w-full h-full object-cover' />
             <div className={`pt-[1.75rem] lg:pl-8`}>
-                <div className='flex gap-[1rem] ml-[4.5rem] lg:ml-[18.56rem] overflow-x-scroll [&::-webkit-scrollbar]:hidden'>
+                <div className='absolute top-6 left-8 flex gap-[1rem] ml-[4.5rem] lg:ml-[18.56rem] overflow-x-scroll [&::-webkit-scrollbar]:hidden'>
                     {
                         floodingBtnsData.map((f, i) => <FloodingButton key={f.title} clicked={clicked[f.title]} hovered={hovered[i]} title={f.title} src={clicked[f.title] || hovered[i] ? f.src_white : f.src} clickHandler={() => floodingButtonClickHandler(f.title)} mouseEnterHandler={() => mouseEnterHandler(i)} mouseLeaveHandler={mouseLeaveHandler} />)
                     }

hooks/useOnClickSites.tsx

@@ -55,6 +55,7 @@ const useOnClickSites = () => {
 
   }, [map, openStreetView]);
 
+  console.log(id)
 
   return {id}
 

hooks/useTooltips.tsx

@@ -41,7 +41,6 @@ const useTooltips = () => {
                 /* @ts-ignore */
                 .style("left", e.point.x - tooltip.node().clientWidth / 2.0 + "px")
 
-            console.log(tooltip)
         })
 
         map?.on("mouseenter", "stormwater_flooding", (e: MapMouseEvent & EventData) => {