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

PSSM Map

Browse Source
This commit is contained in:
louai98 2024-05-16 15:26:01 +02:00
parent 2305ddeec0
commit e49491ea32
23 changed files with 34803 additions and 11293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

294
src/Components/Layout/AfricaMap/AfricaMap-V1.js
View File

@ -1,294 +0,0 @@
import React, { createRef, usePrevious } from "react";
import { MapContainer, GeoJSON } from "react-leaflet";
import L from "leaflet";
import Africa from "../../../Data/TestAfrica.geojson";
import "./AfricaMap.css";
import "./ZoomControl.css";
import {
CountryStyle,
CountrySelectedStyle,
CountryHighlightStyle,
} from "./countryStyles";
class AfricaMap extends React.Component {
constructor(props) {
super(props);
this.mapRef = createRef(); // Create a ref to store the MapContainer instance
this.geoJsonLayerRef = createRef(); // Create a ref to store the GeoJSON layer instance
this.state = {
center: [3, 15],
zoom: 4,
africaCountries: null,
loading: true,
error: null,
selectedCountryName: null,
previousSelectedCountry: null,
selectedFeature: null,
previousFeature: null,
scrollWheelZoom: false,
selectedFilterCountry: null,
};
}
componentDidUpdate(prevProps, prevState) {
// Check if selectedFeature has changed
if (this.state.selectedFeature !== prevState.selectedFeature) {
// Update previousFeature with the previous value of selectedFeature
this.setState({ previousFeature: prevState.selectedFeature });
}
// Check if selectedFilterCountry has changed
if (this.props.selectedFilterCountry !== prevProps.selectedFilterCountry) {
const selectedCountryName = this.props.selectedFilterCountry.value;
// Check if a country is selected
if (selectedCountryName) {
// Get the Leaflet map instance from the mapRef
const map = this.mapRef.current;
console.log("map:", map);
map.eachLayer((layer) => {
if(layer.feature && layer.feature.properties.name === selectedCountryName) {
console.log("layer:", layer.feature.properties.name);
layer.setStyle(CountrySelectedStyle);
}
})
const layers = this.geoJsonLayerRef.current.getLayers();
let selectedFeature = null;
layers.forEach((layer) => {
if (layer.feature.properties.name === selectedCountryName) {
selectedFeature = layer;
}
});
if (selectedFeature) {
// Update state to reflect the selected country and feature
this.setState(
{
selectedCountryName: selectedCountryName,
selectedFeature: selectedFeature,
},
() => {
console.log(
"Setting style for selected country:",
selectedCountryName,
selectedFeature
);
selectedFeature.setStyle(CountrySelectedStyle);
}
);
}
} else {
console.log("No country selected");
// Reset style for the previously selected country
if (prevState.selectedFeature) {
prevState.selectedFeature.setStyle(
CountryStyle(prevState.selectedFeature)
);
}
// Update state to reflect no selected country
this.setState({
selectedCountryName: null,
selectedFeature: null,
});
}
}
}
componentDidMount() {
this.fetchAfricaCountries();
this.calculateZoomLevel();
window.addEventListener("resize", this.calculateZoomLevel);
}
componentWillUnmount() {
window.removeEventListener("resize", this.calculateZoomLevel);
}
fetchAfricaCountries = async () => {
try {
const response = await fetch(Africa);
const data = await response.json();
this.setState(
{
africaCountries: data.features,
loading: false,
},
() => {}
);
} catch (error) {
this.setState({
error: error,
loading: false,
});
}
};
calculateZoomLevel = () => {
const screenWidth = window.innerWidth;
if (screenWidth <= 768) {
this.setState({ zoom: 3 });
} else if (screenWidth <= 1024) {
this.setState({ zoom: 4 });
} else {
this.setState({ zoom: 4 });
}
};
onEachFeature = (feature, layer) => {
// Bind event to layer
layer.on({
mouseover: this.onMouseOver,
mouseout: this.onMouseOut,
click: this.onMouseClick,
});
};
onMouseOver = (e) => {
e.target.setStyle(CountryHighlightStyle());
};
onMouseOut = (e) => {
// Check if a country is selected
if (
this.state.selectedCountryName === null ||
this.state.selectedCountryName !== e.target.feature.properties.name
) {
// Reset style only if no country is selected or the selected country is not the one triggering the mouseout
e.target.bringToBack();
e.target.setStyle(CountryStyle());
}
};
onMouseClick = (e) => {
const countryName = e.target.feature.properties.name;
const popupContent = `<h5>Selected: ${countryName}</h5>`;
if (this.state.selectedCountryName === null) {
this.setState(
{
previousSelectedCountry: this.state.selectedCountryName,
selectedCountryName: countryName,
previousFeature: this.state.selectedFeature,
selectedFeature: e.target,
},
() => {
setTimeout(() => {
console.log(e.target);
e.target.setStyle(CountrySelectedStyle());
e.target
.bindTooltip(popupContent, {
permanent: true,
direction: "top",
className: "tooltip-custom",
})
.openTooltip();
}, 10);
}
);
} else if (this.state.selectedCountryName === countryName) {
this.setState(
{
selectedCountryName: null,
selectedFeature: null,
},
() => {
setTimeout(() => {
e.target.setStyle(CountryStyle());
e.target.unbindTooltip();
}, 10);
}
);
} else {
this.setState(
{
previousSelectedCountry: this.state.selectedCountryName,
selectedCountryName: countryName,
previousFeature: this.state.selectedFeature,
selectedFeature: e.target,
},
() => {
setTimeout(() => {
if (this.state.previousFeature) {
this.state.previousFeature.setStyle(CountryStyle());
this.state.previousFeature.unbindTooltip();
e.target
.bindTooltip(popupContent, {
permanent: true,
direction: "top",
className: "tooltip-custom",
})
.openTooltip();
}
e.target.setStyle(CountrySelectedStyle());
}, 10);
}
);
}
};
resetMap = () => {
if (this.mapRef.current) {
this.mapRef.current.setView(this.state.center, this.state.zoom); // Set the center and zoom to initial values
}
};
zoomIn = () => {
if (this.mapRef.current) {
this.mapRef.current.setZoom(this.mapRef.current.getZoom() + 1);
}
};
zoomOut = () => {
if (this.mapRef.current) {
this.mapRef.current.setZoom(this.mapRef.current.getZoom() - 1);
}
};
render() {
const { africaCountries, loading, error } = this.state;
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<>
<div id="map" className="map-container">
<MapContainer
center={this.state.center}
zoom={this.state.zoom}
ref={this.mapRef}
zoomControl={false}
style={{ width: "100%", height: "100%" }}
scrollWheelZoom={this.state.scrollWheelZoom}
>
{africaCountries && (
<>
<GeoJSON
ref={this.geoJsonLayerRef}
onEachFeature={this.onEachFeature}
id="africa-map"
style={(feature) => CountryStyle(feature)}
key="africa-map"
data={africaCountries}
/>
</>
)}
<div className="custom-zoom-control">
<button onClick={this.zoomIn}>+</button>
<button onClick={this.zoomOut}>-</button>
<button onClick={this.resetMap}>*</button>
</div>
</MapContainer>
</div>
</>
);
}
}
export default AfricaMap;

136
src/Components/Layout/AfricaMap/AfricaMap-V2.js
View File

@ -1,136 +0,0 @@
import React, { useState, useEffect } from "react";
import { MapContainer, TileLayer, GeoJSON, ZoomControl } from "react-leaflet";
import africaGeoJSON from "../../../Data/TestAfrica.geojson";
import Classes from "./AfricaMap.module.css";
import "./AfricaMap.css";
import "./ZoomControl.css";
import {
CountryStyle,
CountrySelectedStyle,
CountryHighlightStyle,
} from "./countryStyles";
const AfricaMap = () => {
const [selectedCountry, setSelectedCountry] = useState(null);
const [africaCountries, setAfricaCountries] = useState([]);
const [loading, setLoading] = useState(true);
const [center, setCenter] = useState([3, 15]);
const [zoom, setZoom] = useState(4);
const [selectedCountryName, setSelectedCountryName] = useState(null);
const [previousSelectedCountry, setPreviousSelectedCountry] = useState(null);
const [selectedFeature, setSelectedFeature] = useState(null);
const [previousFeature, setPreviousFeature] = useState(null);
useEffect(() => {
const fetchAfricaCountries = async () => {
try {
const response = await fetch(africaGeoJSON);
const data = await response.json();
setAfricaCountries(data.features);
setLoading(false);
} catch (e) {
console.log(e);
setLoading(false);
}
};
fetchAfricaCountries();
}, []);
useEffect(() => {
const screenWidth = window.innerWidth;
if (screenWidth <= 768) {
setZoom(3);
} else if (screenWidth <= 1024) {
setZoom(4);
} else {
setZoom(4);
}
}, []);
const highlightFeature = (e) => {
setSelectedCountry(e.target.feature.properties.name);
};
const resetHighlight = () => {
setSelectedCountry(null);
};
const onMouseClick = (e) => {
const countryName = e.target.feature.properties.name;
const popupContent = `<h5>Selected: ${countryName}</h5>`;
console.log("selectedCountryName:", selectedCountryName);
if (selectedCountryName === null || selectedCountryName !== countryName) {
setSelectedCountryName(countryName);
//setSelectedFeature(e.target);
//setPreviousFeature(selectedFeature);
//setPreviousSelectedCountry(selectedCountryName);
setTimeout(() => {
e.target.setStyle(CountrySelectedStyle());
e.target
.bindTooltip(popupContent, {
permanent: true,
direction: "top",
className: "tooltip-custom",
})
.openTooltip();
}, 10);
} else {
setSelectedCountryName(null);
setSelectedFeature(null);
setTimeout(() => {
e.target.setStyle(CountryStyle());
e.target.unbindTooltip();
}, 10);
}
};
return (
<div id="map" className={Classes["map-container"]}>
<div className={Classes["map-controls"]}>
<select
value={selectedCountry}
onChange={(e) => setSelectedCountry(e.target.value)}
>
<option value="">Select a country</option>
{africaCountries.map((feature, index) => (
<option key={index} value={feature.properties.name}>
{feature.properties.name}
</option>
))}
</select>
</div>
{loading ? (
<p>Loading...</p>
) : (
<MapContainer
center={center}
zoom={zoom}
zoomSnap={0.25}
zoomDelta={0.5}
zoomControl={false} // Disable default zoom control
style={{ width: "100%", height: "100%" }}
>
{/* <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> */}
<GeoJSON
data={africaCountries}
style={(feature) => CountryStyle(feature)}
onEachFeature={(feature, layer) => {
layer.on({
//mouseover: highlightFeature,
//mouseout: resetHighlight,
click: onMouseClick,
});
}}
/>
<ZoomControl position="topright"></ZoomControl>
</MapContainer>
)}
</div>
);
};
export default AfricaMap;

112
src/Components/Layout/AfricaMap/AfricaMap.css
View File

@ -1,112 +0,0 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.map-filter-box{
border: 1px solid #acabab;
}
.leaflet-container {
/* height: 100vh; */
background-color: white;
}
.map-container {
width: 100%; /* Set width to fill the available space */
height: 100vh; /* Set height to fill the viewport height */
/* border: solid 1px #333; */
}
.matrix {
display: grid;
grid-template-columns: repeat(4, 20px); /* Adjust width of each rectangle as needed */
grid-template-rows: repeat(3, 20px); /* Adjust height of each rectangle as needed */
gap: 3px; /* Adjust gap between rectangles as needed */
}
.rectangle {
background-color: #ffffff; /* Adjust rectangle color as needed */
border: 1px solid #000; /* Adjust border color and thickness as needed */
display: flex;
justify-content: center;
align-items: center;
font-size: 20px; /* Adjust font size as needed */
}
.matrix-treaties-map {
display: grid;
grid-template-columns: repeat(3, 20px); /* Adjust width of each rectangle as needed */
grid-template-rows: repeat(2, 20px); /* Adjust height of each rectangle as needed */
gap: 3px; /* Adjust gap between rectangles as needed */
}
.filters-box{
/* border: 1px solid #333333; */
padding: 3px;
}
.regional-organisations {
display: grid;
grid-template-columns: repeat(3, 30%); /* Adjust width of each rectangle */
grid-template-rows: repeat(2, 25%); /* Adjust height of each rectangle */
gap: 3px; /* Adjust gap between rectangles */
}
.organization-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px;
}
.organization-item:hover {
opacity: 0.8;
}
.name {
font-size: 12px;
}
.treaty-item {
display: grid;
grid-template-columns: repeat(4, 25%);
margin-bottom: 15px;
}
.treaty-item-name {
font-size: 12px;
}
.icon{
width: 50px;
height: 50px;
cursor: pointer;
}
.icon-2{
width: 35px;
height: 35px;
cursor: pointer;
}
.treaty-item-2 {
display: grid;
grid-template-columns: repeat(2, 75%);
margin-bottom: 15px;
}
.tooltip-custom {
position: absolute;
z-index: 1000; /* Ensure tooltip appears above map layers */
pointer-events: auto; /* Enable click events on the tooltip */
}

16
src/Components/Layout/AfricaMap/AfricaMap.module.css
View File

@ -1,16 +0,0 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.leaflet-container {
/* height: 100vh; */
background-color: white;
}
.map-container {
width: 100%; /* Set width to fill the available space */
height: 100vh; /* Set height to fill the viewport height */
border: solid 1px black;
}

38
src/Components/Layout/AfricaMap/ZoomControl.css
View File

@ -1,38 +0,0 @@
/* Styles for custom zoom control buttons */
.custom-zoom-control {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
}
.custom-zoom-control button {
background-color: #fff;
border: 2px solid #bbb;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
color: #333;
cursor: pointer;
display: block;
font-size: 18px;
line-height: 18px;
margin-bottom: 5px;
outline: none;
padding: 5px;
text-align: center;
text-decoration: none;
transition: background-color 0.2s ease;
width: 30px;
}
.custom-zoom-control button:hover {
background-color: #f4f4f4;
}
.custom-zoom-control button:active {
background-color: #e6e6e6;
}
.custom-zoom-control button:first-child {
margin-bottom: 0;
}

35
src/Components/Layout/AfricaMap/eventHandlers.js
View File

@ -1,35 +0,0 @@
export const onEachFeature = (feature, layer, context) => {
const countryName = feature.properties.SOVEREIGNT;
layer.bindPopup(`<h5>${countryName}</h5>`);
layer.on({
mouseover: (event) => {
event.target.bringToFront();
event.target.setStyle(context.countryHighlightStyle());
},
mouseout: (event) => {
if (
context.state.selectedCountry === null ||
context.state.selectedCountry !== countryName
) {
event.target.bringToBack();
event.target.setStyle(context.countryStyle());
}
},
click: (event) => {
const popupContent = `<h5>Clicked: ${countryName}</h5>`;
context.setState(
{
selectedCountry: countryName,
},
() => {
setTimeout(() => {
event.target.setStyle(context.countrySelectedStyle());
}, 10);
}
);
event.target.bindPopup(popupContent).openPopup();
},
});
};

13
src/Components/Layout/AfricaMap/fetchMap.js
View File

@ -1,13 +0,0 @@
import Africa from "../../../Data/Africa.geojson";
const fetchAfricaCountries = async () => {
try {
const response = await fetch(Africa);
const data = await response.json();
return { loading: false, error: null, africaCountries: data.features };
} catch (error) {
return { loading: false, error: error, africaCountries: null };
}
};
export default fetchAfricaCountries;

17
src/Components/Layout/AfricaMap/helpers.js
View File

@ -1,17 +0,0 @@
export const resetMap = (context) => {
if (context.mapRef.current) {
context.mapRef.current.setView(context.state.center, context.state.zoom);
}
};
export const zoomIn = (context) => {
if (context.mapRef.current) {
context.mapRef.current.setZoom(context.map.current.getZoom() + 1);
}
};
export const zoomOut = (context) => {
if (context.mapRef.current) {
context.mapRef.current.setZoom(context.mapRef.current.getZoom() - 1);
}
};

89
src/Components/Layout/AfricaMap/tmp.js
View File

@ -1,89 +0,0 @@
import React, { useState, useEffect } from "react";
import { MapContainer, GeoJSON, useMap, TileLayer } from "react-leaflet";
import Africa from "../../../Data/Africa.geojson";
import "./AfricaMap.css";
const countryStyle = {
color: "black",
weight: 1,
opacity: 1,
fillColor: "orange",
fillOpacity: 0.3,
};
const countryHighlightStyle = {
fillColor: "yellow",
color: "orange",
fillOpacity: 0.5,
};
const countrySelectedStyle = {
fillColor: "yellow",
color: "orange",
fillOpacity: 0.5,
};
const AfricaMap = () => {
const [africa, setAfrica] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [selectedCountry, setSelectedCountry] = useState(null);
useEffect(() => {
const feachtAfricaData = async () => {
try {
const response = await fetch(Africa);
const data = await response.json();
setAfrica(data);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
};
feachtAfricaData();
}, []);
const onEachCountry = (feature, layer) => {
const countryName = feature.properties.SOVEREIGNT;
const popupContent = `<h5>${countryName}</h5>`;
layer.bindPopup(popupContent);
layer.on({
click: (event) => {
// Set the state of the selected country
setSelectedCountry(event.target.feature.properties.SOVEREIGNT);
// Log the clicked country to the console
console.log(selectedCountry);
console.log(event.target);
// Set the style of the clicked country
event.target.setStyle(countrySelectedStyle);
event.target.bringToFront();
//layer.openPopup();
},
mouseover: (event) => {
//layer.openPopup();
},
});
};
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div id="map">
<MapContainer center={[3, 15]} zoom={4}>
<GeoJSON
style={countryStyle}
key="africa-map"
data={africa}
onEachFeature={onEachCountry}
></GeoJSON>
</MapContainer>
</div>
);
};
export default AfricaMap;

6
src/Components/Layout/AfricaMap/AfricaMap.js → src/Components/Layout/ControlInAfrica/ControlInAfrica.js
View File

@ -2,7 +2,7 @@ import React, { createRef } from "react";
import Stack from "react-bootstrap/Stack"; import Stack from "react-bootstrap/Stack";
import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet"; import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet";
import L, { control } from "leaflet"; import L, { control } from "leaflet";
import Africa from "../../../Data/TestAfrica.geojson"; import Africa from "../../../Data/ControlinAfrica.geojson";
import "../../../Styles/main.scss"; import "../../../Styles/main.scss";
import { CountryStyle, CountrySelectedStyle } from "./countryStyles"; import { CountryStyle, CountrySelectedStyle } from "./countryStyles";
@ -33,7 +33,7 @@ import Icon24 from "../../../Icons/icon24.svg";
import Icon25 from "../../../Icons/icon25.svg"; import Icon25 from "../../../Icons/icon25.svg";
import Icon26 from "../../../Icons/icon26.svg"; import Icon26 from "../../../Icons/icon26.svg";
class AfricaMap extends React.Component { class ControlInAfrica extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -656,4 +656,4 @@ class AfricaMap extends React.Component {
} }
} }
export default AfricaMap; export default ControlInAfrica;

0
src/Components/Layout/AfricaMap/Title.js → src/Components/Layout/ControlInAfrica/Title.js
View File

0
src/Components/Layout/AfricaMap/countryStyles.js → src/Components/Layout/ControlInAfrica/countryStyles.js
View File

9
src/Components/Layout/NavBarSalw/NavBarSalw.js
View File

@ -7,7 +7,8 @@ import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown"; import NavDropdown from "react-bootstrap/NavDropdown";
import Home from "../../Pages/Home"; import Home from "../../Pages/Home";
import About from "../../Pages/About"; import About from "../../Pages/About";
import Treaties from "../../Pages/Treaties"; import ControlInAfrica from "../../Pages/ControlInAfrica";
import PSSM from "../../Pages/PSSM";
const NavBarSalw = () => { const NavBarSalw = () => {
return ( return (
@ -20,7 +21,8 @@ const NavBarSalw = () => {
<Navbar.Collapse id="basic-navbar-nav"> <Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto"> <Nav className="me-auto">
<Nav.Link href="home">Home</Nav.Link> <Nav.Link href="home">Home</Nav.Link>
<Nav.Link href="treaties">Treaties</Nav.Link> <Nav.Link href="ControlInAfrica">SALW Control in Africa</Nav.Link>
<Nav.Link href="pssm">PSSM</Nav.Link>
<Nav.Link href="about">About</Nav.Link> <Nav.Link href="about">About</Nav.Link>
</Nav> </Nav>
</Navbar.Collapse> </Navbar.Collapse>
@ -29,7 +31,8 @@ const NavBarSalw = () => {
<Routes> <Routes>
<Route path="/home" element={<Home />} /> <Route path="/home" element={<Home />} />
<Route path="/treaties" element={<Treaties />} /> <Route path="/ControlInAfrica" element={<ControlInAfrica />} />
<Route path="/pssm" element={<PSSM />} />
<Route path="/about" element={<About />} /> <Route path="/about" element={<About />} />
</Routes> </Routes>
</Router> </Router>

36
src/Components/Layout/PSSM/Blurb.js Normal file
View File

@ -0,0 +1,36 @@
import React from "react";
const Blurb = () => {
return (
<>
<div className="responsive-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis
scelerisque fermentum dui faucibus in ornare quam viverra orci. Purus
faucibus ornare suspendisse sed nisi lacus. Molestie ac feugiat sed
lectus vestibulum mattis ullamcorper. Id aliquet risus feugiat in ante
metus. Fermentum posuere urna nec tincidunt praesent semper feugiat
nibh. Tortor dignissim convallis aenean et tortor at risus. Sagittis
nisl rhoncus mattis rhoncus urna neque viverra justo. Vestibulum sed
arcu non odio euismod lacinia at quis.
</p>
</div>
<div className="responsive-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis
scelerisque fermentum dui faucibus in ornare quam viverra orci. Purus
faucibus ornare suspendisse sed nisi lacus. Molestie ac feugiat sed
lectus vestibulum mattis ullamcorper. Id aliquet risus feugiat in ante
metus. Fermentum posuere urna nec tincidunt praesent semper feugiat
nibh. Tortor dignissim convallis aenean et tortor at risus. Sagittis
nisl rhoncus mattis rhoncus urna neque viverra justo. Vestibulum sed
arcu non odio euismod lacinia at quis.
</p>
</div>
</>
);
};
export default Blurb;

101
src/Components/Layout/PSSM/PSSM.jsx Normal file
View File

@ -0,0 +1,101 @@
import React from "react";
import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet";
import L, { control } from "leaflet";
import Africa from "../../../Data/PSSM.geojson";
import "../../../Styles/main.scss";
import {
CountryStyle,
CountrySelectedStyle,
CountryHighlightStyle,
} from "./countryStyles";
class PSSM extends React.Component {
constructor(props) {
super(props);
this.state = {
africaCountries: null,
countriesNames: [],
loading: true,
error: null,
center: [3, 15],
zoom: 4,
scrollWheelZoom: false,
};
}
componentDidMount() {
this.fetchAfricaCountries();
}
fetchAfricaCountries = async () => {
try {
const response = await fetch(Africa);
const data = await response.json();
this.setState(
{
africaCountries: data.features,
countriesNames: data.features
.map((feature) => feature.properties.name)
.sort(),
loading: false,
},
() => {}
);
} catch (error) {
this.setState({
error: error,
loading: false,
});
}
};
render() {
const { africaCountries, countriesNames, loading, error } = this.state;
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<div id="map" className="map-container border">
<MapContainer
center={this.state.center}
zoom={this.state.zoom}
style={{ width: "100%", height: "100%" }}
scrollWheelZoom={this.state.scrollWheelZoom}
>
{africaCountries && (
<>
<GeoJSON
ref={this.geoJsonLayerRef}
onEachFeature={this.onEachFeature}
id="africa-map"
style={(feature) => {
if (
feature.properties.ECOWAS === 1 &&
feature.properties.RECSA === 1
) {
return CountrySelectedStyle("green");
}
if (feature.properties.RECSA === 1) {
return CountrySelectedStyle("yellow");
}
if (feature.properties.ECOWAS === 1) {
return CountrySelectedStyle("red");
}
}}
key="africa-map"
data={africaCountries}
/>
</>
)}
</MapContainer>
</div>
);
}
}
export default PSSM;

26
src/Components/Layout/PSSM/countryStyles.js Normal file
View File

@ -0,0 +1,26 @@
export const CountryStyle = () => {
return {
color: "black",
weight: 1,
opacity: 1,
fillColor: "#FDEDE2",
fillOpacity: 0.3,
};
};
export const CountrySelectedStyle = (color) => {
return {
fillColor: color,
color: "black",
weight: 3,
opacity: 1,
};
}
export const CountryHighlightStyle = () => {
return {
fillColor: "yellow",
color: "black",
weight: 3,
};
}

6
src/Components/Pages/Treaties.js → src/Components/Pages/ControlInAfrica.js
View File

@ -1,13 +1,13 @@
import React from "react"; import React from "react";
import Container from "react-bootstrap/Container"; import Container from "react-bootstrap/Container";
import AfricaMap from "../Layout/AfricaMap/AfricaMap"; import ControlInAfrica from "../Layout/ControlInAfrica/ControlInAfrica";
import Title from "../Layout/AfricaMap/Title"; import Title from "../Layout/ControlInAfrica/Title";
const Treaties = () => { const Treaties = () => {
return ( return (
<Container fluid className="p-5"> <Container fluid className="p-5">
<Title></Title> <Title></Title>
<AfricaMap></AfricaMap> <ControlInAfrica></ControlInAfrica>
</Container> </Container>
); );
}; };

14
src/Components/Pages/PSSM.js Normal file
View File

@ -0,0 +1,14 @@
import React from "react";
import Container from "react-bootstrap/Container";
import Blurb from "../Layout/PSSM/Blurb";
import PSSM from "../Layout/PSSM/PSSM";
const Treaties = () => {
return (
<Container className="p-5">
<Blurb></Blurb>
<PSSM></PSSM>
</Container>
);
};
export default Treaties;

8759
src/Data/Africa.geojson
View File

File diff suppressed because it is too large Load Diff

3605
src/Data/TestAfrica.geojson → src/Data/ControlinAfrica.geojson
View File

File diff suppressed because it is too large Load Diff

16392
src/Data/PSSM.geojson Normal file
View File

File diff suppressed because it is too large Load Diff

16392
src/Data/test.geojson Normal file
View File

File diff suppressed because it is too large Load Diff

0
src/Components/Layout/AfricaMap/Title.nodule.css → src/Styles/Layout/_map_pssm.scss
View File