-
Associé-e BBE
+Associé-e BBE
@@ -67,35 +67,39 @@ function display_hello_world_page() {
+
-
+ Type de projet
- 
+ 
+
Lieux de plantation
- 
+ 
+
Producteur de bois
- 
+ 
+
Acheteur de bois
- 
+ 
+
Acheteur de chaleur
- 
+ 
+
Plateforme logistique
+
+ 
+
post_content, 'hello_world_map')) {
+ if (has_shortcode(get_post()->post_content, 'cartographie')) {
wp_enqueue_style(
'leaflet-css',
'https://unpkg.com/leaflet@1.9.3/dist/leaflet.css',
@@ -153,34 +157,58 @@ function get_cartographie_markers() {
$table_name = $wpdb->prefix . 'posts';
$results = $wpdb->get_results("
- SELECT u3yd_posts.ID, u3yd_posts.post_name, u3yd_term_taxonomy.taxonomy,
- GROUP_CONCAT(u3yd_terms.term_id ORDER BY u3yd_terms.term_id) AS term_ids,
- GROUP_CONCAT(u3yd_terms.name ORDER BY u3yd_terms.term_id) AS term_names
- FROM u3yd_posts
- INNER JOIN u3yd_term_relationships ON u3yd_posts.ID = u3yd_term_relationships.object_id
- INNER JOIN u3yd_term_taxonomy ON u3yd_term_relationships.term_taxonomy_id = u3yd_term_taxonomy.term_taxonomy_id
- INNER JOIN u3yd_terms ON u3yd_term_taxonomy.term_id = u3yd_terms.term_id
- WHERE u3yd_posts.post_status = 'publish'
- AND u3yd_posts.post_type = 'markercartographie'
- GROUP BY u3yd_posts.ID, u3yd_term_taxonomy.taxonomy;
- ");
+ SELECT wp_posts.ID, wp_posts.post_title, wp_term_taxonomy.taxonomy,
+ GROUP_CONCAT(wp_terms.term_id ORDER BY wp_terms.term_id) AS term_ids,
+ GROUP_CONCAT(wp_terms.name ORDER BY wp_terms.term_id) AS term_names
+ FROM wp_posts
+ INNER JOIN wp_term_relationships ON wp_posts.ID = wp_term_relationships.object_id
+ INNER JOIN wp_term_taxonomy ON wp_term_relationships.term_taxonomy_id = wp_term_taxonomy.term_taxonomy_id
+ INNER JOIN wp_terms ON wp_term_taxonomy.term_id = wp_terms.term_id
+ WHERE wp_posts.post_status = 'publish'
+ AND wp_posts.post_type = 'markercartographie'
+ GROUP BY wp_posts.ID, wp_term_taxonomy.taxonomy;
+");
- $structured_data = [];
+$structured_data = [];
- foreach ($results as $row) {
- if(!isset($structured_data[$row->ID])){
- $structured_data[$row->ID] = [
- 'name' => $row->post_name,
- ];
- }
- if ($row->taxonomy == "categorielabel") {
- $structured_data[$row->ID][$row->taxonomy] = explode(",", $row->term_names);
- } else {
- $structured_data[$row->ID][$row->taxonomy] = $row->term_names;
- }
+$image_results = $wpdb->get_results("
+ SELECT wp_posts.ID, wp_postmeta.meta_value AS image_id, image_posts.guid AS image_url
+ FROM wp_posts
+ LEFT JOIN wp_postmeta ON wp_posts.ID = wp_postmeta.post_id AND wp_postmeta.meta_key = '_thumbnail_id'
+ LEFT JOIN wp_posts AS image_posts ON wp_postmeta.meta_value = image_posts.ID
+ WHERE wp_posts.post_status = 'publish'
+ AND wp_posts.post_type = 'markercartographie';
+");
+$image_data = [];
+foreach ($image_results as $image_row) {
+ $image_data[$image_row->ID] = [
+ 'image_id' => $image_row->image_id,
+ 'image_url' => $image_row->image_url,
+ ];
+}
+
+foreach ($results as $row) {
+ if (!isset($structured_data[$row->ID])) {
+ $structured_data[$row->ID] = [
+ 'name' => $row->post_title,
+ ];
}
+ // Ajouter les termes (taxonomies)
+ if ($row->taxonomy == "categorielabel") {
+ $structured_data[$row->ID][$row->taxonomy] = explode(",", $row->term_names);
+ } else {
+ $structured_data[$row->ID][$row->taxonomy] = $row->term_names;
+ }
+
+ // Ajouter l'image mise en avant si elle existe
+ if (isset($image_data[$row->ID])) {
+ $structured_data[$row->ID]['image'] = $image_data[$row->ID];
+ }
+}
+
return $structured_data;
+
}
\ No newline at end of file
diff --git a/hello-world/js/main.js b/cartographie/js/main.js
similarity index 56%
rename from hello-world/js/main.js
rename to cartographie/js/main.js
index 2a96d00..ff5df78 100644
--- a/hello-world/js/main.js
+++ b/cartographie/js/main.js
@@ -1,20 +1,37 @@
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'
+ 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: '© OpenStreetMap contributors'
}).addTo(map);
- let markersCluster = L.markerClusterGroup();
+ var markersCluster = L.markerClusterGroup({
+ spiderfyOnMaxZoom: false,
+ showCoverageOnHover: false,
+ iconCreateFunction: function(cluster) {
+ return L.divIcon({
+ html: '
+ ' + cluster.getChildCount() + '
',
+ className: 'mycluster',
+ iconSize: L.point(40, 40)
+ });
+ }
+ });
+
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;
+ var itemDomaine = item.categoriesseries ?? null;
let itemCodePostal = item.codepstl ?? null;
let itemAvancement = item.avancementduprojet ?? null;
let itemAnnee = item.annees ?? null;
@@ -22,26 +39,28 @@ jQuery(document).ready(function($) {
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);
+ let itemLabel = item.categorielabel ?? null;
+ let itemPhoto = item.image.image_url ?? null;
+
if (itemLongitude === null || itemLatitude === null) {
continue;
}
- var markerIcon;
- const iconBaseUrl = 'https://sbw1.dgtn.dev/wp-content/uploads/2024/11/';
- const iconSize = [40, 40];
+
+ 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",
- "Plateformes logistiques": "plateformes_logistiques.svg"
+ "Plateforme logistique": "plateformes_logistiques.svg"
};
- const iconUrl = domaineIcons[itemDomaine] ? `${iconBaseUrl}${domaineIcons[itemDomaine]}` : null;
- markerIcon = iconUrl
+
+ let iconUrl = domaineIcons[itemDomaine] ? `${iconBaseUrl}${domaineIcons[itemDomaine]}` : null;
+ let defaultIcon = iconUrl
? new L.Icon({
iconUrl,
iconSize,
@@ -49,29 +68,27 @@ jQuery(document).ready(function($) {
popupAnchor
})
: new L.Icon.Default();
- let imageUrl = '';
-
+
let imageUrls = [];
-
+
if (Array.isArray(itemLabel)) {
if (itemLabel.includes("Label haie") && itemLabel.includes("Label végétal local")) {
- imageUrls.push('https://sbw1.dgtn.dev/wp-content/plugins/hello-world/media/logo.png');
- imageUrls.push('https://sbw1.dgtn.dev/wp-content/plugins/hello-world/media/baseline-dark.svg');
+ 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('https://sbw1.dgtn.dev/wp-content/plugins/hello-world/media/baseline-dark.svg');
+ imageUrls.push('/wp-content/plugins/cartographie/media/baseline-dark.svg');
} else if (itemLabel.includes("Label végétal local")) {
- imageUrls.push('https://sbw1.dgtn.dev/wp-content/plugins/hello-world/media/logo.png');
+ imageUrls.push('/wp-content/plugins/cartographie/media/logo.png');
}
}
-
+
let popupContent = `
-
- ${item.photo ? `
` : ''}
+
`;
-
- 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;
+
+ 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
+ });
- function createCorner(vSide, hSide) {
- var className = l + vSide + ' ' + l + hSide;
- corners[vSide + hSide] = L.DomUtil.create('div', className, container);
+ // 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]
+ });
}
- createCorner('verticalcenter', 'left');
+ });
+
+ // 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);
}
- addControlPlaceholders(map);
- map.zoomControl.setPosition('verticalcenterleft');
- L.control.scale({position: 'verticalcenterleft'}).addTo(map);
- markersCluster.addLayers(allMarkers);
+
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',
@@ -141,7 +229,7 @@ jQuery(document).ready(function($) {
'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'),
+ 'Plateforme logistique': $('#plateformes-logistiques').hasClass('filter-active'),
};
var filteredMarkers = allMarkers.filter(function(marker) {
@@ -223,4 +311,12 @@ jQuery(document).ready(function($) {
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();
+ });
+
});
\ No newline at end of file
diff --git a/hello-world/media/baseline-dark.svg b/cartographie/media/baseline-dark.svg
similarity index 100%
rename from hello-world/media/baseline-dark.svg
rename to cartographie/media/baseline-dark.svg
diff --git a/hello-world/media/chaufferie_bois_clients.svg b/cartographie/media/chaufferie_bois_clients.svg
similarity index 100%
rename from hello-world/media/chaufferie_bois_clients.svg
rename to cartographie/media/chaufferie_bois_clients.svg
diff --git a/cartographie/media/chaufferie_bois_clients_actif.svg b/cartographie/media/chaufferie_bois_clients_actif.svg
new file mode 100644
index 0000000..e90eea3
--- /dev/null
+++ b/cartographie/media/chaufferie_bois_clients_actif.svg
@@ -0,0 +1,19 @@
+
diff --git a/hello-world/media/chaufferie_vente_chaleur.svg b/cartographie/media/chaufferie_vente_chaleur.svg
similarity index 100%
rename from hello-world/media/chaufferie_vente_chaleur.svg
rename to cartographie/media/chaufferie_vente_chaleur.svg
diff --git a/cartographie/media/chaufferie_vente_chaleur_actif.svg b/cartographie/media/chaufferie_vente_chaleur_actif.svg
new file mode 100644
index 0000000..c3f6d37
--- /dev/null
+++ b/cartographie/media/chaufferie_vente_chaleur_actif.svg
@@ -0,0 +1,19 @@
+
diff --git a/hello-world/media/lieux_de_plantation.svg b/cartographie/media/lieux_de_plantation.svg
similarity index 100%
rename from hello-world/media/lieux_de_plantation.svg
rename to cartographie/media/lieux_de_plantation.svg
diff --git a/cartographie/media/lieux_de_plantation_actif.svg b/cartographie/media/lieux_de_plantation_actif.svg
new file mode 100644
index 0000000..3821b67
--- /dev/null
+++ b/cartographie/media/lieux_de_plantation_actif.svg
@@ -0,0 +1,19 @@
+
diff --git a/hello-world/media/logo.png b/cartographie/media/logo.png
similarity index 100%
rename from hello-world/media/logo.png
rename to cartographie/media/logo.png
diff --git a/hello-world/media/plateformes_logistiques.svg b/cartographie/media/plateformes_logistiques.svg
similarity index 100%
rename from hello-world/media/plateformes_logistiques.svg
rename to cartographie/media/plateformes_logistiques.svg
diff --git a/cartographie/media/plateformes_logistiques_actif.svg b/cartographie/media/plateformes_logistiques_actif.svg
new file mode 100644
index 0000000..53a1bca
--- /dev/null
+++ b/cartographie/media/plateformes_logistiques_actif.svg
@@ -0,0 +1,23 @@
+
diff --git a/hello-world/media/producteur_de_bois.svg b/cartographie/media/producteur_de_bois.svg
similarity index 100%
rename from hello-world/media/producteur_de_bois.svg
rename to cartographie/media/producteur_de_bois.svg
diff --git a/cartographie/media/producteur_de_bois_actif.svg b/cartographie/media/producteur_de_bois_actif.svg
new file mode 100644
index 0000000..f823a29
--- /dev/null
+++ b/cartographie/media/producteur_de_bois_actif.svg
@@ -0,0 +1,19 @@
+
- 
- 
+
-
- ${itemDomaine}
+${itemDomaine}
+
@@ -84,30 +101,101 @@ jQuery(document).ready(function($) {