Merge pull request #442 from IGNF/ticket-704/ajustement

gfi accessible menu context + icon controllist

Author: IGNFhc

DRAFT_CHANGELOG.md

@@ -15,6 +15,8 @@ __DATE__
 
 * ✨ [Added]
 
+  - Contextual Menu : Ajout du getFeatureInfo dans les entrées du menu contextuel (#442)
+
 * 🔨 [Changed]
 
 * 🔥 [Deprecated]

package.json

@@ -1,8 +1,8 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.6",
-  "date": "18/09/2025",
+  "version": "1.0.0-beta.6-442",
+  "date": "22/09/2025",
   "module": "src/index.js",
   "directories": {},
   "engines": {

samples-src/pages/tests/ContextMenu/pages-ol-modules-contextmenu-dsfr.html

@@ -2,6 +2,8 @@
 {{#content "vendor"}}
 <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.css" />
 <script src="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.js"></script>
+<link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlGetFeatureInfo.css" />
+<script src="{{ baseurl }}/dist/modules/GpfExtOlGetFeatureInfo.js"></script>
 <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlIsocurve.css" />
 <script src="{{ baseurl }}/dist/modules/GpfExtOlIsocurve.js"></script>
 <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlLayerImport.css" />
@@ -48,6 +50,7 @@ <h2>Ajout de tous les widgets</h2>
                 })
             });
 
+            
             // 2. Ajout de plusieurs couches différentes.
             var gpMaps = new ol.layer.Tile({
                 source : new ol.source.GeoportalWMTS({
@@ -56,6 +59,35 @@ <h2>Ajout de tous les widgets</h2>
             });
             map.addLayer(gpMaps);
 
+            var gpDrone = new ol.layer.Tile({
+                source : new ol.source.GeoportalWMTS({
+                    layer: "TRANSPORTS.DRONES.RESTRICTIONS"
+                })
+            });
+            map.addLayer(gpDrone);
+
+            var gpMyKml = new ol.layer.Vector({
+                source: new ol.source.Vector({
+                    url: '{{ resources }}/data/kml/S_TOP100.kml',
+                    format: new ol.format.KML()
+                })
+            });
+            map.addLayer(gpMyKml);
+
+            var gpRoad = new ol.layer.Tile({
+                source : new ol.source.GeoportalWMS({
+                    layer: "TN.RoadTransportNetwork"
+                })
+            });
+            map.addLayer(gpRoad);
+
+            var gpHydro = new ol.layer.Tile({
+                source : new ol.source.GeoportalWMS({
+                    layer: "HY.PhysicalWaters"
+                })
+            });
+            map.addLayer(gpHydro);
+
             // 3. Ajout du context menu
             var itemsOpt = [            {
                 text : "Imprimer la carte",
@@ -110,6 +142,10 @@ <h2>Ajout de tous les widgets</h2>
                     auto: true
                 });
                 map.addControl(catalog);
+                var getFeatureInfo = new ol.control.GetFeatureInfo({
+                  position : "bottom-left",
+                });
+                map.addControl(getFeatureInfo);
         };
         Gp.Services.getConfig({
             customConfigFile : "https://data.geopf.fr/annexes/cartes.gouv.fr-config/public/layers.json",

src/packages/CSS/Controls/ControlList/DSFRcontrolListStyle.css

@@ -1,3 +1,11 @@
+/* GET FEATURE INFO */
+
+button[id^="GPshowControlListPicto-"]::after {
+  -webkit-mask: url("img/more-line.svg") center no-repeat;
+  mask: url("img/more-line.svg") center no-repeat;
+  mask-size: 70%;
+}
+
 button[id^="GPshowControlListPicto-"][aria-pressed="true"] + dialog {
   width: 370px;
 }
@@ -9,7 +17,7 @@ div[id^="GPcontrolList-"] {
 div[id^="GPcontrolList-"] .GPshowOpen > span {
   font-size: 32px;
   position: absolute;
-  transform: translate(-5px, -2px);
+  /* transform: translate(-5px, -2px); */
 }
 
 dialog[id^="GPcontrolListPanel-"] .gpf-panel__content {
@@ -75,5 +83,5 @@ dialog[id^="GPcontrolListPanel-"] .gpf-panel__footer > button {
     width: 32px;
     background-color: var(--border-default-grey);
     position: absolute;
-    transform: translate(-7px, -7px);
+    /* transform: translate(-7px, -7px); */
 }

src/packages/CSS/Controls/ControlList/img/more-line.svg

@@ -291,6 +291,12 @@ class ContextMenu extends Control {
      */
     getAvailableContextMenuControls () {
         var allItems = [
+            {
+                text : "Obtenir informations",
+                classname : "ol-context-menu-custom fr-text--md",
+                callback : this.getFeatureInfo.bind(this),
+                control_CLASSNAME : "GetFeatureInfo"
+            },
             {
                 text : "Adresse / Coordonnées",
                 classname : "ol-context-menu-custom fr-text--md",
@@ -414,6 +420,25 @@ class ContextMenu extends Control {
         isocurve.setData(data);
     }
 
+    /**
+     * Fonction qui lance le GFI 
+     * pour les coordonnées sous le clic
+     * 
+     * @param {*} evt event
+     */
+    getFeatureInfo (evt) {
+        var gfi = this.getMap().getControls().getArray().filter(control => control.CLASSNAME == "GetFeatureInfo")[0];
+        gfi.buttonGetFeatureInfoShow.click();
+        gfi.buttonGetFeatureInfoShow.setAttribute("aria-pressed", true);
+        let pixel = this.getMap().getPixelFromCoordinate(evt.coordinate);
+        let fakeEvent = {
+            pixel : pixel,
+            map : this.getMap(),
+            coordinate : evt.coordinate
+        };
+        this.getMap().dispatchEvent({ type : "singleclick", ...fakeEvent });
+    }
+
     /**
      * Fonction qui ouvre le widget des légendes
      * 

src/packages/Controls/ContextMenu/ContextMenu.js

@@ -42,7 +42,6 @@ var ControlListDOM = {
         // INFO: Ajout d'une SPAN pour enlever des marges de 6px dans CHROMIUM (?!)
         var span = document.createElement("span");
         button.appendChild(span);
-        span.innerText = "+";
         button.id = this._addUID("GPshowControlListPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto GPshowControlListPicto gpf-btn gpf-btn--tertiary gpf-btn-icon gpf-btn-icon-controllist fr-btn fr-btn--tertiary";
         button.setAttribute("aria-label", "Tous mes outils");