From 5c28f3d139168bc8149b3dc2c0387327bbcde9a6 Mon Sep 17 00:00:00 2001
From: "jean-philippe.bazonnais" <jean-philippe.bazonnais@ign.fr>
Date: Fri, 13 Dec 2024 09:54:14 +0100
Subject: [PATCH] maj demos

---
 demos/esmodule-project/main.js                | 62 +++++++++++++++----
 demos/react-project/src/App.js                | 61 ++++++++++++++----
 .../src/components/MapContainer.vue           | 59 +++++++++++++++---
 3 files changed, 150 insertions(+), 32 deletions(-)

diff --git a/demos/esmodule-project/main.js b/demos/esmodule-project/main.js
index c0c5ff882..62b68078f 100644
--- a/demos/esmodule-project/main.js
+++ b/demos/esmodule-project/main.js
@@ -3,6 +3,7 @@ import {
     Map,
     View
 } from "ol";
+import ScaleLine from 'ol/control/ScaleLine';
 import TileLayer from "ol/layer/Tile";
 import OSM from "ol/source/OSM";
 
@@ -29,7 +30,8 @@ import {
     ReverseGeocode,
     Route,
     SearchEngine,
-    Territories
+    Territories,
+    ControlList
 } from "geopf-extensions-openlayers";
 
 import Gp from "geoportal-access-lib";
@@ -58,6 +60,12 @@ var cfg = new Gp.Services.Config({
             })
         });
         
+        const scaleControl = new ScaleLine({
+            units: 'metric',
+            bar: false,
+        });
+        map.addControl(scaleControl);
+
         var territories = new Territories({
             collapsed: true,
             draggable: true,
@@ -66,7 +74,8 @@ var cfg = new Gp.Services.Config({
             auto: true,
             thumbnail : false,
             reduce: false,
-            tiles: 3
+            tiles: 3,
+            listable: true,
         });
         map.addControl(territories);
 
@@ -134,17 +143,20 @@ var cfg = new Gp.Services.Config({
         map.addControl(catalog);
 
         var drawing = new Drawing({
-            position : "top-left"
+            position : "top-left",
+            listable: true
         });
         map.addControl(drawing);
 
         var iso = new Isocurve({
-            position : "bottom-left"
+            position : "bottom-left",
+            listable: true
         });
         map.addControl(iso);
 
         var layerImport = new LayerImport({
-            position : "bottom-left"
+            position : "bottom-left",
+            listable: true
         });
         map.addControl(layerImport);
 
@@ -161,7 +173,8 @@ var cfg = new Gp.Services.Config({
         map.addControl(mp);
 
         var route = new Route({
-            position : "top-right"
+            position : "top-right",
+            listable: true,
         });
         map.addControl(route);
 
@@ -171,7 +184,24 @@ var cfg = new Gp.Services.Config({
         map.addControl(reverse);
 
         var search = new SearchEngine({
-            position : "top-right"
+            displayButtonAdvancedSearch : true,
+            displayButtonGeolocate : true,
+            displayButtonCoordinateSearch : true,
+            displayButtonClose : false,
+            collapsible : false,
+            resources : {
+              search : true
+            },
+            searchOptions: {
+                addToMap: true,
+                filterServices : "WMTS,WMS,TMS,WFS",
+                filterLayersPriority : "PLAN.IGN,GEOGRAPHICALGRIDSYSTEMS.MAPS.BDUNI.J1,GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2,CADASTRALPARCELS.PARCELLAIRE_EXPRESS,ORTHOIMAGERY.ORTHOPHOTOS",
+                filterWMTSPriority : true,
+                serviceOptions: {
+                    maximumResponses : 20
+                }
+            },
+            markerUrl : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAzNiIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ij48cGF0aCBmaWxsPSIjMDAwMDkxIiBkPSJNMTguMzY0IDMuNjM2YTkgOSAwIDAgMSAwIDEyLjcyOEwxMiAyMi43MjhsLTYuMzY0LTYuMzY0QTkgOSAwIDAgMSAxOC4zNjQgMy42MzZaTTEyIDhhMiAyIDAgMSAwIDAgNCAyIDIgMCAwIDAgMC00WiIvPjwvc3ZnPg=="
         });
         map.addControl(search);
 
@@ -183,22 +213,26 @@ var cfg = new Gp.Services.Config({
         map.addControl(feature);
 
         var measureLength = new MeasureLength({
-            position : "bottom-left"
+            position : "bottom-left",
+            listable: true
         });
         map.addControl(measureLength);
 
         var measureArea = new MeasureArea({
-            position : "bottom-left"
+            position : "bottom-left",
+            listable: true
         });
         map.addControl(measureArea);
 
         var measureAzimuth = new MeasureAzimuth({
-            position : "bottom-left"
+            position : "bottom-left",
+            listable: true
         });
         map.addControl(measureAzimuth);
 
         var measureProfil = new ElevationPath({
-            position : "bottom-left"
+            position : "bottom-left",
+            listable: true
         });
         map.addControl(measureProfil);
 
@@ -206,6 +240,12 @@ var cfg = new Gp.Services.Config({
             position : "bottom-right"
         });
         map.addControl(attributions);
+
+        var controlList = new ControlList({
+            draggable: false,
+            position: "bottom-right"
+        });
+        map.addControl(controlList);
     },
     onFailure : (e) => {
         console.error(e);
diff --git a/demos/react-project/src/App.js b/demos/react-project/src/App.js
index b027af821..561378c48 100644
--- a/demos/react-project/src/App.js
+++ b/demos/react-project/src/App.js
@@ -5,6 +5,7 @@ import React, { useState, useEffect, useRef } from 'react';
 
 import View from 'ol/View';
 import Map from 'ol/Map';
+import ScaleLine from 'ol/control/ScaleLine';
 import TileLayer from 'ol/layer/Tile';
 import OSM from 'ol/source/OSM';
 
@@ -33,7 +34,8 @@ import {
   ReverseGeocode,
   Route,
   SearchEngine,
-  Territories
+  Territories,
+  ControlList
 } from "geopf-extensions-openlayers";
 
 import Gp from "geoportal-access-lib";
@@ -59,7 +61,13 @@ function App() {
     })
   
     CRS.load();
-  
+
+    const scaleControl = new ScaleLine({
+      units: 'metric',
+      bar: false,
+    });
+    map.addControl(scaleControl);
+
     var territories = new Territories({
       collapsed: true,
       draggable: true,
@@ -141,12 +149,14 @@ function App() {
     map.addControl(drawing);
   
     var iso = new Isocurve({
-      position: "bottom-left"
+      position: "bottom-left",
+      listable: true
     });
     map.addControl(iso);
   
     var layerImport = new LayerImport({
-      position: "bottom-left"
+      position: "bottom-left",
+      listable: true
     });
     map.addControl(layerImport);
   
@@ -163,17 +173,36 @@ function App() {
     map.addControl(mp);
   
     var route = new Route({
-      position: "top-right"
+      position: "top-right",
+      listable: true
     });
     map.addControl(route);
   
     var reverse = new ReverseGeocode({
-      position: "top-right"
+      position: "top-right",
+      listable: true
     });
     map.addControl(reverse);
   
     var search = new SearchEngine({
-      position: "top-right"
+            displayButtonAdvancedSearch : true,
+            displayButtonGeolocate : true,
+            displayButtonCoordinateSearch : true,
+            displayButtonClose : false,
+            collapsible : false,
+            resources : {
+              search : true
+            },
+            searchOptions: {
+                addToMap: true,
+                filterServices : "WMTS,WMS,TMS,WFS",
+                filterLayersPriority : "PLAN.IGN,GEOGRAPHICALGRIDSYSTEMS.MAPS.BDUNI.J1,GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2,CADASTRALPARCELS.PARCELLAIRE_EXPRESS,ORTHOIMAGERY.ORTHOPHOTOS",
+                filterWMTSPriority : true,
+                serviceOptions: {
+                    maximumResponses : 20
+                }
+            },
+            markerUrl : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAzNiIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ij48cGF0aCBmaWxsPSIjMDAwMDkxIiBkPSJNMTguMzY0IDMuNjM2YTkgOSAwIDAgMSAwIDEyLjcyOEwxMiAyMi43MjhsLTYuMzY0LTYuMzY0QTkgOSAwIDAgMSAxOC4zNjQgMy42MzZaTTEyIDhhMiAyIDAgMSAwIDAgNCAyIDIgMCAwIDAgMC00WiIvPjwvc3ZnPg=="
     });
     map.addControl(search);
   
@@ -185,28 +214,38 @@ function App() {
     map.addControl(feature);
   
     var measureLength = new MeasureLength({
-      position: "bottom-left"
+      position: "bottom-left",
+      listable: true
     });
     map.addControl(measureLength);
   
     var measureArea = new MeasureArea({
-      position: "bottom-left"
+      position: "bottom-left",
+      listable: true
     });
     map.addControl(measureArea);
 
     var measureAzimuth = new MeasureAzimuth({
-      position: "bottom-left"
+      position: "bottom-left",
+      listable: true
     });
     map.addControl(measureAzimuth);
   
     var measureProfil = new ElevationPath({
-      position: "bottom-left"
+      position: "bottom-left",
+      listable: true
     });
     map.addControl(measureProfil);
   
     var attributions = new GeoportalAttribution();
     map.addControl(attributions);
   
+    var controlList = new ControlList({
+      draggable: false,
+      position: "bottom-right"
+    });
+    map.addControl(controlList);
+
     setMap(map);
   };
 
diff --git a/demos/vue-project/src/components/MapContainer.vue b/demos/vue-project/src/components/MapContainer.vue
index e3d896f66..fa216aabf 100644
--- a/demos/vue-project/src/components/MapContainer.vue
+++ b/demos/vue-project/src/components/MapContainer.vue
@@ -4,6 +4,7 @@ import { onMounted, ref } from 'vue';
 
 import View from 'ol/View';
 import Map from 'ol/Map';
+import ScaleLine from 'ol/control/ScaleLine';
 import TileLayer from 'ol/layer/Tile';
 import OSM from 'ol/source/OSM';
 
@@ -28,7 +29,8 @@ import {
   ReverseGeocode,
   Route,
   SearchEngine,
-  Territories
+  Territories,
+  ControlList
 } from "geopf-extensions-openlayers";
 
 import Gp from "geoportal-access-lib";
@@ -55,6 +57,12 @@ onMounted(() => {
         }),
       });
 
+      const scaleControl = new ScaleLine({
+            units: 'metric',
+            bar: false,
+      });
+      map.addControl(scaleControl);
+
       var territories = new Territories({
                 collapsed: false,
                 draggable: true,
@@ -136,12 +144,14 @@ onMounted(() => {
       map.addControl(zoom);
       
       var iso = new Isocurve({
-        position: "bottom-left"
+        position: "bottom-left",
+        listable: true
       });
       map.addControl(iso);
 
       var layerImport = new LayerImport({
-        position: "bottom-left"
+        position: "bottom-left",
+        listable: true
       });
       map.addControl(layerImport);
 
@@ -158,17 +168,36 @@ onMounted(() => {
       map.addControl(mp);
 
       var route = new Route({
-        position: "top-right"
+        position: "top-right",
+        listable: true
       });
       map.addControl(route);
 
       var reverse = new ReverseGeocode({
-        position: "top-right"
+        position: "top-right",
+        listable: true
       });
       map.addControl(reverse);
 
       var search = new SearchEngine({
-        position: "top-right"
+            displayButtonAdvancedSearch : true,
+            displayButtonGeolocate : true,
+            displayButtonCoordinateSearch : true,
+            displayButtonClose : false,
+            collapsible : false,
+            resources : {
+              search : true
+            },
+            searchOptions: {
+                addToMap: true,
+                filterServices : "WMTS,WMS,TMS,WFS",
+                filterLayersPriority : "PLAN.IGN,GEOGRAPHICALGRIDSYSTEMS.MAPS.BDUNI.J1,GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2,CADASTRALPARCELS.PARCELLAIRE_EXPRESS,ORTHOIMAGERY.ORTHOPHOTOS",
+                filterWMTSPriority : true,
+                serviceOptions: {
+                    maximumResponses : 20
+                }
+            },
+            markerUrl : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAzNiIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ij48cGF0aCBmaWxsPSIjMDAwMDkxIiBkPSJNMTguMzY0IDMuNjM2YTkgOSAwIDAgMSAwIDEyLjcyOEwxMiAyMi43MjhsLTYuMzY0LTYuMzY0QTkgOSAwIDAgMSAxOC4zNjQgMy42MzZaTTEyIDhhMiAyIDAgMSAwIDAgNCAyIDIgMCAwIDAgMC00WiIvPjwvc3ZnPg=="
       });
       map.addControl(search);
 
@@ -180,22 +209,26 @@ onMounted(() => {
       map.addControl(feature);
 
       var measureLength = new MeasureLength({
-        position: "bottom-left"
+        position: "bottom-left",
+        listable: true
       });
       map.addControl(measureLength);
 
       var measureArea = new MeasureArea({
-        position: "bottom-left"
+        position: "bottom-left",
+        listable: true
       });
       map.addControl(measureArea);
 
       var measureAzimuth = new MeasureAzimuth({
-        position: "bottom-left"
+        position: "bottom-left",
+        listable: true
       });
       map.addControl(measureAzimuth);
 
       var measureProfil = new ElevationPath({
-        position: "bottom-left"
+        position: "bottom-left",
+        listable: true
       });
       map.addControl(measureProfil);
 
@@ -203,6 +236,12 @@ onMounted(() => {
         position : "bottom-right"
       });
       map.addControl(attributions);
+
+      var controlList = new ControlList({
+            draggable: false,
+            position: "bottom-right"
+      });
+      map.addControl(controlList);
     },
     onFailure : (e) => {
         console.error(e);