icons added

src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js

@@ -1,7 +1,7 @@
 import React, { createRef, useContext } from "react";
 import Stack from "react-bootstrap/Stack";
 import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet";
-import L from "leaflet";
+import L, { icon } from "leaflet";
 import Africa from "../../../Data/ControlinAfrica.geojson";
 import "../../../Styles/main.scss";
 import { CountryStyle, CountrySelectedStyle } from "./countryStyles";
@@ -67,6 +67,7 @@ class ControlInAfricaMap extends React.Component {
       selectedCountriesIntersections: [],
 
       selectedCountryColor: "yellow",
+      selectedIcon: "none",
 
       prevStatuesRegion: "",
       prevStatuesTreaty: "",
@@ -160,14 +161,20 @@ class ControlInAfricaMap extends React.Component {
     },
   ];
   intsruments = [
-    { name2: "UNProgrammeofAction", name: "UN Programme of Action" },
+    {
+      name2: "UNProgrammeofAction",
+      name: "UN Programme of Action",
+      icon: Icon16,
+    },
     {
       name2: "InternationalTracingInstrument",
       name: "International Tracing Instrument",
+      icon: Icon1,
     },
     {
       name2: "StG-PoA",
       name: "Silencing the Guns in Africa Programme of Action",
+      icon: Icon20,
     },
   ];
 
@@ -373,14 +380,30 @@ class ControlInAfricaMap extends React.Component {
     });
   };
 
-  handleTreatiesClick = (name, status, color) => {
+  handleTreatiesClick = (name, status) => {
     const {
       selectedRegion,
       selectedTreaty,
       selectedCountriesNamesRegions,
       prevStatuesTreaty,
       africaCountries,
+      selectedIcon,
     } = 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) ||
+      this.international_treaties.find((org) => org.name2 === name);
+
+    if (org) {
+      //console.log(org[`icon_${status.toLowerCase()}`]);
+      this.setState({
+        selectedIcon: org[`icon_${status.toLowerCase()}`] || "none",
+      });
+    }
+
     // if the same treaty is selected previously and the region is not selected
     // then the treaty will be deselected
     if (
@@ -397,6 +420,7 @@ class ControlInAfricaMap extends React.Component {
         selectedTreaty: "",
         prevStatuesTreaty: "",
         prevStatuesRegion: "",
+        selectedIcon: "none",
         showInfoBox: false,
       });
       return;
@@ -411,6 +435,7 @@ class ControlInAfricaMap extends React.Component {
         selectedCountry: "",
         selectedTreaty: "",
         prevStatuesTreaty: "",
+        selectedIcon: "none",
         showInfoBox: true,
       });
       return;
@@ -436,7 +461,6 @@ class ControlInAfricaMap extends React.Component {
       );
       this.setState({
         selectedCountriesNamesTreaties: intersection,
-        //selectedCountryColor: "yellow",
         selectedCountry: "",
         selectedTreaty: name,
         prevStatuesTreaty: status,
@@ -576,6 +600,7 @@ class ControlInAfricaMap extends React.Component {
       selectedCountryColor,
       selectedRegion,
       selectedTreaty,
+      selectedIcon,
     } = this.state;
 
     if (loading) {
@@ -912,7 +937,7 @@ class ControlInAfricaMap extends React.Component {
                             feature.properties.y,
                             feature.properties.x,
                           ]}
-                          icon={Icon20}
+                          icon={selectedIcon}
                         ></MarkerIcon>
                       );
                     }

src/Components/Layout/ControlInAfrica/MarkerIcon.jsx

@@ -30,6 +30,7 @@ import Icon25 from "../../../Icons/icon25.svg";
 import Icon26 from "../../../Icons/icon26.svg";
 
 const MarkerIcon = (props) => {
+  console.log(props.icon)
   return (
     <Marker
       key={props.index}