bicc/SALW_control_in_Africa
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add info box

Browse Source
This commit is contained in:
louai98 2024-06-03 15:56:29 +02:00
parent 031e909645
commit 281720d10b
10 changed files with 1418 additions and 644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

438
src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js
View File

@ -5,6 +5,11 @@ import L, { control } from "leaflet";
import Africa from "../../../Data/ControlinAfrica.geojson";
import "../../../Styles/main.scss";
import { CountryStyle, CountrySelectedStyle } from "./countryStyles";
import MapInfoBox from "./MapInfoBox"; // Import the InfoBox component
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Icon1 from "../../../Icons/icon1.svg";
import Icon2 from "../../../Icons/icon2.svg";
@ -51,12 +56,112 @@ class ControlInAfricaMap extends React.Component {
selectedCountry: "",
openedTooltipLayer: null,
selectedCountriesFilter: [],
selectedCountriesNames: [],
selectedCountriesFeatures: [],
selectedCountryColor: "yellow",
selectedRegion: "",
prevStatues: "",
infoBox: [],
showInfoBox: false,
};
}
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_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,
},
];
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" },
{
name2: "InternationalTracingInstrument",
name: "International Tracing Instrument",
},
{
name2: "StG-PoA",
name: "Silencing the Guns in Africa Programme of Action",
},
];
componentDidMount() {
this.fetchAfricaCountries();
this.calculateZoomLevel();
@ -159,7 +264,7 @@ class ControlInAfricaMap extends React.Component {
onMouseClick = (e) => {
this.setState({
selectedCountriesFilter: [],
selectedCountriesNames: [],
selectedCountryColor: "yellow",
});
const countryName = e.target.feature.properties.name;
@ -173,134 +278,118 @@ class ControlInAfricaMap extends React.Component {
};
handleOrganizationClick = (name, status, color) => {
if (this.state.selectedRegion === name) {
const { selectedRegion, prevStatues, africaCountries } = this.state;
if (selectedRegion === name && prevStatues === status) {
this.setState({
selectedCountriesFilter: [],
selectedCountriesNames: [],
selectedCountryColor: "yellow",
selectedCountry: "",
selectedRegion: "",
prevStatues: "",
showInfoBox: false,
});
return;
}
this.setState({
selectedCountriesFilter: [],
let selectedCountriesNames = [];
let selectedCountriesFeatures = [];
africaCountries.forEach((feature) => {
if (
feature.properties[name] === 1 ||
feature.properties[name] === status
) {
selectedCountriesNames.push(feature.properties.name);
selectedCountriesFeatures.push(feature);
}
});
this.setState(
{
selectedCountriesNames,
selectedCountryColor: color,
selectedCountry: "",
selectedRegion: name,
prevStatues: status,
selectedCountriesFeatures,
},
);
if (this.regional_organisations.some(org => org.name === name)) {
this.setState({
showInfoBox: true,
},
this.regionalOrganisationStatistics
)
}
else{
this.setState({
showInfoBox: false,
})
}
};
regionalOrganisationStatistics = () => {
const { selectedCountriesFeatures } = this.state;
// Helper function to process treaties
const processTreaties = (treaties) => {
return treaties.map((org) => {
let countriesSigned = 0;
let countriesEligible = 0;
let countriesRatified = 0;
selectedCountriesFeatures.forEach((feature) => {
const status = feature.properties[org.name2];
if (status === "Signed") {
countriesSigned++;
} else if (status === "Eligible") {
countriesEligible++;
} else if (status === "Ratified") {
countriesRatified++;
}
});
// Regional Organisation + International Guidelines & Instruments + African Guidelines & Instrumentss
this.state.africaCountries.map((feature) => {
if (feature.properties[name] === 1) {
this.setState((prevState) => ({
selectedCountriesFilter: [
...prevState.selectedCountriesFilter,
feature.properties.name,
],
}));
}
return {
name: org.name,
signed: countriesSigned,
eligible: countriesEligible,
ratified: countriesRatified,
};
});
// Regional Treaties + International Treaties
this.state.africaCountries.map((feature) => {
if (feature.properties[name] === status) {
this.setState((prevState) => ({
selectedCountriesFilter: [
...prevState.selectedCountriesFilter,
feature.properties.name,
],
}));
}
};
const organisationsRegionalTreaties = processTreaties(
this.regional_treaties
);
const organisationsInternationalTreaties = processTreaties(
this.international_treaties
);
const organisationsInstruments = this.intsruments.map((instrument) => {
const countris = selectedCountriesFeatures.filter(
(feature) => feature.properties[instrument.name2] === 1
);
return {
name: instrument.name,
countries: countris.length,
};
});
return {
organisationsRegionalTreaties,
organisationsInternationalTreaties,
organisationsInstruments,
};
};
render() {
const findColorByName = (name) => {
const org = regional_organisations.find((org) => org.name === 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 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 {
africaCountries,
@ -308,8 +397,9 @@ class ControlInAfricaMap extends React.Component {
error,
countriesNames,
selectedCountry,
selectedCountriesFilter,
selectedCountriesNames,
selectedCountryColor,
selectedRegion,
} = this.state;
if (loading) {
@ -319,12 +409,17 @@ class ControlInAfricaMap extends React.Component {
return <div>Error: {error.message}</div>;
}
return (
<Stack direction="horizontal" className="map-filter-box" gap={0}>
<Container fluid>
<Row>
<Col sm={3}>
<div className={`filters-box`}>
<div>
<h5>African Countries</h5>
<select onChange={this.handleCountryChange} value={selectedCountry}>
<select
onChange={this.handleCountryChange}
value={selectedCountry}
>
<option value="">Select a country</option>
{countriesNames.map((country, index) => (
<option key={index} value={country}>
@ -337,7 +432,7 @@ class ControlInAfricaMap extends React.Component {
<div>
<h5>Regional Organisations</h5>
<div className="regional-organisations">
{regional_organisations.map((org, index) => (
{this.regional_organisations.map((org, index) => (
<div
key={org.name}
className="organization-item"
@ -356,7 +451,7 @@ class ControlInAfricaMap extends React.Component {
<div>
<h5>Regional Treaties</h5>
<div className="regional-treaties">
{regional_treaties.map((treaty) => (
{this.regional_treaties.map((treaty) => (
<div key={treaty.name} className="treaty-item">
<div className="treaty-item-name">{treaty.name}</div>
@ -368,7 +463,10 @@ class ControlInAfricaMap extends React.Component {
srcSet=""
className="icon"
onClick={() =>
this.handleOrganizationClick(treaty.name2, "Eligible")
this.handleOrganizationClick(
treaty.name2,
"Eligible"
)
}
/>
)}
@ -392,7 +490,10 @@ class ControlInAfricaMap extends React.Component {
srcSet=""
className="icon"
onClick={() =>
this.handleOrganizationClick(treaty.name2, "Ratified")
this.handleOrganizationClick(
treaty.name2,
"Ratified"
)
}
/>
)}
@ -403,7 +504,7 @@ class ControlInAfricaMap extends React.Component {
</div>
<div>
<h5>International Treaties</h5>
{international_treaties.map((treaty) => (
{this.international_treaties.map((treaty) => (
<div key={treaty.name} className="treaty-item">
<div className="treaty-item-name">{treaty.name}</div>
@ -474,7 +575,9 @@ class ControlInAfricaMap extends React.Component {
alt=""
className="icon-2"
onClick={() =>
this.handleOrganizationClick("InternationalTracingInstrument")
this.handleOrganizationClick(
"InternationalTracingInstrument"
)
}
/>
</div>
@ -495,7 +598,8 @@ class ControlInAfricaMap extends React.Component {
</div>
</div>
</div>
</Col>
<Col sm={9}>
<div id="map" className="map-container">
<MapContainer
center={this.state.center}
@ -513,7 +617,7 @@ class ControlInAfricaMap extends React.Component {
id="africa-map"
style={(feature) =>
feature.properties.name === selectedCountry ||
selectedCountriesFilter.find(
selectedCountriesNames.find(
(item) => item === feature.properties.name
)
? CountrySelectedStyle(selectedCountryColor)
@ -530,7 +634,10 @@ class ControlInAfricaMap extends React.Component {
return (
<Marker
key={feature.properties.name}
position={[feature.properties.y, feature.properties.x]}
position={[
feature.properties.y,
feature.properties.x,
]}
>
<Tooltip
direction="bottom"
@ -541,7 +648,7 @@ class ControlInAfricaMap extends React.Component {
>
<h5>{feature.properties.name}</h5>
<div className="matrix">
{regional_organisations.map((org) => (
{this.regional_organisations.map((org) => (
<div
key={org.name}
className="rectangle"
@ -559,74 +666,49 @@ class ControlInAfricaMap extends React.Component {
))}
</div>
<div className="matrix-treaties-map">
{regional_treaties.map((org) => (
{this.regional_treaties.map((org) => (
<div key={org.name2}>
{(feature.properties[org.name2] ===
"Eligible" && (
<img
title={org.name}
src={org.icon_eligible}
src={
org[
"icon_" +
feature.properties[
org.name2
].toLowerCase()
]
}
alt=""
srcSet=""
srcSet="No Image"
className="img-fluid"
/>
)) ||
(feature.properties[org.name2] === "Signed" && (
<img
title={org.name}
src={org.icon_signed}
alt=""
srcSet=""
/>
)) ||
(feature.properties[org.name2] ===
"Ratified" && (
<img
title={org.name}
src={org.icon_ratified}
alt=""
srcSet=""
/>
))}
</div>
))}
</div>
<div className="matrix-treaties-map">
{international_treaties.map((org) => (
{this.international_treaties.map((org) => (
<div key={org.name2}>
{(feature.properties[org.name2] ===
"Eligible" && (
<img
title={org.name}
src={org.icon_eligible}
src={
org[
"icon_" +
feature.properties[
org.name2
].toLowerCase()
]
}
alt=""
srcSet=""
srcSet="No Image"
className="img-fluid"
/>
)) ||
(feature.properties[org.name2] === "Signed" && (
<img
title={org.name}
src={org.icon_signed}
alt=""
srcSet=""
/>
)) ||
(feature.properties[org.name2] ===
"Ratified" && (
<img
title={org.name}
src={org.icon_ratified}
alt=""
srcSet=""
/>
))}
</div>
))}
</div>
<div className="matrix-treaties-map">
<div>
{feature.properties.UNProgrammeofAction === 1 && (
<img src={Icon20} alt="" srcSet="" />
)}
{feature.properties.UNProgrammeofAction ===
1 && <img src={Icon20} alt="" srcSet="" />}
</div>
<div>
{feature.properties
@ -651,9 +733,19 @@ class ControlInAfricaMap extends React.Component {
<button onClick={this.zoomOut}>-</button>
<button onClick={this.resetMap}>*</button>
</div>
{this.state.showInfoBox && (
<MapInfoBox
className="info-box"
selectedCountryColor={selectedCountryColor}
selectedRegion={selectedRegion}
info={this.regionalOrganisationStatistics()}
></MapInfoBox>
)}
</MapContainer>
</div>
</Stack>
</Col>
</Row>
</Container>
);
}
}

161
src/Components/Layout/ControlInAfrica/DetailsSection.jsx
View File

@ -1,4 +1,5 @@
import React, { useState, useEffect } from "react";
import Stack from "react-bootstrap/Stack";
import Card_ from "../../UI/Card_/Card_";
import { useAfricaData } from "../../../Context/DataContext";
@ -117,12 +118,12 @@ const international_guidelines = [
{
name: "UN Programme of Action",
name2: "UNProgrammeofAction",
icon_eligible: Icon15,
icon_eligible: Icon20,
},
{
name: "International Tracing Instrument",
name2: "InternationalTracingInstrument",
icon_eligible: Icon15,
icon_eligible: Icon16,
},
];
@ -130,7 +131,7 @@ const african_guidelines = [
{
name: "Silencing the Guns in Africa Programme of Action",
name2: "StG-PoA",
icon_eligible: Icon15,
icon_eligible: Icon1,
},
];
@ -151,7 +152,7 @@ const DetailesSection = (props) => {
);
useEffect(() => {
if (data && countryID != null) {
if (data && countryID !== null) {
const foundCountry = data.features.find(
(item) => item.properties.id === countryID
);
@ -162,16 +163,42 @@ const DetailesSection = (props) => {
);
setSelectedRegionalOrganisations(regionalOrgs);
const regionalTreats = regional_treaties.filter(
(item) => foundCountry.properties[item.name2] != "0"
const regionalTreats = regional_treaties
.filter((item) => foundCountry.properties[item.name2] !== "0")
.map((item) => {
return {
...item,
state: foundCountry.properties[item.name2],
};
});
const internationalTreats = international_treaties
.filter((item) => foundCountry.properties[item.name2] !== "0")
.map((item) => {
return {
...item,
state: foundCountry.properties[item.name2],
};
});
const internationalGuidelines = international_guidelines.filter(
(item) => foundCountry.properties[item.name2] === 1
);
const africanGuidelines = african_guidelines.filter(
(item) => foundCountry.properties[item.name2] === 1
);
setSelectedRegionalTreaties(regionalTreats);
setSelectedInternationalTreaties(internationalTreats);
setSelectedInternationalGuidelines(internationalGuidelines);
setSelectedAfricanGuidelines(africanGuidelines);
}
}, [data, countryID]);
useEffect(() => {
console.log(selectedRegionalTreaties);
}, [selectedRegionalTreaties]);
// useEffect(() => {
// console.log(selectedAfricanGuidelines)
// }, [selectedAfricanGuidelines]);
if (isLoading) {
return <div>Loading...</div>;
@ -186,7 +213,7 @@ const DetailesSection = (props) => {
<div>
<h2>{selectedCountry.properties.name}</h2>
<p>
Regional Organisations:{" "}
<strong>Regional Organisations: </strong>
{selectedRegionalOrganisations.map((item) => {
return (
<span
@ -198,20 +225,114 @@ const DetailesSection = (props) => {
);
})}
</p>
<p>Regional Treaties:
<table className="table-sm table-bordered">
<tr>
<td>
<strong>Regional Treaties: </strong>
</td>
<td>
<table className="table">
{selectedRegionalTreaties.map((item) => {
return (
<span
key={item.name}
>
{item.name}
</span>
<tr key={item.name}>
<td>{item.name}</td>
<td>{item.state}</td>
<td>
<img
title={item.name}
src={item["icon_" + item.state.toLowerCase()]}
alt=""
srcSet="No Image"
className="section-icon"
/>
</td>
</tr>
);
})}
</p>
<p>International Treaties: </p>
<p>International Guidelines & Instruments: </p>
<p>African Guidelines & Instrumentss: </p>
</table>
</td>
</tr>
<tr>
<td>
<strong>International Treaties: </strong>
</td>
<td>
<table className="table">
{selectedInternationalTreaties.map((item) => {
return (
<tr key={item.name}>
<td>{item.name}</td>
<td>{item.state}</td>
<td>
<img
title={item.name}
src={item["icon_" + item.state.toLowerCase()]}
alt=""
srcSet="No Image"
className="section-icon"
/>
</td>
</tr>
);
})}
</table>
</td>
</tr>
<tr>
<td>
<strong>International Guidelines & Instruments: </strong>
</td>
<td>
<table className="table">
{selectedInternationalGuidelines.map((item) => {
return (
<tr key={item.name}>
<td>
<span>{item.name}</span>
</td>
<td>
<img
title={item.name}
src={item["icon_eligible"]}
alt=""
srcSet="No Image"
className="section-icon"
/>
</td>
</tr>
);
})}
</table>
</td>
</tr>
<tr>
<td>
<strong>African Guidelines & Instrumentss: </strong>
</td>
<td>
<table className="table">
{selectedAfricanGuidelines.map((item) => {
return (
<tr key={item.name}>
<td>
<span>{item.name}</span>
</td>
<td>
<img
title={item.name}
src={item["icon_eligible"]}
alt=""
srcSet="No Image"
className="section-icon"
/>
</td>
</tr>
);
})}
</table>
</td>
</tr>
</table>
</div>
)}
</Card_>

179
src/Components/Layout/ControlInAfrica/MapInfoBox.jsx Normal file
View File

@ -0,0 +1,179 @@
import React from "react";
const MapInfoBox = (props) => {
const regional_treaties = props.info.organisationsRegionalTreaties;
const international_treaties = props.info.organisationsInternationalTreaties;
const instruments = props.info.organisationsInstruments;
console.log(regional_treaties);
return (
<div className={props.className}>
<h3>{props.selectedRegion}</h3>
<p>Number of countries</p>
<div className="table-responsive-sm">
<table className="table table-sm table-striped">
<tr>
<th className="text-center" scope="col"></th>
<th className="text-center" scope="col">
Signed
</th>
<th className="text-center" scope="col">
Eligible
</th>
<th className="text-center" scope="col">
Ratified
</th>
</tr>
<tbody>
{regional_treaties &&
regional_treaties.map((item, index) => {
return (
<tr key={index}>
<th scope="row">{item.name}</th>
<td
className="text-center"
style={
item.signed
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.signed}
</td>
<td
className="text-center"
style={
item.eligible
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.eligible}
</td>
<td
className="text-center"
style={
item.ratified
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.ratified}
</td>
</tr>
);
})}
{international_treaties &&
international_treaties.map((item, index) => {
return (
<tr key={index}>
<th scope="row">{item.name}</th>
<td
className="text-center"
style={
item.signed
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.signed}
</td>
<td
className="text-center"
style={
item.eligible
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.eligible}
</td>
<td
className="text-center"
style={
item.ratified
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.ratified}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
{instruments &&
instruments.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>
);
})}
</div>
);
};
export default MapInfoBox;
//{regional_treaties &&
// regional_treaties.map((item, index) => {
// return (
// <div key={index}>
// <p>
// <strong>{item.name}</strong> Signed: {item.signed}, Eligible:{" "}
// {item.eligible}, Ratified: {item.ratified}
// </p>
// </div>
// );
// })}
// {international_treaties &&
// international_treaties.map((item, index) => {
// return (
// <div key={index}>
// <p>
// <strong>{item.name}</strong> Signed: {item.signed}, Eligible:{" "}
// {item.eligible}, Ratified: {item.ratified}
// </p>
// </div>
// );
// })}

629
src/Data/ControlinAfrica.geojson
View File

File diff suppressed because it is too large Load Diff

1
src/Styles/Layout/_filters.scss
View File

@ -1,5 +1,6 @@
.filters-box {
padding: $gap;
border: 1px solid $border-color;
}
// _organizations

4
src/Styles/Layout/_info_section.scss Normal file
View File

@ -0,0 +1,4 @@
.section-icon{
width: $icon-size-large;
}

4
src/Styles/Layout/_map.scss
View File

@ -1,5 +1,5 @@
.map-filter-box {
border: 1px solid $border-color;
// border: 1px solid $border-color;
}
.leaflet-container {
@ -7,7 +7,9 @@
}
.map-container {
border: 1px solid $border-color;
width: 100%;
height: 100vh;
margin-top: 0px;
}

12
src/Styles/Layout/_map_info_box.scss Normal file
View File

@ -0,0 +1,12 @@
.info-box {
position: absolute;
bottom: 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;
//width: 250px;
}

2
src/Styles/main.scss
View File

@ -13,6 +13,8 @@
@import 'Layout/map';
@import 'Layout/tooltips';
@import 'Layout/map_pssm';
@import 'Layout/info_section';
@import 'Layout/_map_info_box';
// Import other layout partials...
// Components

82
src/tmp/code.txt Normal file
View File

@ -0,0 +1,82 @@
{(feature.properties[org.name2] === "Eligible" && (
<img title="{org.name}" src="{org.icon_eligible}" alt="" srcset="" />
)) || (feature.properties[org.name2] === "Signed" && (
<img title="{org.name}" src="{org.icon_signed}" alt="" srcset="" />
)) || (feature.properties[org.name2] === "Ratified" && (
<img title="{org.name}" src="{org.icon_ratified}" alt="" srcset="" />
))}
{(feature.properties[org.name2] ===
"Eligible" && (
<img
title={org.name}
src={org.icon_eligible}
alt=""
srcSet=""
/>
)) ||
(feature.properties[org.name2] === "Signed" && (
<img
title={org.name}
src={org.icon_signed}
alt=""
srcSet=""
/>
)) ||
(feature.properties[org.name2] ===
"Ratified" && (
<img
title={org.name}
src={org.icon_ratified}
alt=""
srcSet=""
/>
))}
<Stack gap="4" direction="horizontal" className="">
<strong>Regional Treaties: </strong>
<table className="table">
{selectedRegionalTreaties.map((item) => {
return (
<tr key={item.name}>
<td>{item.name}</td>
<td>{item.state}</td>
<td>
<img
title={item.name}
src={item["icon_" + item.state.toLowerCase()]}
alt=""
srcSet="No Image"
className="section_icon"
/>
</td>
</tr>
);
})}
</table>
</Stack>
<Stack gap="4" direction="horizontal" className="">
<strong>International Treaties: </strong>
<table className="table table-border">
{selectedInternationalTreaties.map((item) => {
return (
<tr key={item.name}>
<td>{item.name}</td>
<td>{item.state}</td>
<td>
<img
title={item.name}
src={item["icon_" + item.state.toLowerCase()]}
alt=""
srcSet="No Image"
className="section_icon"
/>
</td>
</tr>
);
})}
</table>
</Stack>