Fix map scrolling and zoom

UMassCDS · Oct 29, 2024 · d6c8bd9 · d6c8bd9
1 parent a885f88
commit d6c8bd9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git a/src/components/Legend.tsx b/src/components/Legend.tsx
@@ -49,7 +49,7 @@ function Legend(props: LegendProps) {
   }, [dataTypeIndex, speciesIndex]);
 
   return (
-    <div style={{background:"lightgrey", width: '100px', padding:10, borderRadius:10}}>
+    <div className="Legend" style={{background:"lightgrey", borderRadius:10}}>
       <Grid align='stretch'>
         <Grid.Col span={4}>
           <div

diff --git a/src/styles/Home.css b/src/styles/Home.css
@@ -8,16 +8,23 @@
         z-index: 10;
         position: fixed;
         top: 2%;
-        left: 2%;
-        bottom: 2%;
-        right: 2%;
+        left: 5%;
+        right: 5%;
     }
 
     .test {
         background-color: pink;
         opacity: 0.6;
     }
 
+
+    .Legend {
+        position: absolute;
+        bottom: 150px;
+        left: 20px;
+        z-index: 10;
+    }
+
     .Timeline {
         background-color: white;
         height: 55px;

diff --git a/src/views/Home.tsx b/src/views/Home.tsx
@@ -198,9 +198,7 @@ function Home(this: any) {
       </MapContainer>
       <div className="widgets">
         <Grid align='stretch'>
-          <Grid.Col span={1}>
-          </Grid.Col>
-          <Grid.Col span={1}>
+          <Grid.Col span={2}>
             {/* Dropdown for data type */}
             <Tooltip label='Types of data sets'>
               <DataTypeComponent />
@@ -217,9 +215,7 @@ function Home(this: any) {
             </Button>
           </Grid.Col>
           { /* next row */ }
-          <Grid.Col span={1}>
-          </Grid.Col>
-          <Grid.Col span={2}>
+          <Grid.Col span={3}>
             {/* The dropdown for the species type */}
             <Tooltip label='These Species were chosen because'>
               <SpeciesComponent />
@@ -229,17 +225,12 @@ function Home(this: any) {
             <div style={{textAlign:"center", fontSize:30, fontWeight:"bold"}}>{dataInfo[dataIndex].label} of the {taxa[speciesIndex].label}</div>
           </Grid.Col>
           <Grid.Col span={3}></Grid.Col>
-          { /* next row */ }
-          <Grid.Col span={2}>
-            {/* Calls the custom legend component with the data type and species type as parameters. */}
-            <Legend dataTypeIndex={dataIndex} speciesIndex={speciesIndex} />
-          </Grid.Col>
-          <Grid.Col span={10}></Grid.Col>
-
         </Grid>
-        {/* Calls the custom timeline component with the current week onChange function as parameters */}
-        <Timeline week={week} onChangeWeek={checkImageAndUpdate} />
       </div>
+      {/* Calls the custom legend component with the data type and species type as parameters. */}
+      <Legend dataTypeIndex={dataIndex} speciesIndex={speciesIndex} />
+      {/* Calls the custom timeline component with the current week onChange function as parameters */}
+      <Timeline week={week} onChangeWeek={checkImageAndUpdate} />
     </div>
   );
 }