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

add data

Browse Source
This commit is contained in:
louai98 2024-05-22 15:29:01 +02:00
parent e49491ea32
commit feee8eb239
14 changed files with 1227 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.npmrc Normal file
View File

@ -0,0 +1 @@
//registry.npmjs.org/:_authToken=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

193
package-lock.json generated
View File

@ -8,10 +8,15 @@
"name": "salw_client",
"version": "0.1.0",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/react-fontawesome": "^0.2.1",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"dompurify": "^3.1.4",
"html-react-parser": "^5.1.10",
"leaflet": "^1.9.4",
"node-sass": "^7.0.3",
"react": "^18.2.0",
@ -2521,6 +2526,51 @@
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
"integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
"integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.5.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
"integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.5.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/react-fontawesome": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.1.tgz",
"integrity": "sha512-ldr5QO2MneAX5W5WBCYB2pZp/PiHDD1hy9YEBLcXUyJb0qnO86oP8RU+CgmYVSH/R4Dbe2ernhcWOrcgaKD9NQ==",
"dependencies": {
"prop-types": "^15.8.1"
},
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
"react": ">=16.3"
}
},
"node_modules/@gar/promisify": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@ -7578,6 +7628,11 @@
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/dompurify": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.4.tgz",
"integrity": "sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww=="
},
"node_modules/domutils": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@ -9790,6 +9845,84 @@
"safe-buffer": "~5.1.0"
}
},
"node_modules/html-dom-parser": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.0.8.tgz",
"integrity": "sha512-vuWiX9EXgu8CJ5m9EP5c7bvBmNSuQVnrY8tl0z0ZX96Uth1IPlYH/8W8VZ/hBajFf18EN+j2pukbCNd01HEd1w==",
"dependencies": {
"domhandler": "5.0.3",
"htmlparser2": "9.1.0"
}
},
"node_modules/html-dom-parser/node_modules/dom-serializer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.2",
"entities": "^4.2.0"
},
"funding": {
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
}
},
"node_modules/html-dom-parser/node_modules/domhandler": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
"dependencies": {
"domelementtype": "^2.3.0"
},
"engines": {
"node": ">= 4"
},
"funding": {
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/html-dom-parser/node_modules/domutils": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
"dependencies": {
"dom-serializer": "^2.0.0",
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3"
},
"funding": {
"url": "https://github.com/fb55/domutils?sponsor=1"
}
},
"node_modules/html-dom-parser/node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/html-dom-parser/node_modules/htmlparser2": {
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
"integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
"funding": [
"https://github.com/fb55/htmlparser2?sponsor=1",
{
"type": "github",
"url": "https://github.com/sponsors/fb55"
}
],
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3",
"domutils": "^3.1.0",
"entities": "^4.5.0"
}
},
"node_modules/html-encoding-sniffer": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@ -9841,6 +9974,40 @@
"node": ">=12"
}
},
"node_modules/html-react-parser": {
"version": "5.1.10",
"resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.1.10.tgz",
"integrity": "sha512-gV22PvLij4wdEdtrZbGVC7Zy2OVWnQ0bYhX63S196ZRSx4+K0TuutCreHSXr+saUia8KeKB+2TYziVfijpH4Tw==",
"dependencies": {
"domhandler": "5.0.3",
"html-dom-parser": "5.0.8",
"react-property": "2.0.2",
"style-to-js": "1.1.12"
},
"peerDependencies": {
"@types/react": "17 || 18",
"react": "0.14 || 15 || 16 || 17 || 18"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/html-react-parser/node_modules/domhandler": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
"dependencies": {
"domelementtype": "^2.3.0"
},
"engines": {
"node": ">= 4"
},
"funding": {
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/html-webpack-plugin": {
"version": "5.5.3",
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz",
@ -10143,6 +10310,11 @@
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
},
"node_modules/inline-style-parser": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz",
"integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g=="
},
"node_modules/internal-slot": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
@ -16156,6 +16328,11 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"node_modules/react-property": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
"integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug=="
},
"node_modules/react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -17971,6 +18148,22 @@
"webpack": "^5.0.0"
}
},
"node_modules/style-to-js": {
"version": "1.1.12",
"resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.12.tgz",
"integrity": "sha512-tv+/FkgNYHI2fvCoBMsqPHh5xovwiw+C3X0Gfnss/Syau0Nr3IqGOJ9XiOYXoPnToHVbllKFf5qCNFJGwFg5mg==",
"dependencies": {
"style-to-object": "1.0.6"
}
},
"node_modules/style-to-object": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.6.tgz",
"integrity": "sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==",
"dependencies": {
"inline-style-parser": "0.2.3"
}
},
"node_modules/stylehacks": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",

5
package.json
View File

@ -3,10 +3,15 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/react-fontawesome": "^0.2.1",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"dompurify": "^3.1.4",
"html-react-parser": "^5.1.10",
"leaflet": "^1.9.4",
"node-sass": "^7.0.3",
"react": "^18.2.0",

25
src/Components/Helpers/TruncateContent/TruncateContent.css Normal file
View File

@ -0,0 +1,25 @@
.content-wrapper {
position: relative;
max-height: 150px; /* Adjust this value to the desired truncated height */
overflow: hidden;
transition: max-height 0.3s ease;
}
.content-wrapper.expanded {
max-height: none;
}
.read-more {
display: block;
margin-top: 10px;
color: blue;
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
font-size: 1rem;
}
.read-more:focus {
outline: none;
}

25
src/Components/Helpers/TruncateContent/TruncateContent.jsx Normal file
View File

@ -0,0 +1,25 @@
import React, { useState } from "react";
import "./TruncateContent.css";
const TruncateContent = ({ children }) => {
const [isExpanded, setIsExpanded] = useState(false);
const toggleReadMore = () => {
setIsExpanded(!isExpanded);
};
return (
<>
<div
className={`content-wrapper ${isExpanded ? "expanded" : "truncated"}`}
>
{children}
</div>
<button className="read-more" onClick={toggleReadMore}>
{isExpanded ? "Read Less" : "Read More"}
</button>
</>
);
};
export default TruncateContent;

176
src/Components/Layout/PSSM/Blurb.js
View File

@ -1,35 +1,161 @@
import React from "react";
import React, { useState } from "react";
import Card_ from "../../UI/Card_/Card_";
import DOMPurify from "dompurify";
import parse from "html-react-parser";
import TruncateContent from "../../Helpers/TruncateContent/TruncateContent";
const Blurb = () => {
DOMPurify.addHook("afterSanitizeAttributes", function (node) {
// set all elements owning target to target=_blank
if ("target" in node) {
node.setAttribute("target", "_blank");
node.setAttribute("rel", "noopener");
}
});
const [footnotes, setFootnotes] = useState([
{
id: 1,
text: "Weapons are illegally given out for a short period of time in return for some money. These weapons are often used in criminal activities and then returned. This practice has been used to supplement a low salary/income.",
},
{
id: 2,
text: "UNODA Training Manual on Gender-Mainstreaming Small Arms Control, p.132, UNODA-Gender-SALW-Training-Manual®.pdf (un-arm.org)",
},
{
id: 3,
text: "Organization for Security and Co-operation in Europe (OSCE), Best Practice Guide on National Procedures for Stockpile Management and Security of Small Arms and Light Weapons, 511204.pdf (<a href='https://www.osce.org/files/f/documents/6/1/511204.pdf' target='_blank'>osce.org</a>), p.2",
},
]);
return (
<>
<div className="responsive-text">
<Card_ className="p-3">
<TruncateContent>
<MainText footnotes={footnotes} />
<Footnotes footnotes={footnotes} />
</TruncateContent>
</Card_>
);
};
const MainText = ({ footnotes }) => {
return (
<div>
<h3>Physical Security and Stockpile Management (PSSM)</h3>
<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.
Diverted or ‘lost’ from poorly managed storage facilities, ‘recycled’
from one conflict to another or ‘rented out’
<sup>
<a href="#footnote-1">1</a>
</sup>
, small arms and light weapons (SALW) and their ammunition remain a
primary obstacle to the de-escalation of violent conflicts, national and
regional stability and peace-building efforts. Coupled with inadequate
storage practices, they further pose a serious threat to the safety and
security of nearby communities and civilian infrastructure, such as
schools and hospitals, and their easy accessibility increases the risk
that they are misused to commit armed violence (often against young men)
or acts of gender-based violence (GBV), often against women
<sup>
<a href="#footnote-2">2</a>
</sup>
.
</p>
<p>
Physical Security and Stockpile Management (PSSM) consists of the
“procedures and activities that are necessary for the safe and secure
accounting, storage, transportation and handling of SALW”
<sup>
<a href="#footnote-3">3</a>
</sup>
. It can therefore be viewed as a key element of practical weapons and
ammunition management, and it significantly decreases the risk of
illicit proliferation, trafficking and diversion of firearms,
ammunition, and explosives as well as reduces the risk of Unintentional
Munitions Explosions.
</p>
<p>
Responsible management of stockpiles can therefore positively impact on
efforts to reduce armed violence and contribute towards enhancing the
security of the surrounding communities as well as the security at the
local, national and regional level.
</p>
<h3>Regional PSSM Training of Trainers (ToT) processes</h3>
<p>
Since 2016, the bicc advisory team on Weapons and Ammunition Management
(WAM) has been supporting two multi-stakeholder regional PSSM Training
of Trainers (ToT) processes; one in East Africa (with the Regional
Centre on Small Arms in the Great Lakes Region, the Horn of Africa and
Bordering States, RECSA) and one in West Africa (with the Economic
Community of West African States, ECOWAS).
</p>
<p>
The aim of both processes was to support and enhance regional ownership,
strengthen PSSM capacities, establish sustainable structures by creating
a regional trainer pool whose trainers can independently train more
trainers that equally possess the necessary regional and local
knowledge, thereby decreasing a dependency on foreign experts. The focus
on regional ownership and sustainability represents a crucial piece of
the peace and security puzzle, in alignment with SDG 16.
</p>
<p>
Based on the UN Programme of Action, and acknowledging PSSM as a key
element of WAM, the Multinational Small Arms and Ammunition Group (MSAG)
initiated a training programme on the security and stockpile management
of weapons, ammunition, and explosives for East African states in Kenya
in 2012. Participants of the ToT processes derived from among the
military, police and wildlife service sectors. Up until March 2024, 469
participants have been trained, out of which 42 were certified as PSSM
Instructors and 13 as Senior Instructors. The map below shows their
geographical distribution.
</p>
<p>
In the meantime, the need for another regional PSSM ToT process was
identified in the ECOWAS region (West Africa), which was established in
2018 and completed in 2023. Based on the identified need for a regional
trainer pool and more accountable PSSM practices, this process also took
into account lessons learned from the East Africa ToT process. Between
2018 and 2023, a total of 000 participants have been trained, out of
which 000 were certified as PSSM Instructors and 000 as Senior
Instructors. The map below shows their geographical distribution.
</p>
<p>Stakeholders implementing the regional PSSM ToT trainings were:</p>
<ul>
<li>
RECSA, MSAG nations (namely the Bundeswehr Verification Centre, the
Austrian Verification Centre, Denmark, among others), IPSTC
(International Peace Support Training Centre) in Nairobi/Kenya and
bicc.
</li>
<li>ECOWAS, MSAG (the Bundeswehr Verification Centre) and bicc.</li>
</ul>
<p>
Each of these partners brings a unique skillset that complements that of
the other stakeholders.
</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>
);
};
const Footnotes = ({ footnotes }) => {
return (
<div>
<h4>
<hr />
</h4>
{footnotes.map((footnote) => (
<ul>
<li
className="list-unstyled"
key={footnote.id}
id={`footnote-${footnote.id}`}
>
<small>{parse(`${footnote.id}. ${footnote.text}`)}</small>
</li>
</ul>
))}
</div>
</>
);
};

94
src/Components/Layout/PSSM/PSSM.jsx
View File

@ -1,13 +1,17 @@
import React from "react";
import ReactDOM from 'react-dom';
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";
import Card_ from "../../UI/Card_/Card_";
import { CountrySelectedStyle, NotPSSMCountryStyle } from "./countryStyles";
import Person from "../../../Icons/person.svg";
import Person2 from "../../../Icons/person2.svg";
import Person3 from "../../../Icons/person3.svg";
class PSSM extends React.Component {
constructor(props) {
super(props);
@ -15,8 +19,10 @@ class PSSM extends React.Component {
this.state = {
africaCountries: null,
countriesNames: [],
pssmCountries: [],
loading: true,
error: null,
selectedCountry: "",
center: [3, 15],
zoom: 4,
@ -38,6 +44,10 @@ class PSSM extends React.Component {
countriesNames: data.features
.map((feature) => feature.properties.name)
.sort(),
pssmCountries: data.features.filter(
(feature) =>
feature.properties.RECSA === 1 || feature.properties.ECOWAS === 1
),
loading: false,
},
() => {}
@ -48,10 +58,39 @@ class PSSM extends React.Component {
loading: false,
});
}
console.log(this.state.pssmCountries);
};
onEachFeature = (feature, layer) => {
// Bind event to layer
layer.on({
click: this.onMouseClick,
});
};
onMouseClick = (e) => {
this.setState({
selectedCountriesFilter: [],
selectedCountryColor: "yellow",
});
const countryName = e.target.feature.properties.name;
if (countryName === this.state.selectedCountry) {
this.setState({ selectedCountry: "" });
return;
}
this.setState({ selectedCountry: countryName });
};
render() {
const { africaCountries, countriesNames, loading, error } = this.state;
const {
africaCountries,
countriesNames,
pssmCountries,
loading,
error,
selectedCountry,
} = this.state;
if (loading) {
return <div>Loading...</div>;
}
@ -60,7 +99,7 @@ class PSSM extends React.Component {
}
return (
<div id="map" className="map-container border">
<Card_ id="map" className="map-container mt-3">
<MapContainer
center={this.state.center}
zoom={this.state.zoom}
@ -85,6 +124,8 @@ class PSSM extends React.Component {
}
if (feature.properties.ECOWAS === 1) {
return CountrySelectedStyle("red");
} else {
return NotPSSMCountryStyle();
}
}}
key="africa-map"
@ -92,8 +133,45 @@ class PSSM extends React.Component {
/>
</>
)}
</MapContainer>
{selectedCountry &&
pssmCountries.map((feature) => {
if (feature.properties.name === selectedCountry) {
return (
<Marker
key={feature.properties.name}
position={[feature.properties.y, feature.properties.x]}
>
<Tooltip
direction="bottom"
offset={[-13, 27]}
opacity={1}
permanent
className="tooltip-custom"
>
<h5>{feature.properties.name}</h5>
<div>
<ul className="list-unstyled tooltip-text">
<li>
<img src={Person3} className="person-icon"/> Number of participants trained:{" "}
<span className="tooltip-text-number">{feature.properties["Trained-Participants"] || "-"}</span>
</li>
<li>
<img src={Person2} className="person-icon"/> Number of PSSM instractors:{" "}
<span className="tooltip-text-number">{feature.properties["PSSM-Instructors"] || "-"}</span>
</li>
<li>
<img src={Person} className="person-icon"/> Number of senior PSSM instractors:{" "}
<span className="tooltip-text-number">{feature.properties["PSSM-Senior-Instructors"] || "-"}</span>
</li>
</ul>
</div>
</Tooltip>
</Marker>
);
}
})}
</MapContainer>
</Card_>
);
}
}

22
src/Components/Layout/PSSM/countryStyles.js
View File

@ -6,21 +6,31 @@ export const CountryStyle = () => {
fillColor: "#FDEDE2",
fillOpacity: 0.3,
};
};
};
export const CountrySelectedStyle = (color) => {
export const CountrySelectedStyle = (color) => {
return {
fillColor: color,
color: "black",
weight: 3,
weight: 2,
opacity: 1,
};
}
};
export const CountryHighlightStyle = () => {
export const CountryHighlightStyle = () => {
return {
fillColor: "yellow",
color: "black",
weight: 3,
};
}
};
export const NotPSSMCountryStyle = () => {
return {
fillColor: "#cccccc",
color: "#e3e3e3",
weight: 1,
opacity: 1,
fillOpacity: 0.3,
};
};

799
src/Data/PSSM.geojson
View File

File diff suppressed because it is too large Load Diff

23
src/Icons/person.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1080" height="1080" viewBox="0 0 1080 1080" xml:space="preserve">
<desc>Created with Fabric.js 5.2.4</desc>
<defs>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="transparent"></rect>
<g transform="matrix(1 0 0 1 540 540)" id="92f8c780-682d-410e-9305-55f6c76b821a" >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
</g>
<g transform="matrix(1 0 0 1 540 540)" id="2902fc72-5f87-4d9a-a213-49b43b827461" >
</g>
<g transform="matrix(1 0 0 1 174.64 508.98)" >
<g style="" vector-effect="non-scaling-stroke" >
<g transform="matrix(33.33 0 0 33.33 -0.01 1.63)" >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12.05)" d="M 13.9 2.999 C 13.900404510128258 3.767569137253463 13.437740927005041 4.4606849303964715 12.727791698439338 4.755083937232331 C 12.017842469873635 5.04948294406819 11.200454630665819 4.88717393579122 10.656851071891348 4.343856484152948 C 10.113247513116876 3.800539032514675 9.950508209994716 2.9832367548523684 10.244533420214 2.273132637048167 C 10.538558630433283 1.5630285192439657 11.231430756296502 1.1000001064500415 12 1.1 C 13.048950624407942 1.09999985471597 13.899447920724006 1.9500495208760782 13.9 2.9990000000000006 z M 13.544 6 L 10.456 6 C 9.604684814488484 5.999811949956359 8.862518492883558 6.579113995431316 8.655999999999999 7.405000000000001 L 6.993999999999999 14.057 C 6.949087749408432 14.259377888455008 7.00082563788415 14.471133674859198 7.133999999999999 14.63 C 7.29552492159201 14.833465444933692 7.539274387351227 14.954423826438266 7.798999999999999 14.96 C 8.086057992331412 14.955557715508808 8.34287529667128 14.780544391724366 8.451999999999998 14.515 L 10 9.1 L 10 13 L 9.078 22.219 C 9.057924474646427 22.41874832997887 9.123349536101328 22.61765922173752 9.258078407025312 22.76648984152766 C 9.392807277949297 22.915320461317805 9.584245430761463 23.000158042462385 9.785 23 L 9.859 23 C 10.19101964547464 22.999898168622497 10.475889150458729 22.763347237492642 10.537 22.437 L 12 14.583 L 13.463000000000001 22.437 C 13.524110849541275 22.763347237492642 13.808980354525362 22.999898168622497 14.141000000000002 23 L 14.215000000000002 23 C 14.415754569238539 23.000158042462385 14.607192722050703 22.915320461317805 14.74192159297469 22.76648984152766 C 14.876650463898674 22.61765922173752 14.942075525353575 22.41874832997887 14.922000000000002 22.219 L 14 13 L 14 9.1 L 15.548 14.515 C 15.65743368223532 14.780152409969652 15.914184251847452 14.954727069859064 16.201 14.959000000000001 C 16.460559067140714 14.953667969304108 16.704279363027823 14.83309055975996 16.866 14.63 C 16.99917436211585 14.471133674859198 17.05091225059157 14.259377888455008 17.006 14.057 L 15.344000000000001 7.405 C 15.137481507116442 6.579113995431316 14.395315185511514 5.999811949956358 13.544 6 z" stroke-linecap="round" />
</g>
<g transform="matrix(33.33 0 0 33.33 -0.04 -0.04)" >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 0 0 L 24 0 L 24 24 L 0 24 z" stroke-linecap="round" />
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

33
src/Icons/person2.svg Normal file
View File

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1080" height="1080" viewBox="0 0 1080 1080" xml:space="preserve">
<desc>Created with Fabric.js 5.2.4</desc>
<defs>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="transparent"></rect>
<g transform="matrix(1 0 0 1 540 540)" id="92f8c780-682d-410e-9305-55f6c76b821a" >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
</g>
<g transform="matrix(1 0 0 1 540 540)" id="2902fc72-5f87-4d9a-a213-49b43b827461" >
</g>
<g transform="matrix(1 0 0 1 174.64 508.98)" >
<g style="" vector-effect="non-scaling-stroke" >
<g transform="matrix(33.33 0 0 33.33 -0.01 1.63)" >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12.05)" d="M 13.9 2.999 C 13.900404510128258 3.767569137253463 13.437740927005041 4.4606849303964715 12.727791698439338 4.755083937232331 C 12.017842469873635 5.04948294406819 11.200454630665819 4.88717393579122 10.656851071891348 4.343856484152948 C 10.113247513116876 3.800539032514675 9.950508209994716 2.9832367548523684 10.244533420214 2.273132637048167 C 10.538558630433283 1.5630285192439657 11.231430756296502 1.1000001064500415 12 1.1 C 13.048950624407942 1.09999985471597 13.899447920724006 1.9500495208760782 13.9 2.9990000000000006 z M 13.544 6 L 10.456 6 C 9.604684814488484 5.999811949956359 8.862518492883558 6.579113995431316 8.655999999999999 7.405000000000001 L 6.993999999999999 14.057 C 6.949087749408432 14.259377888455008 7.00082563788415 14.471133674859198 7.133999999999999 14.63 C 7.29552492159201 14.833465444933692 7.539274387351227 14.954423826438266 7.798999999999999 14.96 C 8.086057992331412 14.955557715508808 8.34287529667128 14.780544391724366 8.451999999999998 14.515 L 10 9.1 L 10 13 L 9.078 22.219 C 9.057924474646427 22.41874832997887 9.123349536101328 22.61765922173752 9.258078407025312 22.76648984152766 C 9.392807277949297 22.915320461317805 9.584245430761463 23.000158042462385 9.785 23 L 9.859 23 C 10.19101964547464 22.999898168622497 10.475889150458729 22.763347237492642 10.537 22.437 L 12 14.583 L 13.463000000000001 22.437 C 13.524110849541275 22.763347237492642 13.808980354525362 22.999898168622497 14.141000000000002 23 L 14.215000000000002 23 C 14.415754569238539 23.000158042462385 14.607192722050703 22.915320461317805 14.74192159297469 22.76648984152766 C 14.876650463898674 22.61765922173752 14.942075525353575 22.41874832997887 14.922000000000002 22.219 L 14 13 L 14 9.1 L 15.548 14.515 C 15.65743368223532 14.780152409969652 15.914184251847452 14.954727069859064 16.201 14.959000000000001 C 16.460559067140714 14.953667969304108 16.704279363027823 14.83309055975996 16.866 14.63 C 16.99917436211585 14.471133674859198 17.05091225059157 14.259377888455008 17.006 14.057 L 15.344000000000001 7.405 C 15.137481507116442 6.579113995431316 14.395315185511514 5.999811949956358 13.544 6 z" stroke-linecap="round" />
</g>
<g transform="matrix(33.33 0 0 33.33 -0.04 -0.04)" >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 0 0 L 24 0 L 24 24 L 0 24 z" stroke-linecap="round" />
</g>
</g>
</g>
<g transform="matrix(1 0 0 1 508.64 510.94)" >
<g style="" vector-effect="non-scaling-stroke" >
<g transform="matrix(33.33 0 0 33.33 -0.01 1.63)" >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12.05)" d="M 13.9 2.999 C 13.900404510128258 3.767569137253463 13.437740927005041 4.4606849303964715 12.727791698439338 4.755083937232331 C 12.017842469873635 5.04948294406819 11.200454630665819 4.88717393579122 10.656851071891348 4.343856484152948 C 10.113247513116876 3.800539032514675 9.950508209994716 2.9832367548523684 10.244533420214 2.273132637048167 C 10.538558630433283 1.5630285192439657 11.231430756296502 1.1000001064500415 12 1.1 C 13.048950624407942 1.09999985471597 13.899447920724006 1.9500495208760782 13.9 2.9990000000000006 z M 13.544 6 L 10.456 6 C 9.604684814488484 5.999811949956359 8.862518492883558 6.579113995431316 8.655999999999999 7.405000000000001 L 6.993999999999999 14.057 C 6.949087749408432 14.259377888455008 7.00082563788415 14.471133674859198 7.133999999999999 14.63 C 7.29552492159201 14.833465444933692 7.539274387351227 14.954423826438266 7.798999999999999 14.96 C 8.086057992331412 14.955557715508808 8.34287529667128 14.780544391724366 8.451999999999998 14.515 L 10 9.1 L 10 13 L 9.078 22.219 C 9.057924474646427 22.41874832997887 9.123349536101328 22.61765922173752 9.258078407025312 22.76648984152766 C 9.392807277949297 22.915320461317805 9.584245430761463 23.000158042462385 9.785 23 L 9.859 23 C 10.19101964547464 22.999898168622497 10.475889150458729 22.763347237492642 10.537 22.437 L 12 14.583 L 13.463000000000001 22.437 C 13.524110849541275 22.763347237492642 13.808980354525362 22.999898168622497 14.141000000000002 23 L 14.215000000000002 23 C 14.415754569238539 23.000158042462385 14.607192722050703 22.915320461317805 14.74192159297469 22.76648984152766 C 14.876650463898674 22.61765922173752 14.942075525353575 22.41874832997887 14.922000000000002 22.219 L 14 13 L 14 9.1 L 15.548 14.515 C 15.65743368223532 14.780152409969652 15.914184251847452 14.954727069859064 16.201 14.959000000000001 C 16.460559067140714 14.953667969304108 16.704279363027823 14.83309055975996 16.866 14.63 C 16.99917436211585 14.471133674859198 17.05091225059157 14.259377888455008 17.006 14.057 L 15.344000000000001 7.405 C 15.137481507116442 6.579113995431316 14.395315185511514 5.999811949956358 13.544 6 z" stroke-linecap="round" />
</g>
<g transform="matrix(33.33 0 0 33.33 -0.04 -0.04)" >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 0 0 L 24 0 L 24 24 L 0 24 z" stroke-linecap="round" />
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

42
src/Icons/person3.svg Normal file
View File

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1080" height="1080" viewBox="0 0 1080 1080" xml:space="preserve">
<desc>Created with Fabric.js 5.2.4</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 540 540)" id="92f8c780-682d-410e-9305-55f6c76b821a" >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
</g>
<g transform="matrix(1 0 0 1 540 540)" id="2902fc72-5f87-4d9a-a213-49b43b827461" >
</g>
<g transform="matrix(1 0 0 1 174.64 508.98)" >
<g style="" vector-effect="non-scaling-stroke" >
<g transform="matrix(33.33 0 0 33.33 -0.01 1.63)" >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12.05)" d="M 13.9 2.999 C 13.900404510128258 3.767569137253463 13.437740927005041 4.4606849303964715 12.727791698439338 4.755083937232331 C 12.017842469873635 5.04948294406819 11.200454630665819 4.88717393579122 10.656851071891348 4.343856484152948 C 10.113247513116876 3.800539032514675 9.950508209994716 2.9832367548523684 10.244533420214 2.273132637048167 C 10.538558630433283 1.5630285192439657 11.231430756296502 1.1000001064500415 12 1.1 C 13.048950624407942 1.09999985471597 13.899447920724006 1.9500495208760782 13.9 2.9990000000000006 z M 13.544 6 L 10.456 6 C 9.604684814488484 5.999811949956359 8.862518492883558 6.579113995431316 8.655999999999999 7.405000000000001 L 6.993999999999999 14.057 C 6.949087749408432 14.259377888455008 7.00082563788415 14.471133674859198 7.133999999999999 14.63 C 7.29552492159201 14.833465444933692 7.539274387351227 14.954423826438266 7.798999999999999 14.96 C 8.086057992331412 14.955557715508808 8.34287529667128 14.780544391724366 8.451999999999998 14.515 L 10 9.1 L 10 13 L 9.078 22.219 C 9.057924474646427 22.41874832997887 9.123349536101328 22.61765922173752 9.258078407025312 22.76648984152766 C 9.392807277949297 22.915320461317805 9.584245430761463 23.000158042462385 9.785 23 L 9.859 23 C 10.19101964547464 22.999898168622497 10.475889150458729 22.763347237492642 10.537 22.437 L 12 14.583 L 13.463000000000001 22.437 C 13.524110849541275 22.763347237492642 13.808980354525362 22.999898168622497 14.141000000000002 23 L 14.215000000000002 23 C 14.415754569238539 23.000158042462385 14.607192722050703 22.915320461317805 14.74192159297469 22.76648984152766 C 14.876650463898674 22.61765922173752 14.942075525353575 22.41874832997887 14.922000000000002 22.219 L 14 13 L 14 9.1 L 15.548 14.515 C 15.65743368223532 14.780152409969652 15.914184251847452 14.954727069859064 16.201 14.959000000000001 C 16.460559067140714 14.953667969304108 16.704279363027823 14.83309055975996 16.866 14.63 C 16.99917436211585 14.471133674859198 17.05091225059157 14.259377888455008 17.006 14.057 L 15.344000000000001 7.405 C 15.137481507116442 6.579113995431316 14.395315185511514 5.999811949956358 13.544 6 z" stroke-linecap="round" />
</g>
<g transform="matrix(33.33 0 0 33.33 -0.04 -0.04)" >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 0 0 L 24 0 L 24 24 L 0 24 z" stroke-linecap="round" />
</g>
</g>
</g>
<g transform="matrix(1 0 0 1 508.64 510.94)" >
<g style="" vector-effect="non-scaling-stroke" >
<g transform="matrix(33.33 0 0 33.33 -0.01 1.63)" >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12.05)" d="M 13.9 2.999 C 13.900404510128258 3.767569137253463 13.437740927005041 4.4606849303964715 12.727791698439338 4.755083937232331 C 12.017842469873635 5.04948294406819 11.200454630665819 4.88717393579122 10.656851071891348 4.343856484152948 C 10.113247513116876 3.800539032514675 9.950508209994716 2.9832367548523684 10.244533420214 2.273132637048167 C 10.538558630433283 1.5630285192439657 11.231430756296502 1.1000001064500415 12 1.1 C 13.048950624407942 1.09999985471597 13.899447920724006 1.9500495208760782 13.9 2.9990000000000006 z M 13.544 6 L 10.456 6 C 9.604684814488484 5.999811949956359 8.862518492883558 6.579113995431316 8.655999999999999 7.405000000000001 L 6.993999999999999 14.057 C 6.949087749408432 14.259377888455008 7.00082563788415 14.471133674859198 7.133999999999999 14.63 C 7.29552492159201 14.833465444933692 7.539274387351227 14.954423826438266 7.798999999999999 14.96 C 8.086057992331412 14.955557715508808 8.34287529667128 14.780544391724366 8.451999999999998 14.515 L 10 9.1 L 10 13 L 9.078 22.219 C 9.057924474646427 22.41874832997887 9.123349536101328 22.61765922173752 9.258078407025312 22.76648984152766 C 9.392807277949297 22.915320461317805 9.584245430761463 23.000158042462385 9.785 23 L 9.859 23 C 10.19101964547464 22.999898168622497 10.475889150458729 22.763347237492642 10.537 22.437 L 12 14.583 L 13.463000000000001 22.437 C 13.524110849541275 22.763347237492642 13.808980354525362 22.999898168622497 14.141000000000002 23 L 14.215000000000002 23 C 14.415754569238539 23.000158042462385 14.607192722050703 22.915320461317805 14.74192159297469 22.76648984152766 C 14.876650463898674 22.61765922173752 14.942075525353575 22.41874832997887 14.922000000000002 22.219 L 14 13 L 14 9.1 L 15.548 14.515 C 15.65743368223532 14.780152409969652 15.914184251847452 14.954727069859064 16.201 14.959000000000001 C 16.460559067140714 14.953667969304108 16.704279363027823 14.83309055975996 16.866 14.63 C 16.99917436211585 14.471133674859198 17.05091225059157 14.259377888455008 17.006 14.057 L 15.344000000000001 7.405 C 15.137481507116442 6.579113995431316 14.395315185511514 5.999811949956358 13.544 6 z" stroke-linecap="round" />
</g>
<g transform="matrix(33.33 0 0 33.33 -0.04 -0.04)" >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 0 0 L 24 0 L 24 24 L 0 24 z" stroke-linecap="round" />
</g>
</g>
</g>
<g transform="matrix(1 0 0 1 844.94 511.75)" >
<g style="" vector-effect="non-scaling-stroke" >
<g transform="matrix(33.33 0 0 33.33 -0.01 1.63)" >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12.05)" d="M 13.9 2.999 C 13.900404510128258 3.767569137253463 13.437740927005041 4.4606849303964715 12.727791698439338 4.755083937232331 C 12.017842469873635 5.04948294406819 11.200454630665819 4.88717393579122 10.656851071891348 4.343856484152948 C 10.113247513116876 3.800539032514675 9.950508209994716 2.9832367548523684 10.244533420214 2.273132637048167 C 10.538558630433283 1.5630285192439657 11.231430756296502 1.1000001064500415 12 1.1 C 13.048950624407942 1.09999985471597 13.899447920724006 1.9500495208760782 13.9 2.9990000000000006 z M 13.544 6 L 10.456 6 C 9.604684814488484 5.999811949956359 8.862518492883558 6.579113995431316 8.655999999999999 7.405000000000001 L 6.993999999999999 14.057 C 6.949087749408432 14.259377888455008 7.00082563788415 14.471133674859198 7.133999999999999 14.63 C 7.29552492159201 14.833465444933692 7.539274387351227 14.954423826438266 7.798999999999999 14.96 C 8.086057992331412 14.955557715508808 8.34287529667128 14.780544391724366 8.451999999999998 14.515 L 10 9.1 L 10 13 L 9.078 22.219 C 9.057924474646427 22.41874832997887 9.123349536101328 22.61765922173752 9.258078407025312 22.76648984152766 C 9.392807277949297 22.915320461317805 9.584245430761463 23.000158042462385 9.785 23 L 9.859 23 C 10.19101964547464 22.999898168622497 10.475889150458729 22.763347237492642 10.537 22.437 L 12 14.583 L 13.463000000000001 22.437 C 13.524110849541275 22.763347237492642 13.808980354525362 22.999898168622497 14.141000000000002 23 L 14.215000000000002 23 C 14.415754569238539 23.000158042462385 14.607192722050703 22.915320461317805 14.74192159297469 22.76648984152766 C 14.876650463898674 22.61765922173752 14.942075525353575 22.41874832997887 14.922000000000002 22.219 L 14 13 L 14 9.1 L 15.548 14.515 C 15.65743368223532 14.780152409969652 15.914184251847452 14.954727069859064 16.201 14.959000000000001 C 16.460559067140714 14.953667969304108 16.704279363027823 14.83309055975996 16.866 14.63 C 16.99917436211585 14.471133674859198 17.05091225059157 14.259377888455008 17.006 14.057 L 15.344000000000001 7.405 C 15.137481507116442 6.579113995431316 14.395315185511514 5.999811949956358 13.544 6 z" stroke-linecap="round" />
</g>
<g transform="matrix(33.33 0 0 33.33 -0.04 -0.04)" >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 0 0 L 24 0 L 24 24 L 0 24 z" stroke-linecap="round" />
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

12
src/Styles/Layout/_map_pssm.scss
View File

@ -0,0 +1,12 @@
.tooltip-text {
font-size: 1rem;
}
.tooltip-text-number{
color: rgb(0, 132, 255);
}
.person-icon{
height: 1.3rem;
}

1
src/Styles/main.scss
View File

@ -12,6 +12,7 @@
@import 'Layout/filters';
@import 'Layout/map';
@import 'Layout/tooltips';
@import 'Layout/map_pssm';
// Import other layout partials...
// Components