geographical orgs added

src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js

@@ -1,8 +1,8 @@
-import React, { createRef, useContext } from "react";
+import React, { createRef } from "react";
-import Stack from "react-bootstrap/Stack";
 import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet";
-import L, { icon } from "leaflet";
+import L from "leaflet";
 import Africa from "../../../Data/ControlinAfrica.geojson";
+import Orgs from "../../../Data/Orgs.geojson";
 import "../../../Styles/main.scss";
 import { CountryStyle, CountrySelectedStyle } from "./countryStyles";
 import MapInfoBox from "./MapInfoBox"; // Import the InfoBox component
@@ -40,6 +40,35 @@ import Icon24 from "../../../Icons/icon24.svg";
 import Icon25 from "../../../Icons/icon25.svg";
 import Icon26 from "../../../Icons/icon26.svg";
 
+const iconMap = {
+  Icon1: Icon1,
+  Icon2: Icon2,
+  Icon3: Icon3,
+  Icon4: Icon4,
+  Icon5: Icon5,
+  Icon6: Icon6,
+  Icon7: Icon7,
+  Icon8: Icon8,
+  Icon9: Icon9,
+  Icon10: Icon10,
+  Icon11: Icon11,
+  Icon12: Icon12,
+  Icon13: Icon13,
+  Icon14: Icon14,
+  Icon15: Icon15,
+  Icon16: Icon16,
+  Icon17: Icon17,
+  Icon18: Icon18,
+  Icon19: Icon19,
+  Icon20: Icon20,
+  Icon21: Icon21,
+  Icon22: Icon22,
+  Icon23: Icon23,
+  Icon24: Icon24,
+  Icon25: Icon25,
+  Icon26: Icon26,
+};
+
 class ControlInAfricaMap extends React.Component {
   constructor(props) {
     super(props);
@@ -49,6 +78,12 @@ class ControlInAfricaMap extends React.Component {
     this.state = {
       africaCountries: null,
       countriesNames: [],
+      regional_organisations: [],
+      geographical_organisations: [],
+      regional_treaties: [],
+      international_treaties: [],
+      intsruments: [],
+
       loading: true,
       error: null,
 
@@ -181,14 +216,14 @@ class ControlInAfricaMap extends React.Component {
   ];
 
   componentDidMount() {
-    this.fetchAfricaCountries();
+    this.fetchData();
     this.calculateZoomLevel();
     window.addEventListener("resize", this.calculateZoomLevel);
   }
 
   componentWillUnmount() {}
 
-  fetchAfricaCountries = async () => {
+  fetchData = async () => {
     try {
       const response = await fetch(Africa);
       const data = await response.json();
@@ -208,6 +243,51 @@ class ControlInAfricaMap extends React.Component {
         loading: false,
       });
     }
+
+    try {
+      console.log("fetching data");
+      const response = await fetch(Orgs); // Ensure this is a valid URL
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      console.log(data);
+      // Replace icon names with actual icon objects
+      const regional_treaties = data.regional_treaties.map((treaty) => ({
+        ...treaty,
+        icon_eligible: iconMap[treaty.icon_eligible] || null,
+        icon_signed: iconMap[treaty.icon_signed] || null,
+        icon_ratified: iconMap[treaty.icon_ratified] || null,
+      }));
+
+      const international_treaties = data.international_treaties.map(
+        (treaty) => ({
+          ...treaty,
+          icon_eligible: iconMap[treaty.icon_eligible] || null,
+          icon_signed: iconMap[treaty.icon_signed] || null,
+          icon_ratified: iconMap[treaty.icon_ratified] || null,
+        })
+      );
+
+      const intsruments = data.intsruments.map((instrument) => ({
+        ...instrument,
+        icon: iconMap[instrument.icon] || null,
+      }));
+      this.setState(
+        {
+          regional_organisations: data.regional_organisations,
+          geographical_organisations: data.geographical_organisations,
+          regional_treaties,
+          international_treaties,
+          intsruments,
+        },
+        () => {
+          // Callback after state has been updated (optional)
+        }
+      );
+    } catch (error) {
+      console.error("Error fetching the JSON file:", error);
+    }
   };
 
   calculateZoomLevel = () => {
@@ -389,30 +469,31 @@ class ControlInAfricaMap extends React.Component {
       selectedCountriesNamesRegions,
       prevStatuesTreaty,
       africaCountries,
+      regional_treaties,
+      international_treaties,
+      intsruments,
     } = this.state;
 
     // get the icon of the selected treaty based on the name and status of the treaty
     console.log(name, status);
 
     let org =
-      this.regional_treaties.find((org) => org.name2 === name) ||
+      regional_treaties.find((org) => org.name2 === name) ||
-      this.international_treaties.find((org) => org.name2 === name);
+      international_treaties.find((org) => org.name2 === name);
 
-    let instrument = this.intsruments.find(
+    let instrument = intsruments.find(
       (instrument) => instrument.name2 === name
     );
 
-    if (org) {
+    const selectedIcon = org
-      this.setState({
+      ? org[`icon_${status.toLowerCase()}`] || "none"
-        selectedIcon: org[`icon_${status.toLowerCase()}`] || "none",
+      : instrument
-      });
+      ? instrument[`icon`] || "none"
-    }
+      : "none";
 
-    if (instrument) {
+    this.setState({
-      this.setState({
+      selectedIcon,
-        selectedIcon: instrument[`icon`] || "none",
+    });
-      });
-    }
 
     // if the same treaty is selected previously and the region is not selected
     // then the treaty will be deselected
@@ -463,7 +544,8 @@ class ControlInAfricaMap extends React.Component {
         selectedCountriesFeaturesTreaties.push(feature);
       }
     });
-
+    // if the region is selected then the treaty will be selected based on the
+    // intersection of the region and the treaty
     if (selectedRegion) {
       console.log("intersect");
       const intersection = selectedCountriesNamesTreaties.filter((country) =>
@@ -473,7 +555,7 @@ class ControlInAfricaMap extends React.Component {
         selectedCountriesNamesTreaties: intersection,
         selectedCountry: "",
         selectedTreaty: name,
-        prevStatuesTreaty: status || "checked",
+        prevStatuesTreaty: status,
         showInfoBox: true,
       });
       return;
@@ -483,29 +565,27 @@ class ControlInAfricaMap extends React.Component {
       selectedCountriesNamesTreaties,
       selectedCountry: "",
       selectedTreaty: name,
-      prevStatuesTreaty: status || "checked",
+      prevStatuesTreaty: status,
       selectedCountriesFeaturesTreaties,
     });
 
     // if region and treaty selected
     if (
       this.state.selectedRegion &&
-      this.regional_treaties.some((org) => org.name2 === name)
+      regional_treaties.some((org) => org.name2 === name)
     ) {
       this.setState({
-        //selectedCountriesNamesRegions,
-        //selectedCountryColor: color,
-        //selectedCountry: "",
-        //selectedRegion: name,
-        //prevStatuesRegion: status,
-        //selectedCountriesFeaturesRegions,
         selectedTreaty: name,
       });
     }
   };
 
   regionalOrganisationStatistics = () => {
-    const { selectedCountriesFeaturesRegions } = this.state;
+    const {
+      selectedCountriesFeaturesRegions,
+      regional_treaties,
+      international_treaties,
+    } = this.state;
 
     // Helper function to process treaties
     const processTreaties = (treaties) => {
@@ -534,11 +614,9 @@ class ControlInAfricaMap extends React.Component {
       });
     };
 
-    const organisationsRegionalTreaties = processTreaties(
+    const organisationsRegionalTreaties = processTreaties(regional_treaties);
-      this.regional_treaties
-    );
     const organisationsInternationalTreaties = processTreaties(
-      this.international_treaties
+      international_treaties
     );
 
     const organisationsInstruments = this.intsruments.map((instrument) => {
@@ -596,11 +674,6 @@ class ControlInAfricaMap extends React.Component {
   };
 
   render() {
-    const findColorByName = (name) => {
-      const org = this.regional_organisations.find((org) => org.name === name);
-      return org ? org.color : ""; // Return color value if found, otherwise return an empty string
-    };
-
     const {
       africaCountries,
       loading,
@@ -613,6 +686,10 @@ class ControlInAfricaMap extends React.Component {
       selectedRegion,
       selectedTreaty,
       selectedIcon,
+      geographical_organisations,
+      regional_organisations,
+      regional_treaties,
+      international_treaties,
     } = this.state;
 
     if (loading) {
@@ -625,12 +702,16 @@ class ControlInAfricaMap extends React.Component {
       <Container fluid>
         <Row>
           <Col sm={3}>
-          <FilterBox
+            <FilterBox
-            selectedCountry={selectedCountry}
+              selectedCountry={selectedCountry}
-            countriesNames={countriesNames}
+              countriesNames={countriesNames}
-            handleCountryChange={this.handleCountryChange}
+              handleCountryChange={this.handleCountryChange}
-            handleOrganizationClick={this.handleOrganizationClick}
+              handleOrganizationClick={this.handleOrganizationClick}
-            handleTreatiesClick={this.handleTreatiesClick}
+              handleTreatiesClick={this.handleTreatiesClick}
+              geographical_organisations={geographical_organisations}
+              regional_organisations={regional_organisations}
+              regional_treaties={regional_treaties}
+              international_treaties={international_treaties}
             ></FilterBox>
           </Col>
           <Col sm={9}>
@@ -683,6 +764,9 @@ class ControlInAfricaMap extends React.Component {
                           >
                             <CountryPopup
                               feature={feature}
+                              regional_organisations={regional_organisations}
+                              regional_treaties={regional_treaties}
+                              international_treaties={international_treaties}
                             ></CountryPopup>
                           </Tooltip>
                         </Marker>
@@ -716,6 +800,19 @@ class ControlInAfricaMap extends React.Component {
                   <button onClick={this.zoomOut}>-</button>
                   <button onClick={this.resetMap}>*</button>
                 </div>
+                <div className="country-select">
+                  <select
+                    onChange={this.handleCountryChange}
+                    value={selectedCountry}
+                  >
+                    <option value="">Select a country</option>
+                    {countriesNames.map((country, index) => (
+                      <option key={index} value={country}>
+                        {country}
+                      </option>
+                    ))}
+                  </select>
+                </div>
                 {this.state.showInfoBox && (
                   <MapInfoBox
                     className="info-box"

src/Components/Layout/ControlInAfrica/CountryPopup.jsx

@@ -2,140 +2,21 @@ import React from "react";
 import "../../../Styles/main.scss";
 
 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 regional_organisations = [
+const findColorByName = (name, regional_organisations) => {
-  { name: "AU", color: "#b2df8a" },
-  { name: "EAC", color: "#33a02c" },
-  { name: "IGAD", color: "#fb9a99" },
-  { name: "UMA", color: "#e31a1c" },
-  { name: "COMESA", color: "#fdbf6f" },
-  { name: "ECOWAS", color: "#ff7f00" },
-  { name: "CEN-SAD", color: "#cab2d6" },
-  { name: "SADC", color: "#6a3d9a" },
-  { name: "ECCAS", color: "#ffff99" },
-  { name: "ICGLR", color: "#b15928" },
-  { name: "RECSA", color: "#a6cee3" },
-  { name: "SARCOM", color: "#1f78b4" },
-];
-
-const regional_treaties = [
-  {
-    name: "Bamako Declaration",
-    name2: "BamakoDeclaration",
-    icon_eligible: Icon26,
-    icon_signed: Icon24,
-    icon_ratified: null,
-  },
-  {
-    name: "Kinshasa Convention",
-    name2: "KinshasaConvention",
-    icon_eligible: Icon4,
-    icon_signed: Icon6,
-    icon_ratified: Icon5,
-  },
-  {
-    name: "ECOWAS Convention",
-    name2: "ECOWASConvention",
-    icon_eligible: Icon2,
-    icon_signed: Icon3,
-    icon_ratified: null,
-  },
-  {
-    name: "Khartoum Declaration",
-    name2: "KhartoumDeclaration",
-    icon_eligible: Icon21,
-    icon_signed: Icon23,
-    icon_ratified: null,
-  },
-  {
-    name: "Nairobi Protocol",
-    name2: "NairobiProtocol",
-    icon_eligible: Icon22,
-    icon_signed: Icon25,
-    icon_ratified: null,
-  },
-  {
-    name: "SADC Firearms Protocol",
-    name2: "SADCFirearmsProtocol",
-    icon_eligible: Icon8,
-    icon_signed: Icon7,
-    icon_ratified: Icon9,
-  },
-];
-
-const international_treaties = [
-  {
-    name: "Arms Trade Treaty",
-    name2: "ArmsTradeTreaty",
-    icon_eligible: Icon19,
-    icon_signed: Icon17,
-    icon_ratified: Icon18,
-  },
-  {
-    name: "Firearms Protocol",
-    name2: "FirearmsProtocol",
-    icon_eligible: Icon12,
-    icon_signed: Icon10,
-    icon_ratified: Icon11,
-  },
-  {
-    name: "Wassenaar Agreement",
-    name2: "WassenaarAgreement",
-    icon_eligible: Icon15,
-    icon_signed: Icon13,
-    icon_ratified: Icon14,
-  },
-];
-const intsruments = [
-  {
-    name2: "UNProgrammeofAction",
-    name: "UN Programme of Action",
-    icon: Icon20,
-  },
-  {
-    name2: "InternationalTracingInstrument",
-    name: "International Tracing Instrument",
-    icon: Icon16,
-  },
-  {
-    name2: "StG-PoA",
-    name: "Silencing the Guns in Africa Programme of Action",
-    icon: Icon1,
-  },
-];
-
-const findColorByName = (name) => {
   const org = regional_organisations.find((org) => org.name === name);
   return org ? org.color : ""; // Return color value if found, otherwise return an empty string
 };
 
 const CountryPopup = (props) => {
-  const { feature } = props;
+  const {
+    feature,
+    regional_organisations,
+    regional_treaties,
+    international_treaties,
+  } = props;
   return (
     <>
       <h5>{feature.properties.name}</h5>
@@ -147,7 +28,7 @@ const CountryPopup = (props) => {
             style={
               feature.properties[org.name] === 1
                 ? {
-                    backgroundColor: findColorByName(org.name),
+                    backgroundColor: findColorByName(org.name, regional_organisations),
                   }
                 : {}
             }

src/Components/Layout/ControlInAfrica/FilterBox.jsx

@@ -1,306 +1,42 @@
 import React from "react";
 import "../../../Styles/main.scss";
+import Geo_Org_Filter from "./Geo_Org_Filter";
+import Reg_Org_Filter from "./Reg_Org_Filter";
+import Treaties_Filter from "./Treaties_Filter";
 
 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 regional_organisations = [
-  { name: "AU", color: "#b2df8a" },
-  { name: "EAC", color: "#33a02c" },
-  { name: "IGAD", color: "#fb9a99" },
-  { name: "UMA", color: "#e31a1c" },
-  { name: "COMESA", color: "#fdbf6f" },
-  { name: "ECOWAS", color: "#ff7f00" },
-  { name: "CEN-SAD", color: "#cab2d6" },
-  { name: "SADC", color: "#6a3d9a" },
-  { name: "ECCAS", color: "#ffff99" },
-  { name: "ICGLR", color: "#b15928" },
-  { name: "RECSA", color: "#a6cee3" },
-  { name: "SARCOM", color: "#1f78b4" },
-];
-
-const regional_treaties = [
-  {
-    name: "Bamako Declaration",
-    name2: "BamakoDeclaration",
-    icon_eligible: Icon26,
-    icon_signed: Icon24,
-    icon_ratified: null,
-  },
-  {
-    name: "Kinshasa Convention",
-    name2: "KinshasaConvention",
-    icon_eligible: Icon4,
-    icon_signed: Icon6,
-    icon_ratified: Icon5,
-  },
-  {
-    name: "ECOWAS Convention",
-    name2: "ECOWASConvention",
-    icon_eligible: Icon2,
-    icon_signed: Icon3,
-    icon_ratified: null,
-  },
-  {
-    name: "Khartoum Declaration",
-    name2: "KhartoumDeclaration",
-    icon_eligible: Icon21,
-    icon_signed: Icon23,
-    icon_ratified: null,
-  },
-  {
-    name: "Nairobi Protocol",
-    name2: "NairobiProtocol",
-    icon_eligible: Icon22,
-    icon_signed: Icon25,
-    icon_ratified: null,
-  },
-  {
-    name: "SADC Firearms Protocol",
-    name2: "SADCFirearmsProtocol",
-    icon_eligible: Icon8,
-    icon_signed: Icon7,
-    icon_ratified: Icon9,
-  },
-];
-
-const international_treaties = [
-  {
-    name: "Arms Trade Treaty",
-    name2: "ArmsTradeTreaty",
-    icon_eligible: Icon19,
-    icon_signed: Icon17,
-    icon_ratified: Icon18,
-  },
-  {
-    name: "Firearms Protocol",
-    name2: "FirearmsProtocol",
-    icon_eligible: Icon12,
-    icon_signed: Icon10,
-    icon_ratified: Icon11,
-  },
-  {
-    name: "Wassenaar Agreement",
-    name2: "WassenaarAgreement",
-    icon_eligible: Icon15,
-    icon_signed: Icon13,
-    icon_ratified: Icon14,
-  },
-];
-const intsruments = [
-  {
-    name2: "UNProgrammeofAction",
-    name: "UN Programme of Action",
-    icon: Icon20,
-  },
-  {
-    name2: "InternationalTracingInstrument",
-    name: "International Tracing Instrument",
-    icon: Icon16,
-  },
-  {
-    name2: "StG-PoA",
-    name: "Silencing the Guns in Africa Programme of Action",
-    icon: Icon1,
-  },
-];
 
 const FilterBox = (props) => {
-  const { selectedCountry, countriesNames, handleCountryChange, handleOrganizationClick, handleTreatiesClick } = props;
+  const {
+    handleOrganizationClick,
+    handleTreatiesClick,
+    regional_organisations,
+    regional_treaties,
+    international_treaties,
+    geographical_organisations,
+  } = props;
 
   return (
     <div className={`filters-box`}>
-      <div>
+      <Geo_Org_Filter
-        <h5>African Countries</h5>
+        handleOrganizationClick={handleOrganizationClick}
+        geographical_organisations={geographical_organisations}
+      />
+      <hr />
+      <Reg_Org_Filter
+        handleOrganizationClick={handleOrganizationClick}
+        regional_organisations={regional_organisations}
+      />
+      <hr />
+      <Treaties_Filter 
+      regional_treaties={regional_treaties}
+      international_treaties={international_treaties}
+      handleTreatiesClick={handleTreatiesClick}
 
-        <select onChange={handleCountryChange} value={selectedCountry}>
+      />
-          <option value="">Select a country</option>
+      
-          {countriesNames.map((country, index) => (
-            <option key={index} value={country}>
-              {country}
-            </option>
-          ))}
-        </select>
-        <hr />
-      </div>
-      <div>
-        <h5>Regional Organisations</h5>
-        <div className="regional-organisations">
-          {regional_organisations.map((org, index) => (
-            <div
-              key={org.name}
-              className="organization-item"
-              style={{ backgroundColor: org.color }}
-              onClick={() =>
-                handleOrganizationClick(org.name, "", org.color)
-              }
-            >
-              <div className="name">{org.name}</div>
-            </div>
-          ))}
-        </div>
-
-        <hr />
-      </div>
-      <div>
-        <h5>Regional Treaties</h5>
-        <div className="regional-treaties">
-          {regional_treaties.map((treaty) => (
-            <div key={treaty.name} className="treaty-item">
-              <div className="treaty-item-name">{treaty.name}</div>
-
-              {treaty.icon_eligible && (
-                <img
-                  src={treaty.icon_eligible}
-                  alt={`${treaty.name}-Eligible`}
-                  title={`${treaty.name}-Eligible`}
-                  srcSet=""
-                  className="icon"
-                  onClick={() =>
-                    handleTreatiesClick(treaty.name2, "Eligible")
-                  }
-                />
-              )}
-              {treaty.icon_signed && (
-                <img
-                  src={treaty.icon_signed}
-                  alt={`${treaty.name}-Signed`}
-                  title={`${treaty.name}-Signed`}
-                  srcSet=""
-                  className="icon"
-                  onClick={() =>
-                    handleTreatiesClick(treaty.name2, "Signed")
-                  }
-                />
-              )}
-              {treaty.icon_ratified && (
-                <img
-                  src={treaty.icon_ratified}
-                  alt={`${treaty.name}-Ratified`}
-                  title={`${treaty.name}-Ratified`}
-                  srcSet=""
-                  className="icon"
-                  onClick={() =>
-                    handleTreatiesClick(treaty.name2, "Ratified")
-                  }
-                />
-              )}
-            </div>
-          ))}
-        </div>
-        <hr />
-      </div>
-      <div>
-        <h5>International Treaties</h5>
-        {international_treaties.map((treaty) => (
-          <div key={treaty.name} className="treaty-item">
-            <div className="treaty-item-name">{treaty.name}</div>
-
-            {treaty.icon_eligible && (
-              <img
-                src={treaty.icon_eligible}
-                alt={`${treaty.name}-Eligible`}
-                title={`${treaty.name}-Eligible`}
-                srcSet=""
-                className="icon-2"
-                onClick={() =>
-                  handleTreatiesClick(treaty.name2, "Eligible")
-                }
-              />
-            )}
-            {treaty.icon_signed && (
-              <img
-                src={treaty.icon_signed}
-                alt={`${treaty.name}-Signed`}
-                title={`${treaty.name}-Signed`}
-                srcSet=""
-                className="icon-2"
-                onClick={() => handleTreatiesClick(treaty.name2, "Signed")}
-              />
-            )}
-            {treaty.icon_ratified && (
-              <img
-                src={treaty.icon_ratified}
-                alt={`${treaty.name}-Ratified`}
-                title={`${treaty.name}-Ratified`}
-                srcSet=""
-                className="icon-2"
-                onClick={() =>
-                  handleTreatiesClick(treaty.name2, "Ratified")
-                }
-              />
-            )}
-          </div>
-        ))}
-        <hr />
-      </div>
-      <div>
-        <h5>
-          International Guidelines & Instruments <br />
-          <small>(countries with recent activities only, 2014 - 2019)</small>
-        </h5>
-        <div className="treaty-item-2">
-          <div className="treaty-item-name">UN Programme of Action</div>
-          <img
-            src={Icon20}
-            alt=""
-            className="icon-2"
-            onClick={() => handleTreatiesClick("UNProgrammeofAction", "Checked")}
-          />
-        </div>
-        <div className="treaty-item-2">
-          <div className="treaty-item-name">
-            International Tracing Instrument
-          </div>
-          <img
-            src={Icon16}
-            alt=""
-            className="icon-2"
-            onClick={() =>
-              handleTreatiesClick("InternationalTracingInstrument", "Checked")
-            }
-          />
-        </div>
-        <hr />
-      </div>
-      <div>
-        <h5>African Guidelines & Instrumentss</h5>
-        <div className="treaty-item-2">
-          <div className="treaty-item-name">
-            Silencing the Guns in Africa Programme of Action
-          </div>
-          <img
-            src={Icon1}
-            alt=""
-            className="icon-2"
-            onClick={() => handleTreatiesClick("StG-PoA", "Checked")}
-          />
-        </div>
-      </div>
     </div>
   );
 };

src/Components/Layout/ControlInAfrica/Geo_Org_Filter.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+const Geo_Org_Filter = (props) => {
+    const {
+      handleOrganizationClick,
+      geographical_organisations,
+    } = props;
+  return (
+    <div>
+        <h5>Geographical Organisations</h5>
+        <div className="regional-organisations">
+          {geographical_organisations.map((org, index) => (
+            <div
+              key={org.name}
+              className="organization-item p-2"
+              style={{ backgroundColor: org.color }}
+              onClick={() => handleOrganizationClick(org.name, "", org.color)}
+            >
+              <div className="name">{org.name}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+  )
+}
+
+export default Geo_Org_Filter

src/Components/Layout/ControlInAfrica/MarkerIcon.jsx

@@ -2,33 +2,6 @@ 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

src/Components/Layout/ControlInAfrica/Reg_Org_Filter.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+const Reg_Org_Filter = (props) => {
+  const { handleOrganizationClick, regional_organisations } = props;
+  return (
+    <div>
+      <h5>Regional Organisations</h5>
+      <h6>Organisations internationales / المنظمات الإقليمية</h6>
+      <div className="regional-organisations">
+        {regional_organisations.map((org, index) => (
+          <div
+            key={org.name}
+            className="organization-item"
+            style={{ backgroundColor: org.color }}
+            onClick={() => handleOrganizationClick(org.name, "", org.color)}
+          >
+            <div className="name">{org.name}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Reg_Org_Filter;

src/Components/Layout/ControlInAfrica/Treaties_Filter.jsx

@@ -0,0 +1,181 @@
+import React from "react";
+import Icon1 from "../../../Icons/icon1.svg";
+import Icon16 from "../../../Icons/icon16.svg";
+import Icon20 from "../../../Icons/icon20.svg";
+
+const Treaties_Filter = (props) => {
+  const { international_treaties, handleTreatiesClick, regional_treaties } = props;
+  return (
+    <div>
+      <div>
+        <h5>Regional Treaties</h5>
+        <h6>Traités régionales / المعاهدات الأقليمية</h6>
+        <div className="regional-treaties">
+          <div className="treaty-item mb-0">
+            <div className="treaty-item-name">Eligible</div>
+            <div className="treaty-item-name">Signed</div>
+            <div className="treaty-item-name">Ratified</div>
+            <div className="treaty-item-name"></div>
+          </div>
+          <div className="treaty-item mb-0">
+            <div className="treaty-item-name">Eligible</div>
+            <div className="treaty-item-name">Signé</div>
+            <div className="treaty-item-name">Ratifié</div>
+            <div className="treaty-item-name"></div>
+          </div>
+          <div className="treaty-item">
+            <div className="treaty-item-name">المتفق عليها</div>
+            <div className="treaty-item-name">موقعة</div>
+            <div className="treaty-item-name">مصدق عليها</div>
+            <div className="treaty-item-name"></div>
+          </div>
+          {regional_treaties.map((treaty) => (
+            <div key={treaty.name} className="treaty-item">
+              {treaty.icon_eligible ? (
+                <img
+                  src={treaty.icon_eligible}
+                  alt={`${treaty.name}-Eligible`}
+                  title={`${treaty.name}-Eligible`}
+                  srcSet=""
+                  className="icon"
+                  onClick={() => handleTreatiesClick(treaty.name2, "Eligible")}
+                />
+              ) : (
+                <div className="icon"></div>
+              )}
+              {treaty.icon_signed ? (
+                <img
+                  src={treaty.icon_signed}
+                  alt={`${treaty.name}-Signed`}
+                  title={`${treaty.name}-Signed`}
+                  srcSet=""
+                  className="icon"
+                  onClick={() => handleTreatiesClick(treaty.name2, "Signed")}
+                />
+              ) : (
+                <div className="icon"></div>
+              )}
+              {treaty.icon_ratified ? (
+                <img
+                  src={treaty.icon_ratified}
+                  alt={`${treaty.name}-Ratified`}
+                  title={`${treaty.name}-Ratified`}
+                  srcSet=""
+                  className="icon"
+                  onClick={() => handleTreatiesClick(treaty.name2, "Ratified")}
+                />
+              ) : (
+                <div className="icon"></div>
+              )}
+              <div className="treaty-item-name">{treaty.name}</div>
+            </div>
+          ))}
+        </div>
+        <hr />
+      </div>
+      <div>
+        <h5>International Treaties</h5>
+        <h6>Traités internationales / المعاهدات الدولية</h6>
+        {international_treaties.map((treaty) => (
+          <div key={treaty.name} className="treaty-item">
+            {treaty.icon_eligible ? (
+              <img
+                src={treaty.icon_eligible}
+                alt={`${treaty.name}-Eligible`}
+                title={`${treaty.name}-Eligible`}
+                srcSet=""
+                className="icon-2"
+                onClick={() => handleTreatiesClick(treaty.name2, "Eligible")}
+              />
+            ) : (
+              <div className="icon"></div>
+            )}
+            {treaty.icon_signed ? (
+              <img
+                src={treaty.icon_signed}
+                alt={`${treaty.name}-Signed`}
+                title={`${treaty.name}-Signed`}
+                srcSet=""
+                className="icon-2"
+                onClick={() => handleTreatiesClick(treaty.name2, "Signed")}
+              />
+            ) : (
+              <div className="icon"></div>
+            )}
+            {treaty.icon_ratified ? (
+              <img
+                src={treaty.icon_ratified}
+                alt={`${treaty.name}-Ratified`}
+                title={`${treaty.name}-Ratified`}
+                srcSet=""
+                className="icon-2"
+                onClick={() => handleTreatiesClick(treaty.name2, "Ratified")}
+              />
+            ) : (
+              <div className="icon"></div>
+            )}
+            <div className="treaty-item-name">{treaty.name}</div>
+          </div>
+        ))}
+        <hr />
+      </div>
+      <div>
+        <h5>
+          International Guidelines & Instruments <br />
+          <small>(countries with recent activities only, 2014 - 2019)</small>
+        </h5>
+        <h6>
+          Directives & instruments internationaux <br />
+          <small>(pays avec activité récente uniquement, 2014 - 2019)</small>
+        </h6>
+        <h6>
+          المبادىء التوجيهية و الأدوات الدولية <br />
+          <small>(فقط الدول ذات النشاطات الحديثة 2014-2019)</small>
+        </h6>
+        <div className="treaty-item-2">
+          <img
+            src={Icon20}
+            alt=""
+            className="icon-2"
+            onClick={() =>
+              handleTreatiesClick("UNProgrammeofAction", "Checked")
+            }
+          />
+          <div className="treaty-item-name">UN Programme of Action</div>
+        </div>
+        <div className="treaty-item-2">
+          <img
+            src={Icon16}
+            alt=""
+            className="icon-2"
+            onClick={() =>
+              handleTreatiesClick("InternationalTracingInstrument", "Checked")
+            }
+          />
+          <div className="treaty-item-name">
+            International Tracing Instrument
+          </div>
+        </div>
+        <hr />
+      </div>
+      <div>
+        <h5>African Guidelines & Instrumentss</h5>
+        <h6>Directives & instruments africains</h6>
+        <h6>المبادىء التوجيهية و الأدوات السياسية في افريقيا</h6>
+        <div className="treaty-item-2">
+          <img
+            src={Icon1}
+            alt=""
+            className="icon-2"
+            onClick={() => handleTreatiesClick("StG-PoA", "Checked")}
+          />
+          <div className="treaty-item-name">
+            Silencing the Guns in Africa Programme of Action
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Treaties_Filter;

src/Data/Orgs.geojson

@@ -0,0 +1,109 @@
+{"regional_organisations": [
+  { "name": "AU", "color": "#b2df8a" },
+  { "name": "EAC", "color": "#33a02c" },
+  { "name": "IGAD", "color": "#fb9a99" },
+  { "name": "UMA", "color": "#e31a1c" },
+  { "name": "COMESA", "color": "#fdbf6f" },
+  { "name": "ECOWAS", "color": "#ff7f00" },
+  { "name": "CEN-SAD", "color": "#cab2d6" },
+  { "name": "SADC", "color": "#6a3d9a" },
+  { "name": "ECCAS", "color": "#ffff99" },
+  { "name": "ICGLR", "color": "#b15928" },
+  { "name": "RECSA", "color": "#a6cee3" },
+  { "name": "SARCOM", "color": "#1f78b4" }
+],
+
+"geographical_organisations": [
+  { "name": "Northern-Africa", "color": "#e3e3e3" },
+  { "name": "Eastern-Africa", "color": "#e3e3e3" },
+  { "name": "Southern-Africa", "color": "#e3e3e3" },
+  { "name": "Western-Africa", "color": "#e3e3e3" },
+  { "name": "Central-Africa", "color": "#e3e3e3" }
+],
+
+"regional_treaties": [
+  {
+    "name": "Bamako Declaration",
+    "name2": "BamakoDeclaration",
+    "icon_eligible": "Icon26",
+    "icon_signed": "Icon24",
+    "icon_ratified": "none"
+  },
+  {
+    "name": "Kinshasa Convention",
+    "name2": "KinshasaConvention",
+    "icon_eligible": "Icon4",
+    "icon_signed": "Icon6",
+    "icon_ratified": "Icon5"
+  },
+  {
+    "name": "ECOWAS Convention",
+    "name2": "ECOWASConvention",
+    "icon_eligible": "Icon2",
+    "icon_signed": "Icon3",
+    "icon_ratified": "none"
+  },
+  {
+    "name": "Khartoum Declaration",
+    "name2": "KhartoumDeclaration",
+    "icon_eligible": "Icon21",
+    "icon_signed": "Icon23",
+    "icon_ratified": "none"
+  },
+  {
+    "name": "Nairobi Protocol",
+    "name2": "NairobiProtocol",
+    "icon_eligible": "Icon22",
+    "icon_signed": "Icon25",
+    "icon_ratified": "none"
+  },
+  {
+    "name": "SADC Firearms Protocol",
+    "name2": "SADCFirearmsProtocol",
+    "icon_eligible": "Icon8",
+    "icon_signed": "Icon7",
+    "icon_ratified": "Icon9"
+  }
+],
+
+"international_treaties": [
+  {
+    "name": "Arms Trade Treaty",
+    "name2": "ArmsTradeTreaty",
+    "icon_eligible": "Icon19",
+    "icon_signed": "Icon17",
+    "icon_ratified": "Icon18"
+  },
+  {
+    "name": "Firearms Protocol",
+    "name2": "FirearmsProtocol",
+    "icon_eligible": "Icon12",
+    "icon_signed": "Icon10",
+    "icon_ratified": "Icon11"
+  },
+  {
+    "name": "Wassenaar Agreement",
+    "name2": "WassenaarAgreement",
+    "icon_eligible": "Icon15",
+    "icon_signed": "Icon13",
+    "icon_ratified": "Icon14"
+  }
+],
+
+"intsruments": [
+  {
+    "name2": "UNProgrammeofAction",
+    "name": "UN Programme of Action",
+    "icon": "Icon20"
+  },
+  {
+    "name2": "InternationalTracingInstrument",
+    "name": "International Tracing Instrument",
+    "icon": "Icon16"
+  },
+  {
+    "name2": "StG-PoA",
+    "name": "Silencing the Guns in Africa Programme of Action",
+    "icon": "Icon1"
+  }
+]}

src/Styles/Layout/_filters.scss

@@ -1,7 +1,7 @@
 .filters-box {
     padding: $gap;
     border: 1px solid $border-color;
-    height: 100vh;
+    //height: 100vh;
   }
   
   // _organizations
@@ -54,6 +54,6 @@
   
   .treaty-item-2 {
     display: grid;
-    grid-template-columns: repeat(2, 75%);
+    grid-template-columns: repeat(2, 25%);
     margin-bottom: 15px;
   }

src/Styles/Layout/_map.scss

@@ -12,4 +12,16 @@
     height: 100vh;
     margin-top: 0px;
   }
+
+  .country-select{
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    // background-color: white;
+    // padding: 10px;
+    // border: 1px solid #ccc;
+    // border-radius: 4px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+  }
   

src/tmp/orgs.txt

@@ -0,0 +1,109 @@
+  "regional_organisations": [
+    { "name": "AU", "color": "#b2df8a" },
+    { "name": "EAC", "color": "#33a02c" },
+    { "name": "IGAD", "color": "#fb9a99" },
+    { "name": "UMA", "color": "#e31a1c" },
+    { "name": "COMESA", "color": "#fdbf6f" },
+    { "name": "ECOWAS", "color": "#ff7f00" },
+    { "name": "CEN-SAD", "color": "#cab2d6" },
+    { "name": "SADC", "color": "#6a3d9a" },
+    { "name": "ECCAS", "color": "#ffff99" },
+    { "name": "ICGLR", "color": "#b15928" },
+    { "name": "RECSA", "color": "#a6cee3" },
+    { "name": "SARCOM", "color": "#1f78b4" }
+  ],
+
+  "geographical_organisations": [
+    { "name": "Northern-Africa", "color": "#e3e3e3" },
+    { "name": "Eastern-Africa", "color": "#e3e3e3" },
+    { "name": "Southern-Africa", "color": "#e3e3e3" },
+    { "name": "Western-Africa", "color": "#e3e3e3" },
+    { "name": "Central-Africa", "color": "#e3e3e3" }
+  ],
+
+  "regional_treaties": [
+    {
+      "name": "Bamako Declaration",
+      "name2": "BamakoDeclaration",
+      "icon_eligible": "Icon26",
+      "icon_signed": "Icon24",
+      "icon_ratified": "none"
+    },
+    {
+      "name": "Kinshasa Convention",
+      "name2": "KinshasaConvention",
+      "icon_eligible": "Icon4",
+      "icon_signed": "Icon6",
+      "icon_ratified": "Icon5"
+    },
+    {
+      "name": "ECOWAS Convention",
+      "name2": "ECOWASConvention",
+      "icon_eligible": "Icon2",
+      "icon_signed": "Icon3",
+      "icon_ratified": "none"
+    },
+    {
+      "name": "Khartoum Declaration",
+      "name2": "KhartoumDeclaration",
+      "icon_eligible": "Icon21",
+      "icon_signed": "Icon23",
+      "icon_ratified": "none"
+    },
+    {
+      "name": "Nairobi Protocol",
+      "name2": "NairobiProtocol",
+      "icon_eligible": "Icon22",
+      "icon_signed": "Icon25",
+      "icon_ratified": "none"
+    },
+    {
+      "name": "SADC Firearms Protocol",
+      "name2": "SADCFirearmsProtocol",
+      "icon_eligible": "Icon8",
+      "icon_signed": "Icon7",
+      "icon_ratified": "Icon9"
+    }
+  ],
+
+  "international_treaties": [
+    {
+      "name": "Arms Trade Treaty",
+      "name2": "ArmsTradeTreaty",
+      "icon_eligible": "Icon19",
+      "icon_signed": "Icon17",
+      "icon_ratified": "Icon18"
+    },
+    {
+      "name": "Firearms Protocol",
+      "name2": "FirearmsProtocol",
+      "icon_eligible": "Icon12",
+      "icon_signed": "Icon10",
+      "icon_ratified": "Icon11"
+    },
+    {
+      "name": "Wassenaar Agreement",
+      "name2": "WassenaarAgreement",
+      "icon_eligible": "Icon15",
+      "icon_signed": "Icon13",
+      "icon_ratified": "Icon14"
+    }
+  ],
+
+  "intsruments": [
+    {
+      "name2": "UNProgrammeofAction",
+      "name": "UN Programme of Action",
+      "icon": "Icon20"
+    },
+    {
+      "name2": "InternationalTracingInstrument",
+      "name": "International Tracing Instrument",
+      "icon": "Icon16"
+    },
+    {
+      "name2": "StG-PoA",
+      "name": "Silencing the Guns in Africa Programme of Action",
+      "icon": "Icon1"
+    }
+  ]