galerie photo map + link

config/sync/page_manager.page_variant.node_view-panels_variant-3.yml

@@ -8,6 +8,7 @@ dependencies:
     - ctools_block
     - node
     - panels
+    - q2d_mod
 id: node_view-panels_variant-3
 label: 'Galeries Photo'
 weight: 0
@@ -193,6 +194,19 @@ variant_settings:
         - ''
       html_id: ''
       css_styles: ''
+    1d37c481-092d-460a-ac84-3283c44147ae:
+      id: galeriephotomap_block
+      label: 'Galerie Photo map Block'
+      label_display: '0'
+      provider: q2d_mod
+      context_mapping: {  }
+      region: first
+      weight: 0
+      uuid: 1d37c481-092d-460a-ac84-3283c44147ae
+      css_classes:
+        - ''
+      html_id: ''
+      css_styles: ''
   page_title: ''
   layout: layout_threecol_25_50_25
   layout_settings:

web/modules/custom/q2d_mod/q2d_mod.module

@@ -16,5 +16,8 @@ function q2d_mod_theme() {
     'svg_mapprojets' => array(
       'variables' => array('vpw' => null, 'vph' => null, 'sites' => [], 'label' => null),
     ),
+    'svg_mapgaleries' => array(
+      'variables' => array('vpw' => null, 'vph' => null, 'sites' => [], 'label' => null),
+    ),
   );
 }

web/modules/custom/q2d_mod/src/Plugin/Block/GaleriePhotoMap.php

@@ -0,0 +1,139 @@
+<?php
+
+namespace Drupal\q2d_mod\Plugin\Block;
+
+use Drupal\Core\Block\BlockBase;
+use Drupal\Core\Block\Attribute\Block;
+// use Drupal\Core\StringTranslation\TranslatableMarkup;
+use Drupal\Core\Url;
+use Drupal\Core\Link;
+use Drupal\Core\Render\Markup;
+
+/**
+ * Provides a 'Sites Map' Block.
+ * @Block(
+ *   id = "galeriephotomap_block",
+ *   admin_label = @Translation("Galerie Photo map Block"),
+ * )
+ */
+class GaleriePhotoMap extends BlockBase {
+ 
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
+
+    $return = null;
+
+    $allSites = \Drupal::entityTypeManager()->getStorage('node')
+          ->loadByProperties(['type' => 'site', 'status' => 1]);
+  
+    $sites_paths = "";
+
+    $vp_w = 600;
+    $vp_h = 600;
+
+    // Coordonnées géographiques des coins de la carte (France)
+    $latTop = 52.0; // Nord-Ouest (coin supérieur gauche)
+    $lonLeft = -6.0;
+    $latBottom = 40.0; // Sud-Est (coin inférieur droit)
+    $lonRight = 11.0;
+    
+    
+    foreach($allSites as $index => $site){
+      $langcode = \Drupal::languageManager()->getCurrentLanguage()->getId();
+      
+      
+      // /ressources?field_type_de_ressource_target_id[]=17&combine=&field_tous_les_sites_value=All&field_site_target_id_verf[]=37
+      $query = [
+        'field_type_de_ressource_target_id[]' => 17, # fixed to galeries_photos
+        'combine' => '',
+        'field_tous_les_sites_value' => 'All',
+        'field_site_target_id_verf[]' => $site->id(),
+      ];
+      $url = Url::fromRoute('view.ressources.page_1', [], ['query' => $query])->toString();
+      
+
+      // $title = $site->get('title')->getString();
+      $title = $site->hasTranslation($language) ? $site->getTranslation($language)->get('title')->getString() : $site->get('title')->getString();
+      // $subtitle = $site->get('field_sous_titre')->getString();
+      $subtitle = $site->hasTranslation($language) ? $site->getTranslation($language)->get('field_sous_titre')->getString() : $site->get('field_sous_titre')->getString();
+
+      $link_options = ['absolute' => TRUE, 'attributes' => ['class' => 'ressource-link'], 'language' => \Drupal::languageManager()->getLanguage($langcode)]; // Passer 'absolute' à TRUE
+      // $site_url = $site->toUrl('canonical', $link_options)->toString(); // URL absolue pour le data-url
+      $site_link_object = Link::createFromRoute(t("Voir le site"), 'entity.node.canonical', ['node' => $site->id()], $link_options);
+      $link = $site_link_object->toString()->getGeneratedLink();
+
+      $datacontent = htmlspecialchars("<strong>$title</strong><br>$subtitle<br>$link");      
+
+      $geofield = $site->get('field_geofield')->get(0);
+      $lon = $geofield->lon;
+      $lat = $geofield->lat;
+      $geofieldData = "$lon,$lat"; // Utiliser une chaîne pour stocker la position
+
+      $x = round(($lon - $lonLeft) / ($lonRight - $lonLeft) * $vp_w);
+      $y = round(($latTop - $lat) / ($latTop - $latBottom) * $vp_h);
+
+      $r = 12;
+      $m = -$r/1.5+3;
+      $l = $r/1.5 +2.5;
+      $sites_paths .= <<<SVGSITEPATH
+      <g 
+        id="site-$index"
+        data-geofield="$geofieldData"
+        transform="translate($x,$y)"
+        style="cursor: pointer;"  <!-- Change le curseur pour indiquer l'interaction -->
+      >
+          <a href="$url">
+            <rect width="10" height="10" transform="translate($x,$y)" fill="none" onclick="handleCircleClick('$datacontent')"></rect>
+           <!-- Zone d'interaction invisible -->
+         
+            <circle
+            class="site-link"
+            data-content="$datacontent" 
+            data-url="$url"
+            cx="0" cy="0" r="$r"
+            style="fill-opacity:1;fill-rule:nonzero;" />
+          <path
+            id="path84"
+            d="m 0,$m v $l"
+            style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
+          <path
+            id="path85"
+            d="m $m,0 h $l"
+            style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
+          </a> 
+      </g>
+      SVGSITEPATH;
+    }
+    
+
+    $return = [
+      '#cache' => [
+        'max-age' => 0,
+      ],
+      'svg_mapsites' => [
+        '#theme' => 'svg_mapgaleries',
+        '#label' => "Voir les autres galeries photos",
+        '#sites' => $sites_paths,
+        '#vpw' => $vp_w,
+        '#vph' => $vp_h,
+        '#attached' => [
+          'library' => [
+            'q2d_mod/sites_map_block',
+          ],
+        ],
+      ]
+    ];
+
+    return $return;
+    // return [
+    //   '#markup' => $this->t('Hello, Sites Map!'),
+    // ];
+  }
+  
+  public function getCacheMaxAge() {
+    return 0;
+  }
+}

web/modules/custom/q2d_mod/templates/svg-mapgaleries.html.twig

@@ -0,0 +1,55 @@
+<div id="sites-map-container">
+
+  <h2>{{label}}</h2>  
+
+  {# <svg {{ svg_attributes }}>
+    <path {{ path_attributes }}></path>
+  </svg> #}
+  <svg
+      width="100%"
+      height="auto"
+      viewBox="0 0 {{ vpw }} {{ vph }}"
+      version="1.1"
+      id="svg1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:svg="http://www.w3.org/2000/svg">
+
+      <g
+        id="layer1"
+        width="auto"
+      height="100%"
+              transform="
+          translate(-34,-43)
+          scale(3 3)"
+        > 
+        <g
+          id="g87"
+          transform="matrix(0.26458333,0,0,0.26458333,-117.12499,-462.76799)"
+          >
+          <path
+            d="M 22.94948,0 24.34889,-18.0149 0,-25.72302 5.65439,-72.56693 20.36713,-85.65977 31.67962,-51.59929 30.80613,-4.91625 Z"
+            style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+            transform="matrix(1.3333333,0,0,-1.3333333,1086.6494,2370.4282)"
+            id="path86" />
+          <path
+            d="M 213.91022,-8.56159 245.88833,0 c 0,0 58.73522,-78.05274 188.63529,-102.77609 0,0 -13.72994,-23.9062 -20.7684,-68.77233 l -46.76509,-59.13289 22.59883,4.10628 9.98215,-59.15478 -15.22238,-6.69194 c 0,0 21.10627,-42.02694 33.11738,-51.15904 l -49.61728,-51.89156 c 0,0 -54.37257,40.3184 -83.08495,23.05862 -26.13166,-16.38332 -20.26669,-47.73592 -20.26669,-47.73592 l -84.48157,7.5286 -73.42912,23.87167 c 0,0 13.68285,68.86637 13.5616,120.85908 l 13.70164,-16.03089 -8.31311,25.90453 c -7.71795,24.04996 -30.44003,42.76792 -30.59939,44.58536 -3.6948,42.13802 -38.37183,51.8082 -82.82932,56.0101 L 0,-120.94655 l 48.38804,11.38921 63.90371,-13.15789 c 0,0 -1.62874,19.5427 -17.78042,51.54499 l 20.25382,7.61331 c 0,0 16.51357,-27.83033 25.80184,-26.51089 4.8781,0.69253 23.95695,21.70897 32.12568,26.76126 7.32295,4.5292 35.79484,10.58956 36.55389,13.534 2.94469,10.87069 4.66366,41.21097 4.66366,41.21097 z"
+            style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+            transform="matrix(1.3333333,0,0,-1.3333333,543.93475,1857.6088)"
+            id="path87" />
+        </g>
+      </g>
+      <g
+        id="layer2">
+          {{ sites|raw }}
+      </g>
+    </svg>
+
+    <!-- Fond du modal -->
+    <div id="modal-background" class="modal-background"></div>
+
+    <!-- Popup -->
+    <div id="popup" class="popup">
+      <p id="popup-content">Hello! I am a popup!</p>
+      <!--<button onclick="closePopup()">Close</button>-->
+    </div>
+</div>