solve the street view bug

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

Hide file tree

Showing 6 changed files with 39 additions and 20 deletions.
diff --git a/components/map/Map.tsx b/components/map/Map.tsx
@@ -25,6 +25,8 @@ const Map = () => {
     useEffect(() => {
         mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN as string
 
+
+
         const lng = -73.913;
         const lat = 40.763;
         const zoom = 11;
@@ -86,7 +88,7 @@ const Map = () => {
                     type: 'fill',
                     source: 'coastal_flooding',
                     layout: {
-                        visibility:"visible"
+                        visibility: "visible"
                     },
                     paint: {
                         "fill-color": [
@@ -106,7 +108,7 @@ const Map = () => {
                     type: 'fill',
                     source: 'environmental_justice_areas',
                     layout: {
-                        visibility:"none"
+                        visibility: "none"
                     },
                     paint: {
                         "fill-color": [
@@ -126,7 +128,7 @@ const Map = () => {
                     type: 'fill',
                     source: 'hurricane_evacuation_zones',
                     layout: {
-                        visibility:"none"
+                        visibility: "none"
                     },
                     paint: {
                         "fill-color": [
@@ -142,7 +144,7 @@ const Map = () => {
                             ['all', ['==', ['get', "hurricane_"], "5"]],
                             "#B9D7DA",
                             ['all', ['==', ['get', "hurricane_"], "6"]],
-                        "#D9E8EA",
+                            "#D9E8EA",
                             'transparent'
                         ],
                         'fill-opacity': 1
@@ -155,7 +157,7 @@ const Map = () => {
                     type: 'fill',
                     source: 'stormwater_flooding',
                     layout: {
-                        visibility:"none"
+                        visibility: "none"
                     },
                     paint: {
                         "fill-color": [
@@ -200,7 +202,7 @@ const Map = () => {
 
 
     return (
-        <div className='relative w-full h-full'>
+        <div className='map relative w-full h-full'>
             <div className={`absolute left-0 w-full z-10 transition-all duration-[1500ms] ease-in-out  ${openStreetView ? "top-[50%] h-[50vh]" : "top-[0%] h-[100vh]"}`} ref={mapContainer}></div>
             <MapLayer />
         </div>

diff --git a/components/streetView/StreetInfo.tsx b/components/streetView/StreetInfo.tsx
@@ -22,7 +22,7 @@ const StreetInfo = ({ openStreetView }: Props) => {
   return (
     <>
       {
-        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`}>
+        openStreetView && <div className={`absolute bottom-[-100%] flex flex-col 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`}>
           <div className='flex justify-between items-center w-full'>
             <h2 className='font-bold text-heading text-content_black'>{selectedSitesFeatures.properties['Place']}</h2>
 
@@ -36,9 +36,11 @@ const StreetInfo = ({ openStreetView }: Props) => {
             {/* <Image width={24} height={24} src="./icons/info.svg" alt='info' /> */}
             <img src="/icons/info.svg" alt="" className='w-6 h-6' />
           </div>
-          <p className={`${expanded ? "visible" : "hidden"} text-medium text-black leading-normal`}>
-            {selectedSitesFeatures.properties.Description}
-          </p>
+          <div className='flex-1 overflow-scroll'>
+            <p className={`${expanded ? "visible" : "hidden"} text-medium text-black leading-normal`}>
+              {selectedSitesFeatures.properties.Description}
+            </p>
+          </div>
         </div>
       }
     </>

diff --git a/components/streetView/StreetView.tsx b/components/streetView/StreetView.tsx
@@ -55,12 +55,12 @@ const StreetView = () => {
 
     const [clicked, setClicked] = useState({
         "Street View": false,
-        "Minor Flooding": false,
+        "Minor Flooding": true,
         "Moderate Flooding": false,
         "Major Flooding": false,
     })
 
-    const [streetViewImgFloodHeight, setStreetViewImgFloodHeight] = useState(0)
+    const [streetViewImgFloodHeight, setStreetViewImgFloodHeight] = useState(1)
     const [streetViewImgAngle, setStreetViewImgAngle] = useState(1)
     const [streetViewImgFullscreen, setstreetViewImgFullscreen] = useState(false)
 
@@ -133,7 +133,10 @@ 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/${urlID}_F${streetViewImgFloodHeight}_V${streetViewImgAngle}.png`} alt="" className='w-full h-full object-cover' />
+                <div className='w-full h-full overflow-hidden'>
+                    <img src={`https://raw.githubusercontent.com/BetaNYC/floodgen-images/main/flood_image_output/${urlID}_F${streetViewImgFloodHeight}_V${streetViewImgAngle}.png`} alt="" className={`w-full h-[125%] aspect-[787/500] object-bottom`} />
+                </div>
+
                 <div className={`pt-[1.75rem] lg:pl-8`}>
                     <div className='absolute top-6 left-8 flex gap-[1rem] ml-[4.5rem] lg:ml-[18.56rem] overflow-x-scroll [&::-webkit-scrollbar]:hidden'>
                         {
@@ -150,6 +153,16 @@ 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>
+                    {
+                        streetViewImgAngle === 1 ?
+                            <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="" />
+                                <p>Disclaimer: AI generated photos</p>
+                            </div>
+
+                    }
 
                     {/* <Image width={80} height={80} src="./icons/fullscreen.svg" alt="fullscreen" className='absolute right-4 bottom-0 opacity-75 cursor-pointer' /> */}
                 </div>
@@ -163,8 +176,6 @@ const StreetView = () => {
                                 <ArrowsPointingInIcon className=' w-5 h-5 text-black opacity-75 cursor-pointer' />
                             </div>
                         </div>
-
-
                     </div>
                 )
             }

diff --git a/hooks/useTooltips.tsx b/hooks/useTooltips.tsx
@@ -6,6 +6,10 @@ import "../components/map/Map.css"
 
 import * as d3 from "d3"
 
+type Props = {
+    node: HTMLInputElement
+}
+
 const useTooltips = () => {
     const { map } = useContext(MapContext) as MapContextType
 

diff --git a/public/logos/fg_logo.png b/public/logos/fg_logo.png
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -29,11 +29,11 @@ const config: Config = {
         button: "#FFFFFF"
       },
       fontSize: {
-        title: "30px",
-        heading: "18px",
-        medium: "14px",
-        small:"12px",
-        xsmall:"10px",
+        title: "1.875rem",
+        heading: "1.125rem",
+        medium: "0.875rem",
+        small:"0.75rem",
+        xsmall:"0.625rem",
       }
     },
   },