new marker added

src/src/components/legend/Legend.css

@@ -12,3 +12,7 @@
 .legend > div {
   cursor: pointer;
 }
+.iconBlack {
+  width: 32px;
+  height: 32px; 
+}

src/src/components/legend/Legend.js

@@ -5,6 +5,7 @@ import yellowImg from "../../assets/img/yellowMarker.png";
 import brownImg from "../../assets/img/brownMarker.png";
 import redImg from "../../assets/img/redMarker.png";
 import grayImg from "../../assets/img/grayMarker.png";
+import blackIcon from "../../assets/img/blackMarker.png";
 import { useTranslation } from "react-i18next";
 
 function Legend({ setFilter, filter }) {
@@ -57,6 +58,7 @@ function Legend({ setFilter, filter }) {
         <img src={grayImg} alt="" className="me-1" />
         <p className="m-0">{t("monitoring.seasonally")}</p>
       </div>
+
     </div>
   );
 }

src/src/pages/monitoring/Monitoring.js

@@ -59,6 +59,10 @@ function Visualization() {
     iconUrl: require(`../../assets/img/redMarker.png`),
     iconSize: [32, 32],
   });
+  const blackIcon = new L.Icon({
+    iconUrl: require(`../../assets/img/blackMarker.png`),
+    iconSize: [50, 50],
+  });
   const grayIcon = new L.Icon({
     iconUrl: require(`../../assets/img/grayMarker.png`),
     iconSize: [32, 32],
@@ -160,12 +164,10 @@ function Visualization() {
   }, [filter, waterpoints]);
   const popupData = (wp) => {
     if (wp.name === "Kitala") {
-      if (!filter.gray) {
-        return null;
-      }
+
 
       return (
-        <Marker position={[wp.lat, wp.lon]} icon={grayIcon} key={wp.id}>
+        <Marker position={[wp.lat, wp.lon]} icon={blackIcon} key={wp.id}>
         <Popup closeButton={false} className="popup" maxWidth={200}>
           <div className="text-center">
             <WpLabel waterpoint={wp} />