diff --git a/src/components/Map/GenericMapHolder.jsx b/src/components/Map/GenericMapHolder.jsx index a4eb76da..fb165420 100644 --- a/src/components/Map/GenericMapHolder.jsx +++ b/src/components/Map/GenericMapHolder.jsx @@ -1,11 +1,9 @@ import React from "react"; import { useSelector } from "react-redux"; -import { Box } from "@mui/material"; import Grid from "@mui/material/Unstable_Grid2"; import { styled } from "@mui/system"; import PropTypes from "prop-types"; -import ActionButtons from "./ActionButtons.jsx"; import MapLayerList from "../MapLayerList/MapLayerList.jsx"; import { ThreeColumnGrid } from "../All/StyledComponents.jsx"; @@ -22,19 +20,10 @@ const ContentHolderGrid = styled(Grid)(({ theme }) => ({ }, })); -const ContentMapBox = styled(Box)(({ theme }) => ({ - height: "100%", - padding: theme.spacing(0), - backgroundColor: theme.palette.CRESTGridBackground.dark, - borderColor: theme.palette.CRESTBorderColor.main, - borderStyle: "solid", - borderWidth: "1px", -})); - const listVisibleSelector = (state) => state.mapLayerList.visible; export default function GenericMapHolder(props) { - const { leftColumn, mapCard, map } = props; + const { leftColumn, mapCard } = props; const layerListVisible = useSelector(listVisibleSelector); return ( @@ -73,10 +62,7 @@ export default function GenericMapHolder(props) { xl={layerListVisible ? 6.25 : 9} order={{ xs: 1, sm: 1, md: 2 }} > - - {mapCard} - - + {mapCard} {/* RIGHT COLUMN FOR LAYER LIST */} @@ -101,5 +87,4 @@ export default function GenericMapHolder(props) { GenericMapHolder.propTypes = { leftColumn: PropTypes.node, mapCard: PropTypes.node, - map: PropTypes.object, }; diff --git a/src/components/Map/MapCard.jsx b/src/components/Map/MapCard.jsx index 9a88386e..1acceea7 100644 --- a/src/components/Map/MapCard.jsx +++ b/src/components/Map/MapCard.jsx @@ -2,9 +2,22 @@ import React, { useEffect } from "react"; import PropTypes from "prop-types"; import { useSelector } from "react-redux"; import { useMapEvents } from "react-leaflet"; +import { styled } from "@mui/system"; +import { Box } from "@mui/material"; + import LeafletMapContainer from "./LeafletMapContainer.jsx"; import ActiveTileLayers from "./ActiveTileLayers.jsx"; import BasemapLayer from "./BasemapLayer.jsx"; +import ActionButtons from "./ActionButtons.jsx"; + +const ContentMapBox = styled(Box)(({ theme }) => ({ + height: "100%", + padding: theme.spacing(0), + backgroundColor: theme.palette.CRESTGridBackground.dark, + borderColor: theme.palette.CRESTBorderColor.main, + borderStyle: "solid", + borderWidth: "1px", +})); export default function MapCard({ children, map, setMap, mapEventHandlers }) { const selectedCenterSelector = (state) => state.mapProperties.center; @@ -31,12 +44,15 @@ export default function MapCard({ children, map, setMap, mapEventHandlers }) { }; return ( - - {children} - - - - + + + {children} + + + + + + ); } diff --git a/src/pages/AnalyzeProjectSites.jsx b/src/pages/AnalyzeProjectSites.jsx index 8b4e552e..4885b69d 100644 --- a/src/pages/AnalyzeProjectSites.jsx +++ b/src/pages/AnalyzeProjectSites.jsx @@ -130,50 +130,45 @@ export default function AnalyzeProjectSite(props) { } return ( - <> - - } - chartCard={ - 0 - ? featuresForCurrentRegion - : null - } - /> - } - noDataState={} - /> - } - tableData="Insert Table Data Here" - mapCard={ - - - - } - /> - + } + chartCard={ + 0 + ? featuresForCurrentRegion + : null + } + /> + } + noDataState={} + /> + } + tableData="Insert Table Data Here" + mapCard={ + + } + /> ); }