diff --git a/hello-world/css/style.css b/hello-world/css/style.css
new file mode 100644
index 0000000..ef6b3e2
--- /dev/null
+++ b/hello-world/css/style.css
@@ -0,0 +1,451 @@
+/* ALL */
+/* ALL */
+/* ALL */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+.bold {
+ font-family: Inter;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 24px;
+ color: #000000;
+}
+
+.none {
+ display: none;
+}
+
+.filter-active {
+ background-color: #e3e3e3;
+ border-radius: 10px;
+}
+
+/* #reset-button::before {
+ content: "";
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ margin-left: -25px;
+ background-image: url("https://cdn-icons-png.flaticon.com/128/9497/9497023.png");
+ background-size: cover;
+}
+ #reset-button {
+ grid-row: b / c;
+ grid-column: d / e;
+ border-radius: 15px;
+ width: 220px;
+ padding-right: 0px;
+ margin-top: 10px;
+}
+
+#reset-button:hover {
+ cursor: pointer;
+} */
+
+.button-active {
+ background-color: #95C11F !important;
+ border : 2px solid #95C11F !important;
+ color: white !important;
+ border-left: 2px solid #779a19 !important;
+ border-top: 2px solid #779a19 !important;
+}
+
+.color-white {
+ color: white;
+}
+
+/* EOF ALL */
+/* EOF ALL */
+/* EOF ALL */
+
+/* MAP & ZOOM */
+/* MAP & ZOOM */
+/* MAP & ZOOM */
+
+#map {
+ width: 100%;
+ height: 60vh;
+ margin-top: 0;
+ box-shadow: 1px 1px 27px -5px rgba(0,0,0,0.75);
+ -webkit-box-shadow: 1px 1px 27px -5px rgba(0,0,0,0.75);
+ -moz-box-shadow: 1px 1px 27px -5px rgba(0,0,0,0.75);
+}
+
+.leaflet-verticalcenter.leaflet-left {
+ position: absolute;
+ left: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 111111111111;
+}
+
+.leaflet-control-scale {
+ display: none;
+}
+
+/* EOF MAP & ZOOM */
+/* EOF MAP & ZOOM */
+/* EOF MAP & ZOOM */
+
+/* MODAL & CONTENT */
+/* MODAL & CONTENT */
+/* MODAL & CONTENT */
+
+.leaflet-popup-content {
+ margin: 0;
+ padding: 0;
+ padding-bottom: 10px;
+ width: 250px !important;
+}
+
+.leaflet-popup-close-button > span:nth-child(1) {
+ width: 25px;
+ height: 25px;
+ background-color: rgb(0, 0, 0);
+ color: white;
+ border-radius: 50px;
+ display: block;
+ margin-left: -260px;
+ margin-top: 10px;
+ font-size: 20px;
+}
+.leaflet-popup-content > p {
+ padding-left: 15px;
+}
+
+.leaflet-popup-content-wrapper {
+ background-color: lightgray;
+ transition: 500ms;
+ overflow: hidden;
+ width: 250px !important;
+ padding: 0;
+}
+
+.leaflet-popup {
+ position: fixed;
+}
+
+.modal-adress {
+ font-family: Inter !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ line-height: 18px !important;
+ text-align: left !important;
+ color : white !important;
+ margin-bottom: 0 !important;
+ padding-left: 14px !important;
+}
+
+.leaflet-popup-content-wrapper {
+ border-radius: 25px;
+ background: #ffffff;
+}
+
+.modal-green {
+ border: 3px solid #95c11f !important;
+}
+
+.modal-yellow {
+ border: 3px solid #ffc800 !important;
+}
+
+.modal-blue {
+ border: 3px solid #91a2ff !important;
+}
+
+.modal-red {
+ border: 3px solid #ff792d !important;
+}
+
+.modal-black {
+ border: 3px solid #634e42 !important;
+}
+
+.modal-domaine {
+ text-align: center !important;
+ margin-top: 0 !important;
+ text-align: center !important;
+ border-radius: 0 0 20px 20px !important;
+ width: 196px;
+ height: 28px;
+ padding: 5px 15px 5px 15px !important;
+ font-weight: 600 !important;
+ line-height: 18px !important;
+ font-size: 14px !important;
+ margin-left: auto !important;
+ margin-right: auto !important;
+}
+
+.modal-domaine-green, .modal-container-green {
+ background-color: #95C11F !important;
+}
+
+.modal-domaine-yellow, .modal-container-yellow {
+ background-color: #ffc800 !important;
+}
+
+.modal-domaine-blue, .modal-container-blue {
+ background-color: #91a2ff !important;
+}
+
+.modal-domaine-red, .modal-container-red {
+ background-color: #ff792d !important;
+}
+
+.modal-domaine-black, .modal-container-black {
+ background-color: #634e42 !important;
+}
+
+
+
+.modal-associe, .modal-annee, .modal-etat {
+ padding: 0 !important;
+ margin: 0 !important;
+ padding-top: 8px !important;
+ padding-left: 14px !important;
+ font-family: Inter;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 18px;
+}
+
+
+.modal-container {
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.modal-name {
+ font-size: 20px !important;
+ font-weight: 600 !important;
+ line-height: 18px !important;
+ text-align: left !important;
+ color : white !important;
+ margin-bottom: 0 !important;
+ padding-bottom: 10px !important;
+ padding-left: 14px !important;
+}
+
+.modal-container-header {
+ display: grid;
+ grid-template-columns: [a] 1fr [b] 1fr [c];
+ grid-template-rows: [a] 1fr [b] 1fr [c];
+}
+
+.modal-container-header > img {
+ grid-row: a / c;
+ grid-column: a / c;
+ justify-self: center;
+ align-self: center;
+}
+
+.modal-domaine {
+ grid-row: a / b;
+ grid-column: a / c;
+ justify-self: center;
+ align-self: flex-start;
+}
+
+.wait-button:hover {
+ cursor: pointer;
+}
+
+/* EOF MODAL & CONTENT */
+/* EOF MODAL & CONTENT */
+/* EOF MODAL & CONTENT */
+
+/* FILTER */
+/* FILTER */
+/* FILTER */
+
+#container-filter {
+ display: grid;
+ grid-template-columns: [a] 1fr [b] 1fr [c] 1fr [d];
+ grid-template-rows: [a] 200px [b] 100px [c];
+ background-color: white;
+ height: fit-content;
+ box-shadow: 1px 1px 27px -5px rgba(0,0,0,0.75);
+ -webkit-box-shadow: 1px 1px 27px -5px rgba(0,0,0,0.75);
+ -moz-box-shadow: 1px 1px 27px -5px rgba(0,0,0,0.75);
+ padding: 30px;
+ border-radius: 15px 15px 0 0;
+}
+
+/* TOGGLE */
+/* TOGGLE */
+
+.container-toggle {
+ width: 80px;
+ border: 2px solid #634E42;
+ border-radius: 50px;
+ height: 38px;
+ display: grid;
+ grid-row: b / c;
+ grid-column: a / b;
+}
+
+.container-toggle > div {
+ width: 30px;
+ height: 30px;
+ background-color: #634E42;
+ border-radius: 50px;
+ align-self: center;
+ justify-self: start;
+ margin-left: 4px !important;
+ margin-top: 0 !important;
+}
+
+.toggle-to-anim-enfant {
+ animation-name: toActifEnfant;
+ animation-duration: 2000ms;
+}
+
+.toggle-to-anim-parent {
+ animation-name: toActifParent;
+ animation-duration: 2000ms;
+}
+
+@keyframes toActifEnfant {
+ 0% {
+ background-color: #634E42;
+ }
+
+ 100% {
+ background-color: #95C11F;
+ margin-left: 40px !important;
+ }
+}
+
+@keyframes toActifParent {
+ 0% {
+ background-color: #634E42;
+ }
+
+ 100% {
+ background-color: #95C11F;
+ }
+}
+
+/* EOF TOGGLE */
+/* EOF TOGGLE */
+
+#container-filter-label-1 {
+ grid-row: b / c;
+ grid-column: b / c;
+ display: grid;
+ grid-template-columns: repeat(2, auto);
+ width: fit-content;
+ grid-gap: 8px;
+}
+
+#container-filter-label-1 > div {
+ justify-self: start;
+ align-self: center;
+ border-radius: 50px;
+ color: #634E42;
+ padding: 5px 15px 5px 15px;
+ border: 2px solid #634E42;
+}
+
+#container-filter-label-1 > div > p {
+ margin-bottom: 0 !important;
+ padding-bottom: 0 !important;
+ font-size: 14px !important;
+ line-height: 24px !important;
+}
+
+.separator {
+ grid-row: a / c;
+ grid-column: a / d;
+ justify-self: center;
+ align-self: center;
+ width: 100%;
+ margin-top: 50px;
+}
+
+h5 {
+ font-weight : 700 !important;
+ font-size : 20px !important;
+ line-height : 26px !important;
+ color: #000000 !important;
+ font-family: Inter !important;
+}
+
+#container-filter-domaine {
+ grid-row: a / b;
+ grid-column: a / d;
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ grid-gap: 10px;
+ height: fit-content;
+}
+
+#container-filter-domaine > div > img {
+ width: 60%;
+ margin-left: 20%;
+}
+
+#container-filter-domaine > div:hover {
+ cursor: pointer;
+}
+
+#container-filter-domaine p {
+ text-align: center;
+ font-family: Inter;
+ font-weight : 500;
+ font-size : 14px;
+ line-height : 18px;
+ color: #000000;
+}
+
+#domaine-button {
+ align-self: center;
+}
+
+#container-filter-associe {
+ grid-row: b / c;
+ grid-column: a / b;
+}
+
+#container-filter-label {
+ grid-row: b / c;
+ grid-column: b / c;
+}
+
+#container-filter-avancement {
+ grid-row: b / c;
+ grid-column: c / d;
+}
+
+#container-filter-avancement-1 {
+ display: grid;
+ grid-template-columns: repeat(3, auto);
+ width: fit-content;
+ grid-gap: 8px;
+}
+
+#container-filter-avancement-1 > div {
+ justify-self: start;
+ align-self: center;
+ border-radius: 50px;
+ color: #634E42;
+ padding: 5px 15px 5px 15px;
+ border: 2px solid #634E42;
+}
+
+#container-filter-avancement-1 > div > p {
+ margin-bottom: 0 !important;
+ padding-bottom: 0 !important;
+ font-size: 14px !important;
+ line-height: 24px !important;
+}
+
+/* EOF FILTER */
+/* EOF FILTER */
+/* EOF FILTER */
\ No newline at end of file
diff --git a/hello-world/hello-world.php b/hello-world/hello-world.php
new file mode 100644
index 0000000..55dfdb7
--- /dev/null
+++ b/hello-world/hello-world.php
@@ -0,0 +1,191 @@
+
+
+
+
+
+
+
+
+
Type de projet
+
+
+
Lieux de plantation
+
+
+
+
Producteur de bois
+
+
+
+
Acheteur de bois
+
+
+
+
Acheteur de chaleur
+
+
+
+
` : ''}
+
+
+
${itemNom}
+ ${itemCodePostal} ${itemVille}
+
+ ${itemAssocie === "Oui" ? "Associé-e BBE" : ""}
+ Année : ${itemAnnee}
+ État d'avancement : ${itemAvancement}
+ ${itemLabel}
+ ![]()
+ ![]()
+ `;
+ var marker = L.marker([itemLatitude, itemLongitude], { icon: markerIcon })
+ .bindPopup(popupContent);
+ allMarkers.push(marker);
+ }
+
+ function addControlPlaceholders(map) {
+ var corners = map._controlCorners,
+ l = 'leaflet-',
+ container = map._controlContainer;
+
+ function createCorner(vSide, hSide) {
+ var className = l + vSide + ' ' + l + hSide;
+ corners[vSide + hSide] = L.DomUtil.create('div', className, container);
+ }
+ createCorner('verticalcenter', 'left');
+ }
+ addControlPlaceholders(map);
+ map.zoomControl.setPosition('verticalcenterleft');
+ L.control.scale({position: 'verticalcenterleft'}).addTo(map);
+ markersCluster.addLayers(allMarkers);
+ map.addLayer(markersCluster);
+ }
+
+ $.ajax({
+ url: '/wp-json/custom/v1/markers',
+ method: 'GET',
+ dataType: 'json',
+ success: function(data) {
+ initialMarkerData = data;
+ addMarkers(data);
+ },
+ error: function(xhr, status, error) {
+ console.error('Erreur lors de la récupération des données :', error);
+ }
+ });
+
+ function filterMarkers() {
+ var statusFilters = {
+ 'En cours': $('#en-cours').hasClass('filter-active'),
+ 'Terminé': $('#projets-finis').hasClass('filter-active'),
+ 'Prévu': $('#prevu').hasClass('filter-active'),
+ };
+
+ var associeFilters = {
+ 'Oui': $('#associe-oui').hasClass('filter-active'),
+ 'Non': $('#associe-non').hasClass('filter-active'),
+ };
+
+ var labelFilters = {
+ 'aucun': $('#label-aucun').hasClass('filter-active'),
+ 'haie': $('#label-haie').hasClass('filter-active'),
+ 'vegetal': $('#label-vegetal').hasClass('filter-active'),
+ };
+
+ var domaineFilters = {
+ 'Lieux de plantation': $('#lieux-de-plantation').hasClass('filter-active'),
+ 'Acheteur de bois': $('#chaufferies-bois-clients').hasClass('filter-active'),
+ 'Producteur de bois': $('#exploitations-productrices-de-bois-pour-BBE').hasClass('filter-active'),
+ 'Acheteur de chaleur': $('#chaufferies-vente-de-chaleur').hasClass('filter-active'),
+ 'Plateformes logistiques': $('#plateformes-logistiques').hasClass('filter-active'),
+ };
+
+ var filteredMarkers = allMarkers.filter(function(marker) {
+ let popupContent = marker.getPopup().getContent();
+
+ let matchesStatusFilter = Object.keys(statusFilters).some(function(key) {
+ return statusFilters[key] ? popupContent.includes(key) : false;
+ }) || !Object.values(statusFilters).includes(true);
+
+ let matchesAssocieFilter = Object.keys(associeFilters).some(function(key) {
+ return associeFilters[key] ? popupContent.includes(` ${key}`) : false;
+ }) || !Object.values(associeFilters).includes(true);
+
+ let matchesLabelFilter = labelFilters['haie'] && labelFilters['vegetal']
+ ? (popupContent.includes('Label haie') || popupContent.includes('végétal local'))
+ : (labelFilters['haie'] ? popupContent.includes('Label haie')
+ : (labelFilters['vegetal'] ? popupContent.includes('végétal local')
+ : labelFilters['aucun'] ? popupContent.includes('Aucun') : true));
+
+ let matchesDomaineFilter = Object.keys(domaineFilters).some(function(key) {
+ return domaineFilters[key] ? popupContent.includes(key) : false;
+ }) || !Object.values(domaineFilters).includes(true);
+
+ return matchesStatusFilter && matchesAssocieFilter && matchesLabelFilter && matchesDomaineFilter;
+ });
+
+ markersCluster.clearLayers();
+ markersCluster.addLayers(filteredMarkers);
+ }
+
+ function handleFilterClick(filterId, otherFilterIds) {
+ $(filterId).on('click', function() {
+ $(this).toggleClass('filter-active');
+
+ // Ajouter ou retirer button-active seulement si l'élément a la classe wait-button
+ if ($(this).hasClass('wait-button')) {
+ $(this).toggleClass('button-active');
+ }
+
+ if ($(this).hasClass('filter-active')) {
+ if (otherFilterIds && Array.isArray(otherFilterIds)) {
+ otherFilterIds.forEach(function(otherFilterId) {
+ $(otherFilterId).removeClass('filter-active').removeClass('button-active'); // Retire button-active des autres filtres
+ });
+ }
+ }
+
+ filterMarkers(); // Met à jour les marqueurs après le changement de filtre
+ });
+ }
+
+ handleFilterClick('#en-cours', ['#prevu', '#projets-finis']);
+ handleFilterClick('#prevu', ['#en-cours', '#projets-finis']);
+ handleFilterClick('#projets-finis', ['#en-cours', '#prevu']);
+ handleFilterClick('#associe-oui', ['#associe-non']);
+ handleFilterClick('#associe-non', ['#associe-oui']);
+ handleFilterClick('#label-haie', ['#label-aucun']);
+ handleFilterClick('#label-vegetal', ['#label-aucun']);
+
+ handleFilterClick('#lieux-de-plantation', false);
+ handleFilterClick('#chaufferies-bois-clients', false);
+ handleFilterClick('#exploitations-productrices-de-bois-pour-BBE', false);
+ handleFilterClick('#chaufferies-vente-de-chaleur', false);
+ handleFilterClick('#plateformes-logistiques', false);
+
+ // $('#reset-button').on('click', function() {
+ // let allHtmlElement = document.querySelectorAll("*");
+ // allHtmlElement.forEach(htmlElement => {
+ // htmlElement.classList.remove("filter-active");
+ // });
+ // map.setView([48.9000, 0.1000], 9);
+ // addMarkers(initialMarkerData);
+ // });
+});
\ No newline at end of file
diff --git a/hello-world/media/baseline-dark.svg b/hello-world/media/baseline-dark.svg
new file mode 100644
index 0000000..c75359d
--- /dev/null
+++ b/hello-world/media/baseline-dark.svg
@@ -0,0 +1,51 @@
+
diff --git a/hello-world/media/chaufferie_bois_clients.svg b/hello-world/media/chaufferie_bois_clients.svg
new file mode 100644
index 0000000..043221b
--- /dev/null
+++ b/hello-world/media/chaufferie_bois_clients.svg
@@ -0,0 +1,19 @@
+
diff --git a/hello-world/media/chaufferie_vente_chaleur.svg b/hello-world/media/chaufferie_vente_chaleur.svg
new file mode 100644
index 0000000..8ca4f47
--- /dev/null
+++ b/hello-world/media/chaufferie_vente_chaleur.svg
@@ -0,0 +1,19 @@
+
diff --git a/hello-world/media/lieux_de_plantation.svg b/hello-world/media/lieux_de_plantation.svg
new file mode 100644
index 0000000..80ccb44
--- /dev/null
+++ b/hello-world/media/lieux_de_plantation.svg
@@ -0,0 +1,19 @@
+
diff --git a/hello-world/media/logo.png b/hello-world/media/logo.png
new file mode 100644
index 0000000..c34734c
Binary files /dev/null and b/hello-world/media/logo.png differ
diff --git a/hello-world/media/plateformes_logistiques.svg b/hello-world/media/plateformes_logistiques.svg
new file mode 100644
index 0000000..c87b9cf
--- /dev/null
+++ b/hello-world/media/plateformes_logistiques.svg
@@ -0,0 +1,23 @@
+
diff --git a/hello-world/media/producteur_de_bois.svg b/hello-world/media/producteur_de_bois.svg
new file mode 100644
index 0000000..9303efd
--- /dev/null
+++ b/hello-world/media/producteur_de_bois.svg
@@ -0,0 +1,19 @@
+
+ 
+