322 lines
15 KiB
JavaScript
322 lines
15 KiB
JavaScript
jQuery(document).ready(function($) {
|
|
var map = L.map('map', {
|
|
center: [48.577742, 0.060471],
|
|
zoom: 8,
|
|
maxZoom: 18,
|
|
minZoom: 8
|
|
});
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
var markersCluster = L.markerClusterGroup({
|
|
spiderfyOnMaxZoom: false,
|
|
showCoverageOnHover: false,
|
|
iconCreateFunction: function(cluster) {
|
|
return L.divIcon({
|
|
html: '<div style="background-color: #95c11f; padding: 10px; text-align: center; border-radius: 100%; box-shadow: 0 0 15px #e5c732; font-weight: bold;"><span>' + cluster.getChildCount() + '</span></div>',
|
|
className: 'mycluster',
|
|
iconSize: L.point(40, 40)
|
|
});
|
|
}
|
|
});
|
|
|
|
let allMarkers = [];
|
|
|
|
function addMarkers(data) {
|
|
markersCluster.clearLayers();
|
|
allMarkers = [];
|
|
const values = Object.values(data);
|
|
|
|
for (const item of values) {
|
|
let itemNom = item.name;
|
|
var 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 ?? null;
|
|
let itemPhoto = item.image.image_url ?? null;
|
|
|
|
if (itemLongitude === null || itemLatitude === null) {
|
|
continue;
|
|
}
|
|
|
|
const iconBaseUrl = '/wp-content/plugins/cartographie/media/';
|
|
const iconSize = [50, 50];
|
|
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",
|
|
"Plateforme logistique": "plateformes_logistiques.svg"
|
|
};
|
|
|
|
let iconUrl = domaineIcons[itemDomaine] ? `${iconBaseUrl}${domaineIcons[itemDomaine]}` : null;
|
|
let defaultIcon = iconUrl
|
|
? new L.Icon({
|
|
iconUrl,
|
|
iconSize,
|
|
iconAnchor,
|
|
popupAnchor
|
|
})
|
|
: new L.Icon.Default();
|
|
|
|
let imageUrls = [];
|
|
|
|
if (Array.isArray(itemLabel)) {
|
|
if (itemLabel.includes("Label haie") && itemLabel.includes("Label végétal local")) {
|
|
imageUrls.push('/wp-content/plugins/cartographie/media/logo.png');
|
|
imageUrls.push('/wp-content/plugins/cartographie/media/baseline-dark.svg');
|
|
} else if (itemLabel.includes("Label haie")) {
|
|
imageUrls.push('/wp-content/plugins/cartographie/media/baseline-dark.svg');
|
|
} else if (itemLabel.includes("Label végétal local")) {
|
|
imageUrls.push('/wp-content/plugins/cartographie/media/logo.png');
|
|
}
|
|
}
|
|
|
|
let popupContent = `
|
|
<div class='modal-container ${itemDomaine === "Lieux de plantation" ? "modal-border-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-border-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-border-black" : ""} ${itemDomaine === "Plateforme logistique" ? "modal-border-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-border-red" : ""}'>
|
|
<div class="modal-container-header">
|
|
<img src="${itemPhoto}" 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 === "Plateforme logistique" ? "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 === "Plateforme logistique" ? "modal-container-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-container-red" : ""}' style='padding-top: 10px;'>
|
|
<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>
|
|
<div class="modal-images">
|
|
${imageUrls.map(url => `<img src="${url}" alt="Label Image">`).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
let marker = L.marker([itemLatitude, itemLongitude], { icon: defaultIcon })
|
|
.bindPopup(popupContent, {
|
|
autoPan: true, // Active le recadrage automatique
|
|
autoPanPadding: [200, 30], // Définit le padding autour du popup
|
|
keepInView: true // Assure que le popup reste visible à l'écran
|
|
});
|
|
|
|
// Ajout du comportement dynamique lors de l'ouverture de la popup
|
|
marker.on('popupopen', function (e) {
|
|
const popup = e.popup;
|
|
const mapBounds = map.getBounds();
|
|
const popupPosition = popup.getLatLng();
|
|
|
|
// Ajuste les marges dynamiques
|
|
const autoPanPadding = {
|
|
top: 100, // 100px depuis le haut
|
|
bottom: 50, // 50px depuis le bas
|
|
left: 200, // 50px à gauche
|
|
right: 200 // 50px à droite
|
|
};
|
|
|
|
// Vérifie si le popup est hors de la vue et recadre la carte
|
|
if (!mapBounds.contains(popupPosition)) {
|
|
map.panTo(popupPosition, {
|
|
paddingTopLeft: [autoPanPadding.left, autoPanPadding.top],
|
|
paddingBottomRight: [autoPanPadding.right, autoPanPadding.bottom]
|
|
});
|
|
}
|
|
});
|
|
|
|
// Gestion de l'icône active lors de l'ouverture et de la fermeture de la popup
|
|
marker.on('popupopen', function () {
|
|
marker.setIcon(activeMarkerIcon);
|
|
});
|
|
|
|
marker.on('popupclose', function () {
|
|
marker.setIcon(defaultIcon);
|
|
});
|
|
|
|
// Ajout du marqueur au cluster
|
|
allMarkers.push(marker);
|
|
markersCluster.addLayer(marker);
|
|
|
|
|
|
let activeIconUrl = '';
|
|
if (itemDomaine === "Lieux de plantation") {
|
|
activeIconUrl = '/wp-content/plugins/cartographie/media/lieux_de_plantation_actif.svg';
|
|
} else if (itemDomaine === "Producteur de bois"){
|
|
activeIconUrl = '/wp-content/plugins/cartographie/media/producteur_de_bois_actif.svg';
|
|
} else if (itemDomaine === "Acheteur de bois"){
|
|
activeIconUrl = '/wp-content/plugins/cartographie/media/chaufferie_bois_clients_actif.svg';
|
|
} else if (itemDomaine === "Acheteur de chaleur"){
|
|
activeIconUrl = '/wp-content/plugins/cartographie/media/chaufferie_vente_chaleur_actif.svg';
|
|
} else if (itemDomaine === "Plateforme logistique"){
|
|
activeIconUrl = '/wp-content/plugins/cartographie/media/plateformes_logistiques_actif.svg';
|
|
}
|
|
|
|
let activeMarkerIcon = new L.Icon({
|
|
iconUrl: activeIconUrl,
|
|
iconSize: [50, 50],
|
|
iconAnchor: [16, 32],
|
|
popupAnchor: [0, -32]
|
|
});
|
|
|
|
allMarkers.push(marker);
|
|
markersCluster.addLayer(marker);
|
|
}
|
|
|
|
map.addLayer(markersCluster);
|
|
}
|
|
|
|
let btnFullScreen = document.querySelector("#full-screen");
|
|
let theMap = document.querySelector("#map");
|
|
|
|
function mapFullScreen() {
|
|
if (!theMap.classList.contains("map-full-screen")) {
|
|
theMap.classList.add("map-full-screen");
|
|
document.querySelector("#full-screen > img").src = "https://cdn-icons-png.flaticon.com/128/1828/1828778.png";
|
|
document.querySelector("#full-screen > img").style.padding = "15px";
|
|
|
|
// Redimensionner la carte Leaflet après être passé en plein écran
|
|
map.invalidateSize(); // Demande à Leaflet de recalculer la taille de la carte
|
|
} else if (theMap.classList.contains("map-full-screen")) {
|
|
theMap.classList.remove("map-full-screen");
|
|
document.querySelector("#full-screen > img").src = "https://cdn-icons-png.flaticon.com/128/3413/3413667.png";
|
|
document.querySelector("#full-screen > img").style.padding = "10px";
|
|
|
|
// Redimensionner la carte Leaflet après avoir quitté le plein écran
|
|
map.invalidateSize();
|
|
}
|
|
}
|
|
|
|
btnFullScreen.addEventListener("click", mapFullScreen);
|
|
|
|
$.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 associeFilterActive = $('#toggle-associe').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'),
|
|
'Plateforme logistique': $('#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 = associeFilterActive ? popupContent.includes('Associé-e BBE') : 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');
|
|
|
|
if ($(this).hasClass('wait-button')) {
|
|
$(this).toggleClass('button-active');
|
|
}
|
|
|
|
if ($(this).hasClass('filter-active') && otherFilterIds && Array.isArray(otherFilterIds)) {
|
|
otherFilterIds.forEach(function(otherFilterId) {
|
|
$(otherFilterId).removeClass('filter-active button-active');
|
|
});
|
|
}
|
|
|
|
filterMarkers();
|
|
});
|
|
}
|
|
|
|
function handleToggleClick(toggleId) {
|
|
$(toggleId).on('click', function() {
|
|
const parentElement = document.querySelector(toggleId);
|
|
const childElement = document.querySelector(`${toggleId} > div`);
|
|
|
|
if ($(this).toggleClass('filter-active').hasClass('filter-active')) {
|
|
parentElement.classList.remove("toggle-to-anim-parent-reverse");
|
|
childElement.classList.remove("toggle-to-anim-enfant-reverse");
|
|
parentElement.classList.add("toggle-to-anim-parent");
|
|
childElement.classList.add("toggle-to-anim-enfant");
|
|
} else {
|
|
parentElement.classList.remove("toggle-to-anim-parent");
|
|
childElement.classList.remove("toggle-to-anim-enfant");
|
|
parentElement.classList.add("toggle-to-anim-parent-reverse");
|
|
childElement.classList.add("toggle-to-anim-enfant-reverse");
|
|
}
|
|
|
|
filterMarkers();
|
|
});
|
|
}
|
|
|
|
handleFilterClick('#en-cours', ['#prevu', '#projets-finis']);
|
|
handleFilterClick('#prevu', ['#en-cours', '#projets-finis']);
|
|
handleFilterClick('#projets-finis', ['#en-cours', '#prevu']);
|
|
handleToggleClick('#toggle-associe');
|
|
|
|
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);
|
|
|
|
map.scrollWheelZoom.disable();
|
|
map.on('click', () => {
|
|
map.scrollWheelZoom.enable();
|
|
});
|
|
map.on('mouseout', () => {
|
|
map.scrollWheelZoom.disable();
|
|
});
|
|
|
|
}); |