selected filters

src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js

@@ -12,6 +12,7 @@ import FilterBox from "./FilterBox";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
+import SelectedFilters from "./SelectedFilters";
 
 import Icon1 from "../../../Icons/icon1.svg";
 import Icon2 from "../../../Icons/icon2.svg";
@@ -82,6 +83,8 @@ class ControlInAfricaMap extends React.Component {
       regional_treaties: [],
       international_treaties: [],
       intsruments: [],
+      internationalIntsruments: [],
+      africanIntsruments: [],
 
       loading: true,
       error: null,
@@ -96,6 +99,7 @@ class ControlInAfricaMap extends React.Component {
       selectedCountry: "",
       selectedRegion: "",
       selectedTreaty: "",
+      selectedTreatyOfficialName: "", // For the Slescted filters box
 
       selectedCountriesNamesRegions: [],
       selectedCountriesNamesTreaties: [],
@@ -112,17 +116,15 @@ class ControlInAfricaMap extends React.Component {
       infoBox: [],
       showInfoBox: false,
     };
-
   }
 
-
   componentDidMount() {
     this.fetchData();
     window.addEventListener("resize", this.handleResize);
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener("resize", this.handleResize);
   }
 
   fetchData = async () => {
@@ -170,6 +172,18 @@ class ControlInAfricaMap extends React.Component {
         })
       );
 
+      const internationalIntsruments = data.internationalIntsruments.map(
+        (instrument) => ({
+          ...instrument,
+          icon: iconMap[instrument.icon] || null,
+        })
+      );
+
+      const africanIntsruments = data.africanIntsruments.map((instrument) => ({
+        ...instrument,
+        icon: iconMap[instrument.icon] || null,
+      }));
+
       const intsruments = data.intsruments.map((instrument) => ({
         ...instrument,
         icon: iconMap[instrument.icon] || null,
@@ -180,6 +194,8 @@ class ControlInAfricaMap extends React.Component {
           geographical_organisations: data.geographical_organisations,
           regional_treaties,
           international_treaties,
+          internationalIntsruments,
+          africanIntsruments,
           intsruments,
         },
         () => {
@@ -277,6 +293,7 @@ class ControlInAfricaMap extends React.Component {
         selectedCountry: "",
         selectedRegion: "",
         selectedTreaty: "",
+        selectedTreatyOfficialName: "",
 
         selectedCountriesNamesRegions: [],
         selectedCountriesNamesTreaties: [],
@@ -300,6 +317,7 @@ class ControlInAfricaMap extends React.Component {
       selectedCountry: countryName,
       selectedRegion: "",
       selectedTreaty: "",
+      selectedTreatyOfficialName: "",
 
       selectedCountriesNamesRegions: [],
       selectedCountriesNamesTreaties: [],
@@ -367,20 +385,24 @@ class ControlInAfricaMap extends React.Component {
       prevStatuesRegion: status,
       selectedCountriesFeaturesRegions,
       selectedTreaty: "",
+      selectedTreatyOfficialName: "",
       showInfoBox: true,
     });
   };
 
-  handleTreatiesClick = (name, status) => {
+  handleTreatiesClick = (name, status, official_name) => {
     const {
       selectedRegion,
       selectedTreaty,
+      selectedTreatyOfficialName,
       selectedCountriesNamesRegions,
       prevStatuesTreaty,
       africaCountries,
       regional_treaties,
       international_treaties,
       intsruments,
+      internationalIntsruments,
+      africanIntsruments,
     } = this.state;
 
     // get the icon of the selected treaty based on the name and status of the treaty
@@ -390,7 +412,12 @@ class ControlInAfricaMap extends React.Component {
       regional_treaties.find((org) => org.name2 === name) ||
       international_treaties.find((org) => org.name2 === name);
 
-    let instrument = intsruments.find(
+    let instrument =
+      internationalIntsruments.find(
+        (instrument) => instrument.name2 === name
+      ) || africanIntsruments.find((instrument) => instrument.name2 === name);
+
+    let instrument_ = intsruments.find(
       (instrument) => instrument.name2 === name
     );
 
@@ -418,6 +445,7 @@ class ControlInAfricaMap extends React.Component {
         selectedCountryColor: "yellow",
         selectedCountry: "",
         selectedTreaty: "",
+        selectedTreatyOfficialName: "",
         prevStatuesTreaty: "",
         prevStatuesRegion: "",
         selectedIcon: "none",
@@ -434,6 +462,7 @@ class ControlInAfricaMap extends React.Component {
         selectedCountriesNamesTreaties: [],
         selectedCountry: "",
         selectedTreaty: "",
+        selectedTreatyOfficialName: "",
         prevStatuesTreaty: "",
         selectedIcon: "none",
         showInfoBox: true,
@@ -464,6 +493,7 @@ class ControlInAfricaMap extends React.Component {
         selectedCountriesNamesTreaties: intersection,
         selectedCountry: "",
         selectedTreaty: name,
+        selectedTreatyOfficialName: official_name,
         prevStatuesTreaty: status,
         showInfoBox: true,
       });
@@ -474,6 +504,7 @@ class ControlInAfricaMap extends React.Component {
       selectedCountriesNamesTreaties,
       selectedCountry: "",
       selectedTreaty: name,
+      selectedTreatyOfficialName: official_name,
       prevStatuesTreaty: status,
       selectedCountriesFeaturesTreaties,
     });
@@ -485,6 +516,7 @@ class ControlInAfricaMap extends React.Component {
     ) {
       this.setState({
         selectedTreaty: name,
+        selectedTreatyOfficialName: official_name,
       });
     }
   };
@@ -494,6 +526,8 @@ class ControlInAfricaMap extends React.Component {
       selectedCountriesFeaturesRegions,
       regional_treaties,
       international_treaties,
+      internationalIntsruments,
+      africanIntsruments,
       intsruments,
     } = this.state;
 
@@ -524,11 +558,29 @@ class ControlInAfricaMap extends React.Component {
       });
     };
 
+    // Helper function to process instruments
+    const processInstruments = (instruments) => {
+      return instruments.map((instrument) => {
+        const countris = selectedCountriesFeaturesRegions.filter(
+          (feature) => feature.properties[instrument.name2] === 1
+        );
+        return {
+          name: instrument.name,
+          countries: countris.length,
+        };
+      });
+    };
+
     const organisationsRegionalTreaties = processTreaties(regional_treaties);
     const organisationsInternationalTreaties = processTreaties(
       international_treaties
     );
 
+    const internationalIntsruments_ = processInstruments(
+      internationalIntsruments
+    );
+    const africanIntsruments_ = processInstruments(africanIntsruments);
+
     const organisationsInstruments = intsruments.map((instrument) => {
       const countris = selectedCountriesFeaturesRegions.filter(
         (feature) => feature.properties[instrument.name2] === 1
@@ -543,6 +595,8 @@ class ControlInAfricaMap extends React.Component {
       organisationsRegionalTreaties,
       organisationsInternationalTreaties,
       organisationsInstruments,
+      internationalIntsruments_,
+      africanIntsruments_,
     };
   };
 
@@ -599,11 +653,15 @@ class ControlInAfricaMap extends React.Component {
       selectedCountryColor,
       selectedRegion,
       selectedTreaty,
+      selectedTreatyOfficialName,
       selectedIcon,
       geographical_organisations,
       regional_organisations,
       regional_treaties,
       international_treaties,
+      internationalIntsruments,
+      africanIntsruments,
+      intsruments,
     } = this.state;
 
     if (loading) {
@@ -615,7 +673,7 @@ class ControlInAfricaMap extends React.Component {
     return (
       <Container fluid>
         <Row>
-          <Col className="filter-section" sm={3} >
+          <Col className="filter-section" sm={3}>
             <FilterBox
               selectedCountry={selectedCountry}
               countriesNames={countriesNames}
@@ -626,6 +684,9 @@ class ControlInAfricaMap extends React.Component {
               regional_organisations={regional_organisations}
               regional_treaties={regional_treaties}
               international_treaties={international_treaties}
+              internationalIntsruments={internationalIntsruments}
+              africanIntsruments={africanIntsruments}
+              intsruments={intsruments}
             ></FilterBox>
           </Col>
           <Col className="map-section" sm={9}>
@@ -729,6 +790,15 @@ class ControlInAfricaMap extends React.Component {
                   </select>
                 </div>
 
+                {selectedRegion || selectedTreatyOfficialName ? (
+                  <SelectedFilters
+                    selectedRegion={selectedRegion}
+                    selectedTreatyOfficialName={selectedTreatyOfficialName}
+                  ></SelectedFilters>
+                ) : (
+                  <></>
+                )}
+
                 {this.state.showInfoBox && (
                   <MapInfoBox
                     className="info-box"

src/Components/Layout/ControlInAfrica/FilterBox.jsx

@@ -29,6 +29,9 @@ const FilterBox = (props) => {
     regional_treaties,
     international_treaties,
     geographical_organisations,
+    instruments,
+    internationalIntsruments,
+    africanIntsruments,
   } = props;
 
   return (
@@ -59,6 +62,9 @@ const FilterBox = (props) => {
             <Treaties_Filter
               regional_treaties={regional_treaties}
               international_treaties={international_treaties}
+              instruments={instruments}
+              internationalIntsruments={internationalIntsruments}
+              africanIntsruments={africanIntsruments}
               handleTreatiesClick={handleTreatiesClick}
               language={language}
             />

src/Components/Layout/ControlInAfrica/MapInfoBox.jsx

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
-import Button from "react-bootstrap/Button";
 import Collapse from "react-bootstrap/Collapse";
+import Card_ from "../../UI/Card_/Card_";
 
 const MapInfoBox = (props) => {
+  const { internationalIntsruments_, africanIntsruments_ } = props.info;
   const regional_treaties = props.info.organisationsRegionalTreaties;
   const international_treaties = props.info.organisationsInternationalTreaties;
   const instruments = props.info.organisationsInstruments;
@@ -10,15 +11,22 @@ const MapInfoBox = (props) => {
   const [isHidden, setIsHidden] = useState(false);
 
   return (
-    <div className={props.className}>
+    <Card_ className={props.className}>
       <div
-        onClick={() => {setOpen(!open); setIsHidden(!isHidden);}}
+        onClick={() => {
+          setOpen(!open);
+          setIsHidden(!isHidden);
+        }}
         aria-controls="example-collapse-text"
         aria-expanded={open}
         style={{ display: "flex", justifyContent: "space-between" }}
       >
-        <span><h3>{props.selectedRegion}</h3></span>
-        <span><h3>{isHidden ? 'Show' : 'Hide'}</h3></span>
+        <span>
+          <h3>{props.selectedRegion}</h3>
+        </span>
+        <span>
+          <h3>{isHidden ? "Show" : "Hide"}</h3>
+        </span>
       </div>
       <Collapse in={open}>
         <div className="example-collapse-text">
@@ -144,8 +152,29 @@ const MapInfoBox = (props) => {
               </tbody>
             </table>
           </div>
-          {instruments &&
-            instruments.map((item, index) => {
+          {internationalIntsruments_ &&
+            internationalIntsruments_.map((item, index) => {
+              return (
+                <p className="mb-1" key={index}>
+                  <strong>{item.name}:</strong>{" "}
+                  <span
+                    style={
+                      item.countries
+                        ? {
+                            color: props.selectedCountryColor,
+                            fontWeight: "bold",
+                            fontSize: "16px",
+                          }
+                        : {}
+                    }
+                  >
+                    {item.countries}
+                  </span>
+                </p>
+              );
+            })}
+          {africanIntsruments_ &&
+            africanIntsruments_.map((item, index) => {
               return (
                 <p className="mb-1" key={index}>
                   <strong>{item.name}:</strong>{" "}
@@ -167,7 +196,7 @@ const MapInfoBox = (props) => {
             })}
         </div>
       </Collapse>
-    </div>
+    </Card_>
   );
 };
 

src/Components/Layout/ControlInAfrica/SelectedFilters.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import Card_ from "../../UI/Card_/Card_";
+
+const SelectedFilters = (props) => {
+  const { selectedRegion, selectedTreatyOfficialName } = props;
+  return (
+    <Card_ className="selected-filters p-2">
+      <h5>Selected Filter/s:</h5>
+      {selectedRegion && <li>{selectedRegion}</li>}
+      {selectedTreatyOfficialName && <li>{selectedTreatyOfficialName}</li>}
+    </Card_>
+  );
+};
+
+export default SelectedFilters;

src/Components/Layout/ControlInAfrica/Treaties_Filter.jsx

@@ -19,12 +19,15 @@ const Treaties_Filter = (props) => {
     en: "African Guidelines & Instrumentss",
     fr: "Directives & instruments africains",
     ar: "المبادىء التوجيهية و الأدوات السياسية في افريقيا",
-  }
+  };
   const {
     international_treaties,
     handleTreatiesClick,
     regional_treaties,
     language,
+    instruments,
+    internationalIntsruments,
+    africanIntsruments,
   } = props;
   return (
     <div>
@@ -67,7 +70,9 @@ const Treaties_Filter = (props) => {
                   title={`${treaty.name}-Eligible`}
                   srcSet=""
                   className="icon"
-                  onClick={() => handleTreatiesClick(treaty.name2, "Eligible")}
+                  onClick={() =>
+                    handleTreatiesClick(treaty.name2, "Eligible", treaty.name)
+                  }
                 />
               ) : (
                 <div className="icon"></div>
@@ -79,7 +84,9 @@ const Treaties_Filter = (props) => {
                   title={`${treaty.name}-Signed`}
                   srcSet=""
                   className="icon"
-                  onClick={() => handleTreatiesClick(treaty.name2, "Signed")}
+                  onClick={() =>
+                    handleTreatiesClick(treaty.name2, "Signed", treaty.name)
+                  }
                 />
               ) : (
                 <div className="icon"></div>
@@ -91,7 +98,9 @@ const Treaties_Filter = (props) => {
                   title={`${treaty.name}-Ratified`}
                   srcSet=""
                   className="icon"
-                  onClick={() => handleTreatiesClick(treaty.name2, "Ratified")}
+                  onClick={() =>
+                    handleTreatiesClick(treaty.name2, "Ratified", treaty.name)
+                  }
                 />
               ) : (
                 <div className="icon"></div>
@@ -116,7 +125,9 @@ const Treaties_Filter = (props) => {
                 title={`${treaty.name}-Eligible`}
                 srcSet=""
                 className="icon-2"
-                onClick={() => handleTreatiesClick(treaty.name2, "Eligible")}
+                onClick={() =>
+                  handleTreatiesClick(treaty.name2, "Eligible", treaty.name)
+                }
               />
             ) : (
               <div className="icon"></div>
@@ -128,7 +139,9 @@ const Treaties_Filter = (props) => {
                 title={`${treaty.name}-Signed`}
                 srcSet=""
                 className="icon-2"
-                onClick={() => handleTreatiesClick(treaty.name2, "Signed")}
+                onClick={() =>
+                  handleTreatiesClick(treaty.name2, "Signed", treaty.name)
+                }
               />
             ) : (
               <div className="icon"></div>
@@ -140,7 +153,9 @@ const Treaties_Filter = (props) => {
                 title={`${treaty.name}-Ratified`}
                 srcSet=""
                 className="icon-2"
-                onClick={() => handleTreatiesClick(treaty.name2, "Ratified")}
+                onClick={() =>
+                  handleTreatiesClick(treaty.name2, "Ratified", treaty.name)
+                }
               />
             ) : (
               <div className="icon"></div>
@@ -151,58 +166,70 @@ const Treaties_Filter = (props) => {
         <hr />
       </div>
       <div>
-        {language === "en" && <h5>
-          International Guidelines & Instruments <br />
-          <small>(countries with recent activities only, 2014 - 2019)</small>
-        </h5>}
-        {language === "fr" && <h5>
-          Directives & instruments internationaux <br />
-          <small>(pays avec activité récente uniquement, 2014 - 2019)</small>
-        </h5>}
-        {language === "ar" &&  <h5>
-          المبادىء التوجيهية و الأدوات الدولية <br />
-          <small>(فقط الدول ذات النشاطات الحديثة 2014-2019)</small>
-        </h5>}
-        <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
+        {language === "en" && (
+          <h5>
+            International Guidelines & Instruments <br />
+            <small>(countries with recent activities only, 2014 - 2019)</small>
+          </h5>
+        )}
+        {language === "fr" && (
+          <h5>
+            Directives & instruments internationaux <br />
+            <small>(pays avec activité récente uniquement, 2014 - 2019)</small>
+          </h5>
+        )}
+        {language === "ar" && (
+          <h5>
+            المبادىء التوجيهية و الأدوات الدولية <br />
+            <small>(فقط الدول ذات النشاطات الحديثة 2014-2019)</small>
+          </h5>
+        )}
+        {internationalIntsruments.map((instrument) => (
+          <div key={instrument.name} className="treaty-item">
+            <img
+              src={instrument.icon}
+              alt={instrument.name}
+              title={instrument.name}
+              srcSet=""
+              className="icon-2"
+              onClick={() =>
+                handleTreatiesClick(
+                  instrument.name2,
+                  "checked",
+                  instrument.name
+                )
+              }
+            />
+            <div className="treaty-item-name">{instrument.name}</div>
           </div>
-        </div>
+        ))}
         <hr />
       </div>
       <div>
-        <h5>{africanGuidelinesHeadings[language] || africanGuidelinesHeadings['en']}</h5>
+        <h5>
+          {africanGuidelinesHeadings[language] ||
+            africanGuidelinesHeadings["en"]}
+        </h5>
 
-        <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
+        {africanIntsruments.map((instrument) => (
+          <div key={instrument.name} className="treaty-item">
+            <img
+              src={instrument.icon}
+              alt={instrument.name}
+              title={instrument.name}
+              srcSet=""
+              className="icon-2"
+              onClick={() =>
+                handleTreatiesClick(
+                  instrument.name2,
+                  "checked",
+                  instrument.name
+                )
+              }
+            />
+            <div className="treaty-item-name">{instrument.name}</div>
           </div>
-        </div>
+        ))}
       </div>
     </div>
   );

src/Components/UI/Card_/Card_.js

@@ -1,9 +1,9 @@
 import React from "react";
-import classes from './Card_.module.css'
+
 
 const Card_ = props => {
     return (
-        <div className={`${classes.card} ${props.className} `}>{props.children}</div>
+        <div className={`card ${props.className} `}>{props.children}</div>
     );
 }
 

src/Data/Orgs.geojson

@@ -1,109 +1,132 @@
-{"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" }
-],
+{
+  "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" }
-],
+  "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"
-  }
-],
+  "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"
-  }
-],
+  "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"
-  }
-]}
+  "internationalIntsruments": [
+    {
+      "name2": "UNProgrammeofAction",
+      "name": "UN Programme of Action",
+      "icon": "Icon20"
+    },
+    {
+      "name2": "InternationalTracingInstrument",
+      "name": "International Tracing Instrument",
+      "icon": "Icon16"
+    }
+  ],
+
+  "africanIntsruments": [
+    {
+      "name2": "StG-PoA",
+      "name": "Silencing the Guns in Africa Programme of Action",
+      "icon": "Icon1"
+    }
+  ],
+
+  "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/Components/_cards.scss

@@ -0,0 +1,5 @@
+.card{
+    // background-color: red;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+    border-radius: 5px;
+}

src/Styles/Layout/_map.scss

@@ -20,6 +20,13 @@
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   z-index: 1000;
 }
+
+.selected-filters{
+  position: absolute;
+  top: 60px;
+  left: 20px;
+}
+
 @media (min-width: 200px) {
   .col-sm-9 {
     flex: 0 0 auto;

src/Styles/main.scss

@@ -19,6 +19,7 @@
 
 // Components
 @import 'Components/zoom_control';
+@import 'Components/cards';
 // Import other components partials...
 
 // Import other partials as needed...