diff --git a/src/src/assets/img/blackMarker.png b/src/src/assets/img/blackMarker.png new file mode 100644 index 0000000..2bf842c Binary files /dev/null and b/src/src/assets/img/blackMarker.png differ diff --git a/src/src/assets/img/whiteMarker.png b/src/src/assets/img/whiteMarker.png new file mode 100644 index 0000000..3c0518a Binary files /dev/null and b/src/src/assets/img/whiteMarker.png differ diff --git a/src/src/components/legend/Legend.css b/src/src/components/legend/Legend.css index 98b0cd7..053a7c1 100644 --- a/src/src/components/legend/Legend.css +++ b/src/src/components/legend/Legend.css @@ -12,3 +12,7 @@ .legend > div { cursor: pointer; } +.iconBlack { + width: 32px; + height: 32px; +} \ No newline at end of file diff --git a/src/src/components/legend/Legend.js b/src/src/components/legend/Legend.js index 4cab735..57b1369 100644 --- a/src/src/components/legend/Legend.js +++ b/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 }) { @@ -48,7 +49,16 @@ function Legend({ setFilter, filter }) {

{t("monitoring.near")}

- +
setFilter({ ...filter, gray: !filter.gray })} + > + +

{t("monitoring.seasonally")}

+
+ ); } diff --git a/src/src/components/simpleLegend/Simplelegend.js b/src/src/components/simpleLegend/Simplelegend.js index 37d4ea7..fa081b0 100644 --- a/src/src/components/simpleLegend/Simplelegend.js +++ b/src/src/components/simpleLegend/Simplelegend.js @@ -28,8 +28,12 @@ function Simplelegend() {

{t("monitoring.near")}

+
+ +

{t("monitoring.seasonally")}

+
); } -export default Simplelegend; +export default Simplelegend; \ No newline at end of file diff --git a/src/src/pages/monitoring/Monitoring.js b/src/src/pages/monitoring/Monitoring.js index 974e92d..6c76e58 100644 --- a/src/src/pages/monitoring/Monitoring.js +++ b/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], @@ -123,9 +127,14 @@ function Visualization() { const depth = val.values.find( (val) => val.type === "depth" ).value; + const climatology_depth = val.values.find( + (val) => val.type === "climatology_depth" + ).value; let color; - if (depth <0.2) { + if (depth ==0 && climatology_depth == 0) { + color = "gray"; + } else if (depth >= 0 && depth < 0.2) { color = "red"; } else if (depth > 0.2 && depth < 0.3) { color = "brown"; @@ -155,15 +164,13 @@ function Visualization() { }, [filter, waterpoints]); const popupData = (wp) => { if (wp.name === "Kitala") { - if (!filter.gray) { - return null; - } + return ( - +
- {/* El label que mencionas */} +
Apologies,
@@ -179,7 +186,10 @@ function Visualization() { const depthValue = monitoredData ? monitoredData.values.find((value) => value.type === "depth") : null; - + const climatology_depthValue = monitoredData + ? monitoredData.values.find((value) => value.type === "climatology_depth") + : null; + const hasContentsWp = monitoredData.am || monitoredData.or || monitoredData.en; @@ -187,11 +197,13 @@ function Visualization() { ? null : !filter.green && depthValue.value >= 0.7 ? null - : !filter.yellow && depthValue.value >= 0.3 && depthValue.value < 0.7 + : !filter.yellow && depthValue.value > 0.3 && depthValue.value < 0.7 ? null - : !filter.brown && depthValue.value >= 0.2 && depthValue.value < 0.3 + : !filter.brown && depthValue.value > 0.2 && depthValue.value < 0.3 ? null - : !filter.red && depthValue.value < 0.2 + : !filter.red && depthValue.value < 0.2 && depthValue.value >= 0 + ? null + : !filter.gray && depthValue.value === 0 && climatology_depthValue.value === 0 ? null : ( <> @@ -236,11 +248,13 @@ function Visualization() { = 0 && depthValue.value < 0.2 ? redIcon - : depthValue.value >= 0.2 && depthValue.value < 0.3 + : depthValue.value > 0.2 && depthValue.value < 0.3 ? brownIcon - : depthValue.value >= 0.3 && depthValue.value < 0.7 + : depthValue.value > 0.3 && depthValue.value < 0.7 ? yellowIcon : greenIcon } @@ -317,20 +331,24 @@ function Visualization() {
= 0 && depthValue.value < 0.2 ? "td-red" - : depthValue.value >= 0.2 && depthValue.value < 0.3 + : depthValue.value > 0.2 && depthValue.value < 0.3 ? "td-brown" - : depthValue.value >= 0.3 && depthValue.value < 0.7 + : depthValue.value > 0.3 && depthValue.value < 0.7 ? "td-yellow" : "td-green" }`} > - {depthValue.value < 0.2 + {depthValue.value == 0 && climatology_depthValue.value == 0 + ? t("monitoring.seasonally") + : depthValue.value >= 0 && depthValue.value < 0.2 ? t("monitoring.near") - : depthValue.value >= 0.2 && depthValue.value < 0.3 + : depthValue.value > 0.2 && depthValue.value < 0.3 ? t("monitoring.alert") - : depthValue.value >= 0.3 && depthValue.value < 0.7 + : depthValue.value > 0.3 && depthValue.value < 0.7 ? t("monitoring.watch") : t("monitoring.good")}
@@ -463,6 +481,7 @@ function Visualization() { } }); }; + console.log(wpstolabel) return ( <> @@ -540,7 +559,6 @@ function Visualization() { url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> {waterpoints && } - {route && ( ; } }; + console.log(wp) return ( <> {idWater ? ( @@ -321,9 +322,11 @@ function Waterprofile() { = 0 && wp.depth <0.2 ? redIcon - : wp.depth > 0.2 && wp.depth <0.3 + : wp.depth > 0.2 && wp.depth < 0.3 ? brownIcon : wp.depth > 0.3 && wp.depth < 0.7 ? yellowIcon diff --git a/src/src/pages/userprofile/Userprofile.js b/src/src/pages/userprofile/Userprofile.js index 6a84b7f..7ee086d 100644 --- a/src/src/pages/userprofile/Userprofile.js +++ b/src/src/pages/userprofile/Userprofile.js @@ -148,7 +148,6 @@ function Userprofile() { [event.target.name]: event.target.checked, }); }; - return ( <>
= 0 && waterpoint.last_monitored_deph < 0.2 ? "td-red" : waterpoint.last_monitored_deph > 0.2 && waterpoint.last_monitored_deph < 0.3 ? "td-brown"