change the marker default angle to yaw

BetaNYC · Mar 21, 2024 · dda3cc9 · dda3cc9
1 parent a2e46bb
commit dda3cc9
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 22 deletions.
diff --git a/components/streetView/StreetView.tsx b/components/streetView/StreetView.tsx
@@ -46,24 +46,21 @@ const floodingBtnsData: {
 
 
 const StreetView = () => {
-    const { openStreetView, setOpenStreetView } = useContext(StreetViewContext) as StreetViewType
-    const { marker, direction, directionDegree, setDirectionDegree } = useContext(MarkerContext) as MarkerContextType
+    const { openStreetView,
+        streetViewImgFloodHeight,
+        setStreetViewImgFloodHeight,
+        streetViewImgAngle,
+        setStreetViewImgAngle,
+        streetViewImgFullscreen,
+        setstreetViewImgFullscreen,
+        clicked,
+        setClicked } = useContext(StreetViewContext) as StreetViewType
+    const { direction, directionDegree, setDirectionDegree } = useContext(MarkerContext) as MarkerContextType
     const { id } = useOnClickSites()
     const { hovered, mouseEnterHandler, mouseLeaveHandler } = useHoverStatus(floodingBtnsData)
 
     const urlID = id < 10 ? `0${id}` : `${id}`
 
-    const [clicked, setClicked] = useState({
-        "Street View": false,
-        "Minor Flooding": true,
-        "Moderate Flooding": false,
-        "Major Flooding": false,
-    })
-
-    const [streetViewImgFloodHeight, setStreetViewImgFloodHeight] = useState(1)
-    const [streetViewImgAngle, setStreetViewImgAngle] = useState(1)
-    const [streetViewImgFullscreen, setstreetViewImgFullscreen] = useState(false)
-
 
 
 
@@ -153,9 +150,9 @@ const StreetView = () => {
                     <div className='absolute right-4  bottom-10 flex justify-center items-center w-[2.5rem] h-[2.5rem] bg-[rgba(255,255,255,0.65)] rounded-full cursor-pointer shadow-2xl' onClick={() => fullScreenStreetViewClickHandler("open")}>
                         <ArrowsPointingOutIcon className=' w-5 h-5 text-black opacity-75 cursor-pointer' />
                     </div>
-                    <div className='absolute left-[calc(50%_-_105px)] bottom-10 px-4 py-2 bg-black bg-opacity-20'>Image {streetViewImgAngle}/7</div>
+                    <div className='absolute left-[calc(50%_-_105px)] bottom-10 px-4 py-2 bg-black bg-opacity-20'>Image {streetViewImgAngle}/8</div>
                     {
-                        streetViewImgAngle === 1 ?
+                        streetViewImgFloodHeight === 0 ?
                             <img src="/logos/fg_logo.png" className='absolute right-2 bottom-2 w-[15px] h-[17.54px]' alt="" /> :
                             <div className='absolute left-0 bottom-0 px-2 py-2 flex justify-center gap-2 bg-black bg-opacity-20'>
                                 <img src="/logos/fg_logo.png" className='w-[15px] h-[17.54px]' alt="" />

diff --git a/contexts/StreetViewContext.tsx b/contexts/StreetViewContext.tsx
@@ -2,7 +2,25 @@ import React, { createContext, useState, Dispatch, SetStateAction, ReactNode } f
 
 export type StreetViewType = {
     openStreetView: boolean | null,
-    setOpenStreetView: Dispatch<SetStateAction<boolean>>
+    setOpenStreetView: Dispatch<SetStateAction<boolean>>,
+    streetViewImgFloodHeight: number,
+    setStreetViewImgFloodHeight: Dispatch<SetStateAction<number>>,
+    streetViewImgAngle: number,
+    setStreetViewImgAngle: Dispatch<SetStateAction<number>>,
+    streetViewImgFullscreen: boolean,
+    setstreetViewImgFullscreen: Dispatch<SetStateAction<boolean>>,
+    clicked:{
+        "Street View": boolean,
+        "Minor Flooding": boolean,
+        "Moderate Flooding": boolean,
+        "Major Flooding": boolean,
+    },
+    setClicked: Dispatch<SetStateAction<{
+        "Street View": boolean,
+        "Minor Flooding": boolean,
+        "Moderate Flooding": boolean,
+        "Major Flooding": boolean,
+    }>>
 }
 
 type Props = {
@@ -14,12 +32,32 @@ const StreetViewContext = createContext<StreetViewType | null>(null)
 
 const StreetViewProvider = ({ children }: Props) => {
     const [openStreetView, setOpenStreetView] = useState(false)
+    const [streetViewImgFloodHeight, setStreetViewImgFloodHeight] = useState(1)
+    const [streetViewImgAngle, setStreetViewImgAngle] = useState(1)
+    const [streetViewImgFullscreen, setstreetViewImgFullscreen] = useState(false)
+    const [clicked, setClicked] = useState({
+        "Street View": false,
+        "Minor Flooding": true,
+        "Moderate Flooding": false,
+        "Major Flooding": false,
+    })
 
     return (
-        <StreetViewContext.Provider value={{ openStreetView, setOpenStreetView }}>
+        <StreetViewContext.Provider value={{
+            openStreetView,
+            setOpenStreetView,
+            streetViewImgFloodHeight,
+            setStreetViewImgFloodHeight,
+            streetViewImgAngle,
+            setStreetViewImgAngle,
+            streetViewImgFullscreen,
+            setstreetViewImgFullscreen,
+            clicked,
+            setClicked
+        }}>
             {children}
         </StreetViewContext.Provider>
     )
 }
 
-export  { StreetViewContext, StreetViewProvider }
+export { StreetViewContext, StreetViewProvider }
diff --git a/hooks/useOnClickSites.tsx b/hooks/useOnClickSites.tsx
@@ -13,7 +13,7 @@ import { markerCreator } from '@/utils/markerCreator'
 const useOnClickSites = () => {
 
   const { map } = useContext(MapContext) as MapContextType
-  const { openStreetView, setOpenStreetView } = useContext(StreetViewContext) as StreetViewType
+  const { openStreetView, setOpenStreetView, setStreetViewImgAngle, setStreetViewImgFloodHeight, setClicked } = useContext(StreetViewContext) as StreetViewType
   const { setDirection, setMarker, setDirectionDegree } = useContext(MarkerContext) as MarkerContextType
 
   const [id, setId] = useState(0)
@@ -37,17 +37,26 @@ const useOnClickSites = () => {
       }
 
 
+      const yaw = Math.round(e.features[0].properties.Yaw)
 
       const { direction, marker } = markerCreator(e, map)
-      setDirectionDegree(0)
+      setDirectionDegree(yaw)
       setDirection(prevdirection => {
         prevdirection?.remove()
-        return direction
+        return direction.setRotation(yaw)
       })
       setMarker(prevmarker => {
         prevmarker?.remove()
         return marker
       })
+      setStreetViewImgAngle(1)
+      setStreetViewImgFloodHeight(1)
+      setClicked({
+        "Street View": false,
+        "Minor Flooding": true,
+        "Moderate Flooding": false,
+        "Major Flooding": false,
+      })
     });
 
 
@@ -57,7 +66,7 @@ const useOnClickSites = () => {
 
   console.log(id)
 
-  return {id}
+  return { id }
 
 }