From 9dd3d4b39ce3732e99163ef28a28ee1759af92a3 Mon Sep 17 00:00:00 2001 From: "florian.llimos" Date: Fri, 15 Nov 2024 16:33:50 +0100 Subject: [PATCH] :fix: push on dev site, rename function, files and folder, and fix some bug --- README.md | 2 +- {hello-world => cartographie}/css/style.css | 140 +++++++------ .../function.php | 108 ++++++---- {hello-world => cartographie}/js/main.js | 192 +++++++++++++----- .../media/baseline-dark.svg | 0 .../media/chaufferie_bois_clients.svg | 0 .../media/chaufferie_bois_clients_actif.svg | 19 ++ .../media/chaufferie_vente_chaleur.svg | 0 .../media/chaufferie_vente_chaleur_actif.svg | 19 ++ .../media/lieux_de_plantation.svg | 0 .../media/lieux_de_plantation_actif.svg | 19 ++ {hello-world => cartographie}/media/logo.png | Bin .../media/plateformes_logistiques.svg | 0 .../media/plateformes_logistiques_actif.svg | 23 +++ .../media/producteur_de_bois.svg | 0 .../media/producteur_de_bois_actif.svg | 19 ++ 16 files changed, 395 insertions(+), 146 deletions(-) rename {hello-world => cartographie}/css/style.css (84%) rename hello-world/hello-world.php => cartographie/function.php (59%) rename {hello-world => cartographie}/js/main.js (56%) rename {hello-world => cartographie}/media/baseline-dark.svg (100%) rename {hello-world => cartographie}/media/chaufferie_bois_clients.svg (100%) create mode 100644 cartographie/media/chaufferie_bois_clients_actif.svg rename {hello-world => cartographie}/media/chaufferie_vente_chaleur.svg (100%) create mode 100644 cartographie/media/chaufferie_vente_chaleur_actif.svg rename {hello-world => cartographie}/media/lieux_de_plantation.svg (100%) create mode 100644 cartographie/media/lieux_de_plantation_actif.svg rename {hello-world => cartographie}/media/logo.png (100%) rename {hello-world => cartographie}/media/plateformes_logistiques.svg (100%) create mode 100644 cartographie/media/plateformes_logistiques_actif.svg rename {hello-world => cartographie}/media/producteur_de_bois.svg (100%) create mode 100644 cartographie/media/producteur_de_bois_actif.svg diff --git a/README.md b/README.md index b53a802..26a8948 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ # cartographie_bbe -Composant pour la cartographie de bbe \ No newline at end of file +https://bois-bocage-energie.agence-appaloosa.fr/carte-interactive-bois-bocage-energie/ \ No newline at end of file diff --git a/hello-world/css/style.css b/cartographie/css/style.css similarity index 84% rename from hello-world/css/style.css rename to cartographie/css/style.css index 6de2c8b..6537fc2 100644 --- a/hello-world/css/style.css +++ b/cartographie/css/style.css @@ -9,10 +9,6 @@ padding: 0; } -.red { - color: red; -} - .bold { font-family: Inter; font-size: 14px; @@ -30,28 +26,6 @@ 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; @@ -72,16 +46,26 @@ /* 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); +.map-full-screen { + height: 100vh !important; + width: 100% !important; + position: fixed !important; + top: 0 !important; + left: 0 !important; + border: none !important; + border-radius: 0 !important; } -.leaflet-verticalcenter.leaflet-left { +.map-container { + width: 100%; + border-radius: 0 0 80px 80px; + border: 2px solid black; + border-top: none; + height: 60vh; + margin-top: 0; +} + +.leaflet-left { position: absolute; left: 10px; top: 50%; @@ -107,6 +91,10 @@ width: 250px !important; } +.leaflet-popup-tip-container { + display: none; +} + .modal-images { display: grid; grid-template-columns: repeat(2, auto); @@ -136,15 +124,18 @@ } .leaflet-popup-content-wrapper { - background-color: lightgray; + background-color: none; transition: 500ms; overflow: hidden; width: 250px !important; + border-radius: 28px; padding: 0; } .leaflet-popup { - position: fixed; + bottom: 7px !important; + left: 50px !important; + top: -180px !important; } .modal-adress { @@ -158,11 +149,6 @@ padding-left: 14px !important; } -.leaflet-popup-content-wrapper { - border-radius: 25px; - background: #ffffff; -} - .modal-green { border: 3px solid #95c11f !important; } @@ -220,29 +206,29 @@ } .modal-border-green { - border: 5px solid #95C11F !important; - border-radius: 25px; + border: 3px solid #95C11F !important; + border-radius: 28px; } .modal-border-yellow { - border: 5px solid #ffc800 !important; - border-radius: 25px; + border: 3px solid #ffc800 !important; + border-radius: 28px; } .modal-border-blue { - border: 5px solid #91a2ff !important; - border-radius: 25px; + border: 3px solid #91a2ff !important; + border-radius: 28px; } .modal-border-red { - border: 5px solid #ff792d !important; - border-radius: 25px; + border: 3px solid #ff792d !important; + border-radius: 28px; } .modal-border-black { - border: 5px solid #634e42 !important; - border-radius: 25px; + border: 3px solid #634e42 !important; + border-radius: 28px; } .modal-associe, .modal-annee, .modal-etat { @@ -259,6 +245,7 @@ .modal-container { padding-bottom: 10px; + background: white; } .modal-name { @@ -301,6 +288,35 @@ /* EOF MODAL & CONTENT */ /* EOF MODAL & CONTENT */ +/* FULL-SCREEN */ +/* FULL-SCREEN */ +/* FULL-SCREEN */ + +#full-screen { + position: absolute; + margin-top: 20px; + margin-left: 20px; + background-color: #95c11f; + border-radius: 50px; + width: 50px; + height: 50px; + z-index: 99999; +} + +#full-screen:hover { + cursor: pointer; + box-shadow: 0 0 15px white; + transition: 500ms; +} + +#full-screen > img { + padding: 10px; +} + +/* EOF FULL-SCREEN */ +/* EOF FULL-SCREEN */ +/* EOF FULL-SCREEN */ + /* FILTER */ /* FILTER */ /* FILTER */ @@ -308,14 +324,13 @@ #container-filter { display: grid; grid-template-columns: [a] 1fr [b] 1fr [c] 1fr [d]; - grid-template-rows: [a] 200px [b] 100px [c]; + grid-template-rows: [a] 200px [b] auto [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); + border-radius: 80px 80px 0 0; padding: 30px; - border-radius: 15px 15px 0 0; + border: 2px solid black; + border-bottom: none; } /* TOGGLE */ @@ -345,6 +360,10 @@ background: none !important; } +#toggle-associe:hover { + cursor: pointer; +} + .toggle-to-anim-enfant { animation-name: toActifEnfant; animation-duration: 1000ms; @@ -415,6 +434,12 @@ /* EOF TOGGLE */ /* EOF TOGGLE */ +@media screen and (max-width: 991px) { + #container-filter { + display: none; + } +} + #container-filter-label-1 { grid-row: b / c; grid-column: b / c; @@ -446,7 +471,7 @@ justify-self: center; align-self: center; width: 100%; - margin-top: 50px; + margin-top: 80px; } h5 { @@ -482,6 +507,7 @@ h5 { font-size : 14px; line-height : 18px; color: #000000; + margin-bottom: 15px !important; } #domaine-button { diff --git a/hello-world/hello-world.php b/cartographie/function.php similarity index 59% rename from hello-world/hello-world.php rename to cartographie/function.php index 578d2f5..131c0ac 100644 --- a/hello-world/hello-world.php +++ b/cartographie/function.php @@ -2,24 +2,24 @@ /** * Hello World * - * @package HelloWorld - * @author Florian Llimos - * @copyright 2024 Florian Llimos + * @package Cartographie + * @author Digitanie + * @copyright 2024 Digitanie * @license GPL-2.0-or-later * * @wordpress-plugin - * Plugin Name: Hello World + * Plugin Name: Cartographie * Plugin URI: https://mehdinazari.com/how-to-create-hello-world-plugin-for-wordpress - * Description: This plugin prints "Hello World" inside an admin page. + * Description: Plugin pour la cartographie. * Version: 1.0.0 - * Author: Florian Llimos - * Author URI: https://florianllimos.fr - * Text Domain: hello-world + * Author: Digitanie + * Author URI: https://digitanie.org + * Text Domain: cartographie * License: GPL v2 or later * License URI: http://www.gnu.org/licenses/gpl-2.0.txt */ -add_shortcode('hello_world_map', 'display_hello_world_page'); +add_shortcode('cartographie', 'display_hello_world_page'); function display_hello_world_page() { ob_start(); @@ -45,7 +45,7 @@ function display_hello_world_page() {
-
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 = ` -