add the legend

BetaNYC · Apr 23, 2024 · 4340191 · 4340191
1 parent 555e743
commit 4340191
Show file tree

Hide file tree

Showing 16 changed files with 86 additions and 63 deletions.
diff --git a/components/infoPage/infoBox/InfoAI.tsx b/components/infoPage/infoBox/InfoAI.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const InfoAI = () => {
     return (
-        <div className='max-w-[60rem] flex flex-col gap-5 mt-5'>
+        <div className='flex flex-col gap-5 w-[75%]'>
             <h2 className='font-semibold text-heading text-black'>How to identify an AI generated image</h2>
             <p className='font-regular text-medium text-black'>FloodGen uses AI to generate photorealistic images of potential flooding scenarios to raise awareness, bolster community preparedness, and support local governments resilience strategies. The street view images are transformed with a generative artificial intelligence process called CycleGAN to depict projected flood scenarios. CycleGAN is an image-to-image translation model that takes an input of a normal street view image and reprocesses the pixels to illustrate an image with flooding.</p>
             <p className='font-regular text-medium text-black'>All FloodGen generated imagery that is created with the use of generative artificial intelligence includes a FloodGen logo, located on the bottom-right corner of the image. View the image below for a few more tips on how to identify an AI generated flood image:</p>

diff --git a/components/infoPage/infoBox/InfoAbout.tsx b/components/infoPage/infoBox/InfoAbout.tsx
@@ -8,7 +8,7 @@ type Props = {
 const InfoAbout = ({ clickHandler }: Props) => {
     return (
         <>
-            <div className='flex flex-col gap-5 lg:gap-0 mt-5'>
+            <div className='flex flex-col gap-5 lg:gap-0 w-[75%] lg:w-[725px] '>
                 <div className='flex flex-col gap-3 mb-5 max-w-[60rem]'>
                     <p className='font-regular text-medium text-black'>Today, 1.3 million New York City residents live within or directly adjacent to the floodplain.1 Flood damage is expensive, extensive, and oftentimes predictable. Maps of predicted flooding are helpful planning tools, but aerial views distance viewers from its potential impact. If we show the reality of predicted flooding through photorealistic imagery, could people be more prepared?</p>
                     <p className='font-regular text-medium text-black'>FloodGen is an advocacy tool that uses generative artificial intelligence (GenAI) to create photorealistic images of predicted flooding. Projected flood imagery from FloodGen can be integrated within community engagement strategies to:</p>
@@ -26,7 +26,7 @@ const InfoAbout = ({ clickHandler }: Props) => {
                         <h2 className='lg:order-2 lg:w-[277px] font-bold lg:font-medium text-medium text-title_black'>Explore flood prone neighborhoods in NYC</h2>
                     </div>
                     <div className='flex flex-col'>
-                        <img src="https://raw.githubusercontent.com/BetaNYC/floodgen-images/main/flooding_before-after.gif" alt="" className='mb-2 w-[394.67px] h-[222px] rounded-lg' />
+                        <img src="https://raw.githubusercontent.com/BetaNYC/floodgen-images/main/flooding_before-after_NEW_sm.gif" alt="" className='mb-2 w-[394.67px] h-[222px] rounded-lg' />
                         <h2 className='lg:order-2 lg:w-[400px] font-bold lg:font-medium text-medium text-title_black'>Visualize flooding street view with AI generated flooding images </h2>
                     </div>
                 </div>

diff --git a/components/infoPage/infoBox/InfoBox.tsx b/components/infoPage/infoBox/InfoBox.tsx
@@ -56,18 +56,21 @@ const InfoBox = () => {
                     {/* <InfoTitle /> */}
                     <div className='lg:flex lg:mt-8'>
                         <div className='grid grid-cols-2 gap-2 lg:flex lg:flex-col lg:gap-5  text-[#9C9C9C] '>
-                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "About" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("About")}>About</div>
-                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "Introduction" && "pb-[0.05rem]  text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={narrativeClickHandler}>Introduction</div>
-                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "AI" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("AI")}>How to identify an AI generated image</div>
-                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "Credit" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Credit")}>Credits</div>
-                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "Contact" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Contact")}>Contact</div>
+                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1rem]  cursor-pointer ${selected === "About" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("About")}>About</div>
+                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1rem]  cursor-pointer ${selected === "Introduction" && "pb-[0.05rem]  text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={narrativeClickHandler}>Introduction</div>
+                            <div className={`lg:w-[55%] font-bold text-4 lg:text-[1rem]  cursor-pointer ${selected === "AI" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("AI")}>How to identify an AI generated image</div>
+                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1rem]  cursor-pointer ${selected === "Credit" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Credit")}>Credits</div>
+                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1rem]  cursor-pointer ${selected === "Contact" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Contact")}>Contact</div>
                         </div>
-                        {
-                            selected === "About" ? <InfoAbout clickHandler={() => boxShownClickHandler(false)} /> :
-                                selected === "AI" ? <InfoAI /> :
-                                    selected === "Contact" ? <InfoContact /> :
-                                        <InfoCredit />
-                        }
+                        <div className='flex-1'>
+                            {
+                                selected === "About" ? <InfoAbout clickHandler={() => boxShownClickHandler(false)} /> :
+                                    selected === "AI" ? <InfoAI /> :
+                                        selected === "Contact" ? <InfoContact /> :
+                                            <InfoCredit />
+                            }
+                        </div>
+
                     </div>
                 </div>
             </div>

diff --git a/components/infoPage/infoBox/InfoContact.tsx b/components/infoPage/infoBox/InfoContact.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const InfoContact = () => {
     return (
-        <div className='lg:w-[60rem] h-full'>
+        <div className='w-[75%] h-full'>
         <iframe src="https://airtable.com/embed/appZoFVpDtz3OFCxM/pag9X6tn50U62HP9N/form"  width="100%" height="600px" style={{background: 'transparent', border: '1px solid #ccc'}}></iframe>
         </div>
 

diff --git a/components/infoPage/infoBox/InfoCredit.tsx b/components/infoPage/infoBox/InfoCredit.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const InfoCredit = () => {
   return (
-    <div className='max-w-[60rem] mt-5'>
+    <div className='w-[75%]'>
       <div className='flex flex-col gap-5'>
         <h2 className='font-semibold text-heading text-black'><a href="https://beta.nyc/" target="_blank" className='hover:underline'>BetaNYC</a></h2>
         <p className='font-regular text-medium text-black'>BetaNYC is a civic organization dedicated to improving lives in New York through civic design, technology, and data. With an aim to improve access to public interest technology, the Civic Innovation Lab at BetaNYC provides assistance with research, data analysis, and data visualization. This project was created by the Civic Innovation Lab at BetaNYC, with the initial research into the flood image generator model led by Vaishali Talwar.</p>
@@ -13,38 +13,38 @@ const InfoCredit = () => {
       </div>
       </div>
 
-      <div className='flex flex-col gap-5 mt-6'>
+      <div className='flex flex-col gap-5 mt-12'>
         <h2 className='font-semibold text-heading text-black'>Data Source</h2>
         <div>
           <h2 className='font-semibold text-medium text-black'>LiDAR Point Cloud</h2>
-          <p className='font-regular text-medium text-black'>Cyclomedia. 2023. Cyclomedia LiDAR Point Cloud v21.13.2. Accessed March 13, 2024. <a href="https://www.cyclomedia.com/us/producten/data-visualisatie/lidar-point-cloud" target="_blank">[link to website]</a></p>
+          <p className='font-regular text-medium text-black'>Cyclomedia. 2023. Cyclomedia LiDAR Point Cloud v21.13.2. Accessed March 13, 2024. <a href="https://www.cyclomedia.com/us/producten/data-visualisatie/lidar-point-cloud" target="_blank" className='hover:underline'>[link to website]</a></p>
         </div>
         <div>
           <h2 className='font-semibold text-medium text-black'>Street View Flood Height Threshold</h2>
-          <p className='font-regular text-medium text-black'>BetaNYC. 2022. NYC Batch Geocoder. Accessed March 13, 2024. <a href="http://geocoder.nyc/streetview" target="_blank">[link to website]</a></p>
+          <p className='font-regular text-medium text-black'>BetaNYC. 2022. NYC Batch Geocoder. Accessed March 13, 2024. <a href="http://geocoder.nyc/streetview" target="_blank" className='hover:underline'>[link to website]</a></p>
         </div>
         <div>
           <h2 className='font-semibold text-medium text-black'>ClimateGAN Cycle-GAN Image Generator</h2>
-          <p className='font-regular text-medium text-black'>ClimateGAN: Raising Climate Change Awareness by Generating Images of Floods. Schmidt et al. International Conference on Learning Representations, 2022. <a href="https://openreview.net/forum?id=EZNOb_uNpJk" target="_blank">[link to paper]</a> <a href="https://github.com/cc-ai/climategan" target="_blank">[link to GitHub repository]</a></p>
+          <p className='font-regular text-medium text-black'>ClimateGAN: Raising Climate Change Awareness by Generating Images of Floods. Schmidt et al. International Conference on Learning Representations, 2022. <a href="https://openreview.net/forum?id=EZNOb_uNpJk" target="_blank" className='hover:underline'>[link to paper]</a> <a href="https://github.com/cc-ai/climategan" target="_blank">[link to GitHub repository]</a></p>
         </div>
         <div>
           <h2 className='font-semibold text-medium text-black'>Coastal Flooding</h2>
-          <p className='font-regular text-medium text-black'>Federal Emergency Management Agency. Preliminary Flood Insurance Rate Maps (PFIRMs) 2015. Accessed February 9, 2024. <a href="https://dcp.maps.arcgis.com/home/item.html?id=1e56cf3d576849d1a6936f9cdcd3511d" target="_blank">[link to dataset]</a></p>
+          <p className='font-regular text-medium text-black'>Federal Emergency Management Agency. Preliminary Flood Insurance Rate Maps (PFIRMs) 2015. Accessed February 9, 2024. <a href="https://dcp.maps.arcgis.com/home/item.html?id=1e56cf3d576849d1a6936f9cdcd3511d" target="_blank" className='hover:underline'>[link to dataset]</a></p>
         </div>
         <div>
           <h2 className='font-semibold text-medium text-black'>Stormwater Flooding</h2>
-          <p className='font-regular text-medium text-black'>Flood 2050 Sea Level Rise. Accessed January 31, 2024. <a href="https://data.cityofnewyork.us/City-Government/NYC-Stormwater-Flood-Map-Moderate-Flood-with-2050-/5rzh-cyqd/about_data" target="_blank">[link to dataset]</a></p>
+          <p className='font-regular text-medium text-black'>Flood 2050 Sea Level Rise. Accessed January 31, 2024. <a href="https://data.cityofnewyork.us/City-Government/NYC-Stormwater-Flood-Map-Moderate-Flood-with-2050-/5rzh-cyqd/about_data" target="_blank" className='hover:underline'>[link to dataset]</a></p>
         </div>
         <div>
           <h2 className='font-semibold text-medium text-black'>Disadvantaged Communities</h2>
-          <p className='font-regular text-medium text-black'>New York State Energy Research and Development Authority (NYSERDA). 2023. Final Disadvantaged Communities (DAC) 2023. Accessed March 18, 2024. <a href="https://data.ny.gov/Energy-Environment/Final-Disadvantaged-Communities-DAC-2023/2e6c-s6fp/about_data" target="_blank">[link to dataset]</a></p>
+          <p className='font-regular text-medium text-black'>New York State Energy Research and Development Authority (NYSERDA). 2023. Final Disadvantaged Communities (DAC) 2023. Accessed March 18, 2024. <a href="https://data.ny.gov/Energy-Environment/Final-Disadvantaged-Communities-DAC-2023/2e6c-s6fp/about_data" target="_blank" className='hover:underline'>[link to dataset]</a></p>
         </div>
         <div>
           <h2 className='font-semibold text-medium text-black'>Hurricane Evacuation Zones</h2>
           <p className='font-regular text-medium text-black'>NYC Emergency Management Department (NYCEM). 2024. Hurricane Evacuation Zones. Accessed January 31, 2024.</p>
         </div>
       </div>
-      <div className='flex flex-col gap-5 mt-6'>
+      <div className='flex flex-col gap-5 mt-12'>
         <h3 className='font-semibold text-heading text-black'>Methodology & Limitations</h3>
         <p className='font-regular text-medium text-black'>The flood images featured on this website were generated using the open-source <a href="https://github.com/cc-ai/climategan" target="_blank" className='underl'>ClimateGAN</a> image generation models. The ClimateGAN model is licensed under GPL-3.0 and is open for public use, promoting transparency and collaboration. The model code, data, and pre-trained weights available in the original ClimateGAN repository were applied to Cylomedia street view images from the geocoder.nyc website to generate the photorealistic images of flooding. In order to generate images with mild, moderate, and major flooding levels, the threshold parameter of the model was set to 0.99, 0.9, and 0.8 respectively. Although these values do not correspond to exact measurements of flooding, we estimate that the mild, moderate, and major flooding levels correspond to the approximate ranges &lt; 0.4 inches, 0.4–12 inches, and 12–24 inches respectively. In a future iteration, we hope to improve the model performance by feeding an initial flood mask generated via the elevation tool on the geocoder.nyc website to the model. Stay tuned for further updates!</p>
       </div>

diff --git a/components/map/Map.css b/components/map/Map.css
@@ -36,7 +36,7 @@
     display: block;
     margin: 12px 0 12px 0;
     height: 1px;
-    width: 216px;
+    width: 100%;
     background-color: #c9c9c9;
 }
 

diff --git a/components/map/Map.tsx b/components/map/Map.tsx
@@ -3,6 +3,7 @@ import mapboxgl, { MapMouseEvent } from 'mapbox-gl'
 
 import { MapContext, MapContextType } from '@/contexts/MapContext'
 import { StreetViewContext, StreetViewType } from '@/contexts/StreetViewContext'
+import { NarrativeContext, NarrativeType } from '@/contexts/NarrativeContext'
 
 import useOnClickSites from '@/hooks/useOnClickSites'
 
@@ -18,15 +19,14 @@ const Map = () => {
     const mapContainer = useRef<HTMLInputElement>(null)
     const { setMap } = useContext(MapContext) as MapContextType
     const { openStreetView } = useContext(StreetViewContext) as StreetViewType
+    const { openNarrative } = useContext(NarrativeContext) as NarrativeType
     const { mapLayerData } = useFetchMapLayerData()
     useOnClickSites()
     useTooltips()
 
     useEffect(() => {
         mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN as string
 
-
-
         const lng = -73.913;
         const lat = 40.763;
         const zoom = 11;
@@ -200,7 +200,11 @@ const Map = () => {
 
     return (
         <div className=' relative w-full h-full'>
-            <img src="/logos/floodgen_logo_white.png" className="absolute left-4 top-6 w-[155px] h-[38.75px] z-[999] " alt="logos_white" />
+            {
+                openNarrative || openStreetView ? <img src="/logos/floodgen_logo_white.png" className="absolute left-4 top-6 w-[155px] h-[38.75px] z-[999] " alt="logos_white" /> :
+                    <img src="/logos/floodgen_logo.png" className="absolute left-4 top-6 w-[155px] h-[38.75px] z-[999] " alt="logos_white" />
+            }
+
             <div className={`absolute left-0 w-full z-10 transition-all duration-[1500ms] ease-in-out  ${openStreetView ? "top-[65%] h-[35vh]" : "top-[0%] h-[100vh]"}`} ref={mapContainer} id='map'></div>
             <MapLayer />
         </div>