multiple select

src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js

@@ -1,12 +1,12 @@
 import React, { createRef, useContext } from "react";
 import Stack from "react-bootstrap/Stack";
 import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet";
-import L, { control } from "leaflet";
+import L from "leaflet";
 import Africa from "../../../Data/ControlinAfrica.geojson";
 import "../../../Styles/main.scss";
 import { CountryStyle, CountrySelectedStyle } from "./countryStyles";
 import MapInfoBox from "./MapInfoBox"; // Import the InfoBox component
-
+import MarkerIcon, { iconMarker } from "./MarkerIcon";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
@@ -54,13 +54,22 @@ class ControlInAfricaMap extends React.Component {
       zoom: 4,
       scrollWheelZoom: false,
 
-      selectedCountry: "",
       openedTooltipLayer: null,
-      selectedCountriesNames: [],
+
-      selectedCountriesFeatures: [],
+      selectedCountry: "",
-      selectedCountryColor: "yellow",
       selectedRegion: "",
-      prevStatues: "",
+      selectedTreaty: "",
+
+      selectedCountriesNamesRegions: [],
+      selectedCountriesNamesTreaties: [],
+      selectedCountriesFeaturesRegions: [],
+      selectedCountriesFeaturesTreaties: [],
+      selectedCountriesIntersections: [],
+
+      selectedCountryColor: "yellow",
+
+      prevStatuesRegion: "",
+      prevStatuesTreaty: "",
 
       infoBox: [],
       showInfoBox: false,
@@ -256,6 +265,7 @@ class ControlInAfricaMap extends React.Component {
       direction: "top",
       className: "tooltip-custom",
     }).setContent(popupContent);
+
     layer.bindTooltip(tooltip).openTooltip();
 
     // Update the state to store the currently opened tooltip
@@ -263,77 +273,205 @@ class ControlInAfricaMap extends React.Component {
   };
 
   onMouseClick = (e) => {
-    this.setState({
-      selectedCountriesNames: [],
-      selectedCountryColor: "yellow",
-      showInfoBox: false,
-    });
     const countryName = e.target.feature.properties.name;
     if (countryName === this.state.selectedCountry) {
-      this.setState({ selectedCountry: "" });
+      this.setState({
+        selectedCountry: "",
+        selectedRegion: "",
+        selectedTreaty: "",
+
+        selectedCountriesNamesRegions: [],
+        selectedCountriesNamesTreaties: [],
+        selectedCountriesFeaturesRegions: [],
+        selectedCountriesFeaturesTreaties: [],
+        selectedCountriesIntersections: [],
+
+        selectedCountryColor: "yellow",
+
+        prevStatuesRegion: "",
+        prevStatuesTreaty: "",
+
+        infoBox: [],
+        showInfoBox: false,
+      });
+      this.props.updateCountryID(null);
       return;
     }
-    this.setState({ selectedCountry: countryName });
+
+    this.setState({
+      selectedCountry: countryName,
+      selectedRegion: "",
+      selectedTreaty: "",
+
+      selectedCountriesNamesRegions: [],
+      selectedCountriesNamesTreaties: [],
+      selectedCountriesFeaturesRegions: [],
+      selectedCountriesFeaturesTreaties: [],
+      selectedCountriesIntersections: [],
+
+      selectedCountryColor: "yellow",
+
+      prevStatuesRegion: "",
+      prevStatuesTreaty: "",
+
+      infoBox: [],
+      showInfoBox: false,
+    });
 
     this.props.updateCountryID(e.target.feature.properties.id);
   };
 
   handleOrganizationClick = (name, status, color) => {
-    const { selectedRegion, prevStatues, africaCountries } = this.state;
+    const {
+      selectedRegion,
+      prevStatuesRegion,
+      prevStatuesTreaty,
+      africaCountries,
+    } = this.state;
 
-    if (selectedRegion === name && prevStatues === status) {
+    if (selectedRegion === name && prevStatuesRegion === status) {
+      console.log("same");
       this.setState({
-        selectedCountriesNames: [],
+        selectedCountriesNamesRegions: [],
+        selectedCountriesNamesTreaties: [],
         selectedCountryColor: "yellow",
         selectedCountry: "",
         selectedRegion: "",
-        prevStatues: "",
+        prevStatuesRegion: "",
         showInfoBox: false,
       });
       return;
     }
 
-    let selectedCountriesNames = [];
+    if (prevStatuesTreaty) {
-    let selectedCountriesFeatures = [];
+      console.log("change");
+      this.setState({
+        selectedCountriesNamesTreaties: [],
+        selectedCountry: "",
+      });
+    }
+
+    let selectedCountriesNamesRegions = [];
+    let selectedCountriesFeaturesRegions = [];
+
+    africaCountries.forEach((feature) => {
+      if (feature.properties[name] === 1) {
+        selectedCountriesNamesRegions.push(feature.properties.name);
+        selectedCountriesFeaturesRegions.push(feature);
+      }
+    });
+
+    this.setState({
+      selectedCountriesNamesRegions,
+      selectedCountryColor: color,
+      selectedCountry: "",
+      selectedRegion: name,
+      prevStatuesRegion: status,
+      selectedCountriesFeaturesRegions,
+      selectedTreaty: "",
+      showInfoBox: true,
+    });
+  };
+
+  handleTreatiesClick = (name, status, color) => {
+    const {
+      selectedRegion,
+      selectedTreaty,
+      selectedCountriesNamesRegions,
+      prevStatuesTreaty,
+      africaCountries,
+    } = this.state;
+    // if the same treaty is selected previously and the region is not selected
+    // then the treaty will be deselected
+    if (
+      selectedTreaty === name &&
+      prevStatuesTreaty === status &&
+      selectedRegion === ""
+    ) {
+      console.log("1");
+      this.setState({
+        selectedCountriesNamesRegions: [],
+        selectedCountriesNamesTreaties: [],
+        selectedCountryColor: "yellow",
+        selectedCountry: "",
+        selectedTreaty: "",
+        prevStatuesTreaty: "",
+        prevStatuesRegion: "",
+        showInfoBox: false,
+      });
+      return;
+    }
+
+    // if the same treaty is selected previously and the region is selected
+    // then the treaty will be deselected
+    if (selectedTreaty === name && prevStatuesTreaty === status) {
+      console.log("2");
+      this.setState({
+        selectedCountriesNamesTreaties: [],
+        selectedCountry: "",
+        selectedTreaty: "",
+        prevStatuesTreaty: "",
+        showInfoBox: true,
+      });
+      return;
+    }
+
+    let selectedCountriesNamesTreaties = [];
+    let selectedCountriesFeaturesTreaties = [];
 
     africaCountries.forEach((feature) => {
       if (
         feature.properties[name] === 1 ||
         feature.properties[name] === status
       ) {
-        selectedCountriesNames.push(feature.properties.name);
+        selectedCountriesNamesTreaties.push(feature.properties.name);
-        selectedCountriesFeatures.push(feature);
+        selectedCountriesFeaturesTreaties.push(feature);
       }
     });
 
-    this.setState(
+    if (selectedRegion) {
-      {
+      console.log("intersect");
-        selectedCountriesNames,
+      const intersection = selectedCountriesNamesTreaties.filter((country) =>
-        selectedCountryColor: color,
+        selectedCountriesNamesRegions.includes(country)
+      );
+      this.setState({
+        selectedCountriesNamesTreaties: intersection,
+        //selectedCountryColor: "yellow",
         selectedCountry: "",
-        selectedRegion: name,
+        selectedTreaty: name,
-        prevStatues: status,
+        prevStatuesTreaty: status,
-        selectedCountriesFeatures,
-      },
-      
-    );
-
-    if (this.regional_organisations.some(org => org.name === name)) {
-      this.setState({
         showInfoBox: true,
-      },
+      });
-      this.regionalOrganisationStatistics
+      return;
-    )
     }
-    else{
+
+    this.setState({
+      selectedCountriesNamesTreaties,
+      selectedCountry: "",
+      selectedTreaty: name,
+      prevStatuesTreaty: status,
+      selectedCountriesFeaturesTreaties,
+    });
+
+    // if region and treaty selected
+    if (
+      this.state.selectedRegion &&
+      this.regional_treaties.some((org) => org.name2 === name)
+    ) {
       this.setState({
-        showInfoBox: false,
+        //selectedCountriesNamesRegions,
-      })
+        //selectedCountryColor: color,
+        //selectedCountry: "",
+        //selectedRegion: name,
+        //prevStatuesRegion: status,
+        //selectedCountriesFeaturesRegions,
+        selectedTreaty: name,
+      });
     }
   };
 
   regionalOrganisationStatistics = () => {
-    const { selectedCountriesFeatures } = this.state;
+    const { selectedCountriesFeaturesRegions } = this.state;
 
     // Helper function to process treaties
     const processTreaties = (treaties) => {
@@ -342,7 +480,7 @@ class ControlInAfricaMap extends React.Component {
         let countriesEligible = 0;
         let countriesRatified = 0;
 
-        selectedCountriesFeatures.forEach((feature) => {
+        selectedCountriesFeaturesRegions.forEach((feature) => {
           const status = feature.properties[org.name2];
           if (status === "Signed") {
             countriesSigned++;
@@ -370,7 +508,7 @@ class ControlInAfricaMap extends React.Component {
     );
 
     const organisationsInstruments = this.intsruments.map((instrument) => {
-      const countris = selectedCountriesFeatures.filter(
+      const countris = selectedCountriesFeaturesRegions.filter(
         (feature) => feature.properties[instrument.name2] === 1
       );
       return {
@@ -386,6 +524,41 @@ class ControlInAfricaMap extends React.Component {
     };
   };
 
+  // Define the function to determine the style
+  getFeatureStyle = (
+    feature,
+    selectedCountry,
+    selectedCountriesNamesRegions,
+    selectedCountriesNamesTreaties,
+    selectedCountryColor
+  ) => {
+    if (feature.properties.name === selectedCountry) {
+      console.log("one country selected");
+      return CountrySelectedStyle(selectedCountryColor);
+    } else if (
+      selectedCountriesNamesRegions.includes(feature.properties.name) &&
+      selectedCountriesNamesTreaties.length === 0
+    ) {
+      console.log("region selected");
+      return CountrySelectedStyle(selectedCountryColor);
+    } else if (
+      selectedCountriesNamesRegions.includes(feature.properties.name) &&
+      selectedCountriesNamesTreaties.includes(feature.properties.name) === false
+    ) {
+      console.log("region and treaty selected 1");
+      return CountrySelectedStyle(selectedCountryColor);
+    } else if (
+      selectedCountriesNamesRegions.includes(feature.properties.name) &&
+      selectedCountriesNamesTreaties.includes(feature.properties.name)
+    ) {
+      console.log("region and treaty selected 2");
+      return CountrySelectedStyle(selectedCountryColor, 0.7);
+    } else {
+      console.log("default");
+      return CountryStyle();
+    }
+  };
+
   render() {
     const findColorByName = (name) => {
       const org = this.regional_organisations.find((org) => org.name === name);
@@ -398,9 +571,11 @@ class ControlInAfricaMap extends React.Component {
       error,
       countriesNames,
       selectedCountry,
-      selectedCountriesNames,
+      selectedCountriesNamesRegions,
+      selectedCountriesNamesTreaties,
       selectedCountryColor,
       selectedRegion,
+      selectedTreaty,
     } = this.state;
 
     if (loading) {
@@ -464,10 +639,7 @@ class ControlInAfricaMap extends React.Component {
                           srcSet=""
                           className="icon"
                           onClick={() =>
-                            this.handleOrganizationClick(
+                            this.handleTreatiesClick(treaty.name2, "Eligible")
-                              treaty.name2,
-                              "Eligible"
-                            )
                           }
                         />
                       )}
@@ -479,7 +651,7 @@ class ControlInAfricaMap extends React.Component {
                           srcSet=""
                           className="icon"
                           onClick={() =>
-                            this.handleOrganizationClick(treaty.name2, "Signed")
+                            this.handleTreatiesClick(treaty.name2, "Signed")
                           }
                         />
                       )}
@@ -491,10 +663,7 @@ class ControlInAfricaMap extends React.Component {
                           srcSet=""
                           className="icon"
                           onClick={() =>
-                            this.handleOrganizationClick(
+                            this.handleTreatiesClick(treaty.name2, "Ratified")
-                              treaty.name2,
-                              "Ratified"
-                            )
                           }
                         />
                       )}
@@ -517,7 +686,7 @@ class ControlInAfricaMap extends React.Component {
                         srcSet=""
                         className="icon-2"
                         onClick={() =>
-                          this.handleOrganizationClick(treaty.name2, "Eligible")
+                          this.handleTreatiesClick(treaty.name2, "Eligible")
                         }
                       />
                     )}
@@ -529,7 +698,7 @@ class ControlInAfricaMap extends React.Component {
                         srcSet=""
                         className="icon-2"
                         onClick={() =>
-                          this.handleOrganizationClick(treaty.name2, "Signed")
+                          this.handleTreatiesClick(treaty.name2, "Signed")
                         }
                       />
                     )}
@@ -541,7 +710,7 @@ class ControlInAfricaMap extends React.Component {
                         srcSet=""
                         className="icon-2"
                         onClick={() =>
-                          this.handleOrganizationClick(treaty.name2, "Ratified")
+                          this.handleTreatiesClick(treaty.name2, "Ratified")
                         }
                       />
                     )}
@@ -563,7 +732,7 @@ class ControlInAfricaMap extends React.Component {
                     alt=""
                     className="icon-2"
                     onClick={() =>
-                      this.handleOrganizationClick("UNProgrammeofAction")
+                      this.handleTreatiesClick("UNProgrammeofAction")
                     }
                   />
                 </div>
@@ -576,9 +745,7 @@ class ControlInAfricaMap extends React.Component {
                     alt=""
                     className="icon-2"
                     onClick={() =>
-                      this.handleOrganizationClick(
+                      this.handleTreatiesClick("InternationalTracingInstrument")
-                        "InternationalTracingInstrument"
-                      )
                     }
                   />
                 </div>
@@ -594,7 +761,7 @@ class ControlInAfricaMap extends React.Component {
                     src={Icon1}
                     alt=""
                     className="icon-2"
-                    onClick={() => this.handleOrganizationClick("StG-PoA")}
+                    onClick={() => this.handleTreatiesClick("StG-PoA")}
                   />
                 </div>
               </div>
@@ -617,12 +784,13 @@ class ControlInAfricaMap extends React.Component {
                       onEachFeature={this.onEachFeature}
                       id="africa-map"
                       style={(feature) =>
-                        feature.properties.name === selectedCountry ||
+                        this.getFeatureStyle(
-                        selectedCountriesNames.find(
+                          feature,
-                          (item) => item === feature.properties.name
+                          selectedCountry,
+                          selectedCountriesNamesRegions,
+                          selectedCountriesNamesTreaties,
+                          selectedCountryColor
                         )
-                          ? CountrySelectedStyle(selectedCountryColor)
-                          : CountryStyle()
                       }
                       key="africa-map"
                       data={africaCountries}
@@ -729,6 +897,27 @@ class ControlInAfricaMap extends React.Component {
                     }
                   })}
 
+                {selectedTreaty &&
+                  selectedCountriesNamesTreaties &&
+                  africaCountries.map((feature, index) => {
+                    if (
+                      selectedCountriesNamesTreaties.includes(
+                        feature.properties.name
+                      )
+                    ) {
+                      return (
+                        <MarkerIcon
+                          key={index}
+                          position={[
+                            feature.properties.y,
+                            feature.properties.x,
+                          ]}
+                          icon={Icon20}
+                        ></MarkerIcon>
+                      );
+                    }
+                  })}
+
                 <div className="custom-zoom-control">
                   <button onClick={this.zoomIn}>+</button>
                   <button onClick={this.zoomOut}>-</button>

src/Components/Layout/ControlInAfrica/MapInfoBox.jsx

@@ -4,25 +4,27 @@ const MapInfoBox = (props) => {
   const regional_treaties = props.info.organisationsRegionalTreaties;
   const international_treaties = props.info.organisationsInternationalTreaties;
   const instruments = props.info.organisationsInstruments;
-  console.log(regional_treaties);
+
   return (
     <div className={props.className}>
       <h3>{props.selectedRegion}</h3>
       <p>Number of countries</p>
       <div className="table-responsive-sm">
         <table className="table table-sm table-striped">
-          <tr>
+          <thead>
-            <th className="text-center" scope="col"></th>
+            <tr>
-            <th className="text-center" scope="col">
+              <th className="text-center" scope="col"></th>
-              Signed
+              <th className="text-center" scope="col">
-            </th>
+                Signed
-            <th className="text-center" scope="col">
+              </th>
-              Eligible
+              <th className="text-center" scope="col">
-            </th>
+                Eligible
-            <th className="text-center" scope="col">
+              </th>
-              Ratified
+              <th className="text-center" scope="col">
-            </th>
+                Ratified
-          </tr>
+              </th>
+            </tr>
+          </thead>
           <tbody>
             {regional_treaties &&
               regional_treaties.map((item, index) => {

src/Components/Layout/ControlInAfrica/MarkerIcon.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import L from "leaflet";
+import { Marker } from "react-leaflet";
+
+import Icon1 from "../../../Icons/icon1.svg";
+import Icon2 from "../../../Icons/icon2.svg";
+import Icon3 from "../../../Icons/icon3.svg";
+import Icon4 from "../../../Icons/icon4.svg";
+import Icon5 from "../../../Icons/icon5.svg";
+import Icon6 from "../../../Icons/icon6.svg";
+import Icon7 from "../../../Icons/icon7.svg";
+import Icon8 from "../../../Icons/icon8.svg";
+import Icon9 from "../../../Icons/icon9.svg";
+import Icon10 from "../../../Icons/icon10.svg";
+import Icon11 from "../../../Icons/icon11.svg";
+import Icon12 from "../../../Icons/icon12.svg";
+import Icon13 from "../../../Icons/icon13.svg";
+import Icon14 from "../../../Icons/icon14.svg";
+import Icon15 from "../../../Icons/icon15.svg";
+import Icon16 from "../../../Icons/icon16.svg";
+import Icon17 from "../../../Icons/icon17.svg";
+import Icon18 from "../../../Icons/icon18.svg";
+import Icon19 from "../../../Icons/icon19.svg";
+import Icon20 from "../../../Icons/icon20.svg";
+import Icon21 from "../../../Icons/icon21.svg";
+import Icon22 from "../../../Icons/icon22.svg";
+import Icon23 from "../../../Icons/icon23.svg";
+import Icon24 from "../../../Icons/icon24.svg";
+import Icon25 from "../../../Icons/icon25.svg";
+import Icon26 from "../../../Icons/icon26.svg";
+
+const MarkerIcon = (props) => {
+  return (
+    <Marker
+      key={props.index}
+      position= {props.position}
+      icon={
+        new L.Icon({
+          iconUrl: props.icon,
+          iconRetinaUrl: props.icon,
+          iconSize: [35, 35],
+          className: "leaflet-div-icon",
+        })
+      }
+    ></Marker>
+  );
+};
+
+export default MarkerIcon;

src/Components/Layout/ControlInAfrica/countryStyles.js

@@ -1,25 +1,26 @@
 export const CountryStyle = () => {
-    return {
+  return {
-      color: "black",
+    color: "black",
-      weight: 1,
+    weight: 1,
-      opacity: 1,
+    opacity: 1,
-      fillColor: "#FDEDE2",
+    fillColor: "#FDEDE2",
-      fillOpacity: 0.3,
+    fillOpacity: 0.3,
-    };
   };
+};
 
-  export const  CountrySelectedStyle = (color) => {
+export const CountrySelectedStyle = (color, opacity = 0.3) => {
-    return {
+  return {
-      fillColor: color,
+    fillColor: color,
-      color: "black",
+    color: "black",
-      weight: 3,
+    weight: 3,
-    };
+    fillOpacity: opacity,
-  }
+  };
+};
 
-  export const  CountryHighlightStyle = () => {
+export const CountryHighlightStyle = () => {
-    return {
+  return {
-      fillColor: "yellow",
+    fillColor: "yellow",
-      color: "black",
+    color: "black",
-      weight: 3,
+    weight: 3,
-    };
+  };
-  }
+};

src/Components/Pages/ControlInAfrica.js

@@ -1,23 +1,25 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import Container from "react-bootstrap/Container";
 import ControlInAfricaMap from "../Layout/ControlInAfrica/ControlInAfricaMap";
 import Title from "../Layout/ControlInAfrica/Title";
 import DetailsSection from "../Layout/ControlInAfrica/DetailsSection";
 
 const ControlInAfrica = (props) => {
-
   const [countryID, setCountryID] = useState(null);
 
   const updateCountryID = (countryID) => {
-    setCountryID(countryID)
+    setCountryID(countryID);
-  } 
+  };
-  
 
   return (
     <Container fluid className="p-5">
       <Title></Title>
-      <ControlInAfricaMap updateCountryID={updateCountryID}></ControlInAfricaMap>
+      <ControlInAfricaMap
-      <DetailsSection countryID={countryID}></DetailsSection>
+        updateCountryID={updateCountryID}
+      ></ControlInAfricaMap>
+      {countryID !== null && (
+        <DetailsSection countryID={countryID}></DetailsSection>
+      )}
     </Container>
   );
 };