#107 #119 fixing bug, finishing of mapViewer

iodepo · Mar 11, 2024 · b9e4d97 · b9e4d97
1 parent 13c41f0
commit b9e4d97
Show file tree

Hide file tree

Showing 33 changed files with 663 additions and 422 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -8,6 +8,11 @@
       href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
       rel="stylesheet"
     />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/dist/maplibre-gl.css"
+    />
+    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
     <title>OIH Global Search</title>
     <style>
       .oih-popover {

diff --git a/frontend/src/components/home/CarouselPortals.js b/frontend/src/components/home/CarouselPortals.js
@@ -13,6 +13,7 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import { Link } from "react-router-dom";
 import { PARTNERS } from "portability/configuration";
+import { useAppTranslation } from "context/context/AppTranslation";
 
 const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
 const CarouselPortals = () => {
@@ -31,6 +32,7 @@ const CarouselPortals = () => {
   }, [setIndex]);
 
   const palette = "custom.homepage.carouselPortals.";
+  const translationState = useAppTranslation();
   return (
     <Container
       maxWidth="xl"
@@ -45,7 +47,7 @@ const CarouselPortals = () => {
             sx={{ fontSize: "36px", color: palette + "colorTypography" }}
             gutterBottom
           >
-            Partners
+            {translationState.translation["Portals"]}
           </Typography>
         </Grid>
         <Grid item xs={5} lg={12} sx={{ position: "relative", mt: 4 }}>

diff --git a/frontend/src/components/map-view/MapContainer.js b/frontend/src/components/map-view/MapContainer.js
@@ -28,10 +28,10 @@ const MapContainer = (props) => {
     zoom: 0,
     isLoading: false,
     center: [65.468754, 44.57875],
+    showSearchArea: false,
+    selectedElem: undefined,
   });
 
-  //Maybe move inside useReducer? Discuss
-
   const navigate = useNavigate();
   const location = useLocation();
   const [results, setResults] = useState([]);
@@ -43,7 +43,7 @@ const MapContainer = (props) => {
     params.has("search_text") ? params.get("search_text") : ""
   );
   const [resultsCount, setResultsCount] = useState(0);
-  const [mapBounds, setMapBounds] = useState();
+  const [mapBounds, setMapBounds] = useState(false);
   const [open, setOpen] = useState(true);
   const [facets, setFacets] = useState([]);
   const [facetQuery, setFacetQuery] = useSearchParam("facet_query");
@@ -92,6 +92,18 @@ const MapContainer = (props) => {
   const changeHeatOpacity = (heatOpacity) => {
     dispatch({ type: "setHeatOpacity", heatOpacity: heatOpacity });
   };
+  const changeShowSearchArea = (showSearchArea) => {
+    dispatch({ type: "setShowSearchArea", showSearchArea: showSearchArea });
+  };
+  const changeSelectedElem = (selectedElem) => {
+    dispatch({ type: "setSelectedElem", selectedElem: selectedElem });
+  };
+
+  const searchThisArea = () => {
+    getDataSpatialSearch();
+    changeShowSearchArea(false);
+  };
+
   const applyZoom = (zoomType) => {
     let value;
     if (zoomType === "out") {
@@ -144,10 +156,9 @@ const MapContainer = (props) => {
 
   useEffect(() => {
     getDataSpatialSearch();
-  }, [navigate, params, mapBounds]);
+  }, [navigate, params]);
 
   const getGeoJSON = () => {
-    debugger;
     let geoJsonUrl = `${dataServiceUrl}/spatial.geojson?`;
     const params = new URLSearchParams({
       /* ...(searchType !== "SpatialData" ? { document_type: searchType } : {}), */
@@ -271,6 +282,11 @@ const MapContainer = (props) => {
             changeHeatOpacity={changeHeatOpacity}
             setMapBounds={setMapBounds}
             geoJson={geoJson}
+            showSearchArea={state.showSearchArea}
+            changeSelectedElem={changeSelectedElem}
+            selectedElem={state.selectedElem}
+            changeShowSearchArea={changeShowSearchArea}
+            searchThisArea={searchThisArea}
           />
         </Box>
       )}
@@ -316,6 +332,11 @@ const MapContainer = (props) => {
             setShowRegions={setShowRegions}
             setMapBounds={setMapBounds}
             geoJson={geoJson}
+            showSearchArea={state.showSearchArea}
+            changeSelectedElem={changeSelectedElem}
+            selectedElem={state.selectedElem}
+            changeShowSearchArea={changeShowSearchArea}
+            searchThisArea={searchThisArea}
           />
         </Box>
       )}

diff --git a/frontend/src/components/map-view/components/MapView.js b/frontend/src/components/map-view/components/MapView.js
@@ -23,12 +23,14 @@ const MapView = (props) => {
     heatOpacity,
     setMapBounds,
     geoJson,
+    changeSelectedElem,
+    changeShowSearchArea,
   } = props;
   const mapInitRef = useRef(null);
   var h3Resolution = 2;
 
   useEffect(() => {
-    if (container.current) {
+    if (container.current && !isHome) {
       mapInitRef.current &&
         manageLayers(
           mapInitRef.current,
@@ -38,7 +40,8 @@ const MapView = (props) => {
           showPoints,
           showRegions,
           h3Resolution,
-          geoJson
+          geoJson,
+          changeSelectedElem
         );
     }
   }, [clustering, hexOpacity, showPoints, showRegions]);
@@ -59,7 +62,7 @@ const MapView = (props) => {
     if (container.current) {
       container.current.innerHTML = "";
       let zoom = 4;
-      if (mapInitRef.current) {
+      if (mapInitRef.current && !isHome) {
         zoom = mapInitRef.current.getZoom();
       }
       mapInitRef.current = initMap(
@@ -72,6 +75,7 @@ const MapView = (props) => {
 
       mapInitRef.current.on("load", function () {
         mapInitRef.current &&
+          !isHome &&
           manageLayers(
             mapInitRef.current,
             clustering,
@@ -80,19 +84,22 @@ const MapView = (props) => {
             showPoints,
             showRegions,
             h3Resolution,
-            geoJson
+            geoJson,
+            changeSelectedElem
           );
         mapInitRef.current &&
           manageChangeOpacity(mapInitRef.current, baseOpacity, baseLayer);
       });
 
       mapInitRef.current.on("moveend", function () {
-        if (mapInitRef.current) {
+        if (mapInitRef.current && !isHome) {
           setCenter([
             mapInitRef.current.getCenter().lng,
             mapInitRef.current.getCenter().lat,
           ]);
-          console.log(mapInitRef.current.getBounds());
+
+          changeShowSearchArea(true);
+
           setMapBounds(mapInitRef.current.getBounds());
         }
       });
@@ -108,6 +115,7 @@ const MapView = (props) => {
         if (h3ResNew != h3Resolution) {
           h3Resolution = h3ResNew;
           mapInitRef.current &&
+            !isHome &&
             manageLayers(
               mapInitRef.current,
               clustering,
@@ -116,7 +124,8 @@ const MapView = (props) => {
               showPoints,
               showRegions,
               h3Resolution,
-              geoJson
+              geoJson,
+              changeSelectedElem
             );
         }
       });

diff --git a/frontend/src/components/map-view/components/ToolbarHome.js b/frontend/src/components/map-view/components/ToolbarHome.js
@@ -27,6 +27,7 @@ const ToolbarHome = (props) => {
           position: "absolute",
           top: 10,
           left: 12,
+          zIndex: 2,
         }}
       >
         <ButtonGroup
@@ -91,7 +92,7 @@ const ToolbarHome = (props) => {
           </Button>
         </ButtonGroup>
       </Box>
-      <Box sx={{ position: "absolute", bottom: 10, right: 12 }}>
+      <Box sx={{ position: "absolute", bottom: 10, right: 12, zIndex: 2 }}>
         <IconButton
           sx={{
             backgroundColor: palette + "bgButton",

diff --git a/frontend/src/components/map-view/components/desktop/DesktopMapView.js b/frontend/src/components/map-view/components/desktop/DesktopMapView.js
@@ -50,6 +50,11 @@ const DesktopMapView = (props) => {
     changeHeatOpacity,
     setMapBounds,
     geoJson,
+    changeShowSearchArea,
+    showSearchArea,
+    changeSelectedElem,
+    selectedElem,
+    searchThisArea,
   } = props;
 
   const palette = "custom.mapView.desktop.";
@@ -82,6 +87,8 @@ const DesktopMapView = (props) => {
             selectedFacets={selectedFacets}
             facetSearch={facetSearch}
             clear={clear}
+            changeSelectedElem={changeSelectedElem}
+            selectedElem={selectedElem}
           />
         </Drawer>
         {open ? (
@@ -164,6 +171,8 @@ const DesktopMapView = (props) => {
           showRegions={showRegions}
           heatOpacity={heatOpacity}
           changeHeatOpacity={changeHeatOpacity}
+          showSearchArea={showSearchArea}
+          searchThisArea={searchThisArea}
         />
         <MapView
           container={container}
@@ -179,6 +188,9 @@ const DesktopMapView = (props) => {
           initCenter={initCenter}
           setMapBounds={setMapBounds}
           geoJson={geoJson}
+          changeShowSearchArea={changeShowSearchArea}
+          showSearchArea={showSearchArea}
+          changeSelectedElem={changeSelectedElem}
         />
       </Box>
     </>

diff --git a/frontend/src/components/map-view/components/desktop/FilterMapDesktop.js b/frontend/src/components/map-view/components/desktop/FilterMapDesktop.js
@@ -2,7 +2,6 @@ import React from "react";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Select from "@mui/material/Select";
-import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import MenuItem from "@mui/material/MenuItem";
 import Button from "@mui/material/Button";
 import PublicIcon from "@mui/icons-material/Public";
@@ -30,6 +29,7 @@ const FilterMapDesktop = (props) => {
     handleInputChange,
     isChecked,
     setRegion,
+    facetSearch,
   } = props;
   const translationState = useAppTranslation();
   const palette = "custom.mapView.desktop.toolbar.";
@@ -89,6 +89,7 @@ const FilterMapDesktop = (props) => {
                   fontSize: "14px",
                   backgroundColor: palette + "bgButton",
                   maxWidth: "135px",
+                  width: "115px",
                   color: palette + "colorButton",
                   textTransform: "none",
                   boxShadow: "none",
@@ -104,14 +105,6 @@ const FilterMapDesktop = (props) => {
                 }}
                 startIcon={
                   <>
-                    {counter === 0 && (
-                      <HelpOutlineIcon
-                        sx={{
-                          fontSize: "14px",
-                          color: palette + "colorIcon",
-                        }}
-                      />
-                    )}
                     {counter > 0 && (
                       <Box
                         sx={{

diff --git a/frontend/src/components/map-view/components/desktop/ToolbarDesktopMapView.js b/frontend/src/components/map-view/components/desktop/ToolbarDesktopMapView.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import IconButton from "@mui/material/IconButton";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
@@ -10,11 +11,7 @@ import LayersIcon from "@mui/icons-material/Layers";
 import SettingsIcon from "@mui/icons-material/Settings";
 import Fade from "@mui/material/Fade";
 import Typography from "@mui/material/Typography";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Switch from "@mui/material/Switch";
-import Checkbox from "@mui/material/Checkbox";
-import Divider from "@mui/material/Divider";
-import Slider from "@mui/material/Slider";
+import SearchIcon from "@mui/icons-material/Search";
 import FilterMapDesktop from "./FilterMapDesktop";
 import SettingsMapDesktop from "./SettingsMapDesktop";
 import LayerMapDesktop from "./LayerMapDesktop";
@@ -45,6 +42,8 @@ const ToolbarDesktopMapView = (props) => {
     showRegions,
     heatOpacity,
     changeHeatOpacity,
+    showSearchArea,
+    searchThisArea,
   } = props;
   const [filteredFacets, setFilteredFacets] = useState(facets);
 
@@ -113,6 +112,7 @@ const ToolbarDesktopMapView = (props) => {
           width: "100%",
           paddingLeft: "8px",
           paddingRight: "8px",
+          zIndex: 2,
         }}
       >
         <Box sx={{ display: "flex", justifyContent: "space-between" }}>
@@ -126,9 +126,37 @@ const ToolbarDesktopMapView = (props) => {
             handleInputChange={handleInputChange}
             isChecked={isChecked}
             setRegion={setRegion}
+            facetSearch={facetSearch}
           />
         </Box>
       </Box>
+      {showSearchArea && (
+        <Box
+          sx={{ zIndex: 2, position: "absolute", right: "45%", top: "100px" }}
+        >
+          <Button
+            variant="contained"
+            sx={{
+              textTransform: "unset",
+              backgroundColor: "white",
+              borderRadius: 8,
+              color: "#1A2C54",
+              "&:hover": {
+                color: "white",
+                backgroundColor: "#1A2C54",
+                ".MuiSvgIcon-root": {
+                  color: "white",
+                },
+              },
+            }}
+            onClick={() => searchThisArea()}
+            startIcon={<SearchIcon sx={{ color: "#1A2C54" }} />}
+          >
+            Search this area
+          </Button>
+        </Box>
+      )}
+
       <Stack
         sx={{
           width: "100%",
@@ -138,6 +166,7 @@ const ToolbarDesktopMapView = (props) => {
           paddingRight: "8px",
           display: "flex",
           justifyContent: "space-between",
+          zIndex: 2,
         }}
         direction={"row"}
         spacing={2}