202 lines
10 KiB
JavaScript
202 lines
10 KiB
JavaScript
jQuery(document).ready(function($) {
|
|
var map = L.map('map').setView([48.9000, 0.1000], 9);
|
|
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: 'ArcGIS'
|
|
}).addTo(map);
|
|
|
|
let markersCluster = L.markerClusterGroup();
|
|
let allMarkers = [];
|
|
let initialMarkerData = [];
|
|
function addMarkers(data) {
|
|
markersCluster.clearLayers();
|
|
allMarkers = [];
|
|
const values = Object.values(data);
|
|
for (const item of values) {
|
|
console.log(item);
|
|
let itemNom = item.name;
|
|
let itemDomaine = item.categoriesseries ?? null;
|
|
let itemCodePostal = item.codepstl ?? null;
|
|
let itemAvancement = item.avancementduprojet ?? null;
|
|
let itemAnnee = item.annees ?? null;
|
|
let itemLongitude = item.longitude ?? null;
|
|
let itemVille = item.ville ?? null;
|
|
let itemLatitude = item.latitude ?? null;
|
|
let itemAssocie = item.associe ?? null;
|
|
let itemLabel = item.categorielabel;
|
|
console.log(itemLatitude + " " + itemLongitude);
|
|
console.log(itemLabel);
|
|
if (itemLongitude === null || itemLatitude === null) {
|
|
continue;
|
|
}
|
|
var markerIcon;
|
|
const iconBaseUrl = 'https://sbw1.dgtn.dev/wp-content/uploads/2024/11/';
|
|
const iconSize = [40, 40];
|
|
const iconAnchor = [16, 32];
|
|
const popupAnchor = [0, -32];
|
|
const domaineIcons = {
|
|
"Lieux de plantation": "lieux_de_plantation.svg",
|
|
"Producteur de bois": "producteur_de_bois.svg",
|
|
"Acheteur de bois": "chaufferie_bois_clients.svg",
|
|
"Acheteur de chaleur": "chaufferie_vente_chaleur.svg",
|
|
"Plateformes logistiques": "plateformes_logistiques.svg"
|
|
};
|
|
const iconUrl = domaineIcons[itemDomaine] ? `${iconBaseUrl}${domaineIcons[itemDomaine]}` : null;
|
|
markerIcon = iconUrl
|
|
? new L.Icon({
|
|
iconUrl,
|
|
iconSize,
|
|
iconAnchor,
|
|
popupAnchor
|
|
})
|
|
: new L.Icon.Default();
|
|
var popupContent = `
|
|
${item.photo ? `<img src="${item.photo}" alt="${itemNom}" style="max-width:100%; height:auto;">` : ''}
|
|
<div class="modal-container-header">
|
|
<img src="https://images.pexels.com/photos/27880483/pexels-photo-27880483/free-photo-of-clairiere-terrain-fleurs-voiture.jpeg?auto=compress&cs=tinysrgb&w=400&lazy=load" style="height: 200px; width: 100%; object-fit: cover;">
|
|
<p class='modal-domaine color-white ${itemDomaine === "Lieux de plantation" ? "modal-domaine-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-domaine-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-domaine-black" : ""} ${itemDomaine === "Plateformes logistiques" ? "modal-domaine-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-domaine-red" : ""}'>${itemDomaine}</p>
|
|
</div>
|
|
<div class='modal-container ${itemDomaine === "Lieux de plantation" ? "modal-container-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-container-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-container-black" : ""} ${itemDomaine === "Plateformes logistiques" ? "modal-container-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-container-red" : ""}'>
|
|
<h2 class='modal-name'>${itemNom}</h2>
|
|
<h3 class='modal-adress'>${itemCodePostal} ${itemVille}</h3>
|
|
</div>
|
|
<p class="modal-associe"><span class="bold">${itemAssocie === "Oui" ? "Associé-e BBE" : ""}</span></p>
|
|
<p class="modal-annee">Année : <span class="bold">${itemAnnee}</span></p>
|
|
<p class="modal-etat">État d'avancement : <span class="bold">${itemAvancement}</span></p>
|
|
<p class="none">${itemLabel}</p>
|
|
<img src="" class="modal-label-1">
|
|
<img src="" class="modal-label-2">
|
|
`;
|
|
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);
|
|
// });
|
|
}); |