refactor(geo): Set hybrid mode as default to use gv-layers class (#2620)

* refactor(geo): Set hybrid mode as default to use gv-layers class
Closes #2617

* Start cleaning geoview-layers

* progress

* Cont cleaning

* rebase

* Rebase

* rebase 3 pr

* rebase and fix remove layer

* fix doc and zoom extent

* fix comment

---------

Co-authored-by: jolevesq <[email protected]>

packages/geoview-core/public/locales/en/guide.md

@@ -209,6 +209,8 @@ The _Layers_ tab has the following submenu options:
 
 #### ![]({{assetsURL}}/img/guide/footer/view_25.svg) View
 
+_**Note: Click on a layer to display its Layer information in the right section.**_
+
 The _View_ submenu option under the _Layers_ tab consists of two sections. The left section lists all the layers displayed on the map. Click on a layer and the right section lists will show the layer settings (available options for that layer).
 
 **Layer Icons**
@@ -297,10 +299,10 @@ To remove a layer, click on the delete icon ![]({{assetsURL}}/img/guide/layers/r
 <a id="detailsSection"></a>
 ### ![]({{assetsURL}}/img/guide/sidebar/details_30.svg) Details [Top](#footerSection)
 
-The **Details** tab has two sections. The available layers for the map are listed in the left section, and the feature details for each layer are displayed in the right section.
-
 _**Note: A feature on the map must be selected to enable the layer in the list. Otherwise layers are disabled (greyed out).**_
 
+The **Details** tab has two sections. The available layers for the map are listed in the left section, and the feature details for each layer are displayed in the right section.
+
 Click on a layer to see its feature details.
 
 The number of features for the selected layer is shown in the upper left of the details section.
@@ -316,6 +318,8 @@ Check the highlight box ![]({{assetsURL}}/img/guide/layers/check.png) to keep th
 <a id="dataTableSection"></a>
 ### ![]({{assetsURL}}/img/guide/footer/data_table.svg) Data Table [Top](#footerSection)
 
+_**Note: Click on a layer to display its Data Table information in the right section.**_
+
 The **Data Table** tab has two sections. The layers are listed on the left and the layer data on the right. Click on a layer to show the layer data in the table on the right.
 
 **Data Table Controls**
@@ -398,7 +402,9 @@ To access the buttons and/or input fields within a cell, make sure the cell is h
 <a id="timeSliderSection"></a>
 ### ![]({{assetsURL}}/img/guide/footer/time_slider_30.svg) Time Slider [Top](#footerSection)
 
-The Time Slider tab on the Footer Bar has two sections. Layers with a time dimension are listed in the left section. Click on a layer to display its Time Slider in the right section:
+_**Note: Click on a layer to display its Time Slider information in the right section.**_
+
+The Time Slider tab on the Footer Bar has two sections. Layers with a time dimension are listed in the left section.
 
 The Time Slider section displays a slider bar with one or two draggable handles. A point in time layer will show one handle. A time period layer will show two handles, to adjust the start and end time of the period.
 
@@ -419,10 +425,10 @@ The field being filtered on is displayed in the lower left of the Time Slider se
 <a id="chartSection"></a>
 ### ![]({{assetsURL}}/img/guide/footer/chart_30.svg) Chart [Top](#footerSection)
 
-The Chart tab on the Footer Bar has two sections. Layers with a chart are listed in the left section. Select a feature on the map to display its chart in the right section.
-
 _**Note: A feature on the map must be selected to enable the layer in the list. Otherwise layers are disabled (greyed out).**_
 
+The Chart tab on the Footer Bar has two sections. Layers with a chart are listed in the left section. Select a feature on the map to display its chart in the right section.
+
 The Feature dropdown (upper left of the chart section), can be used to select a feature. This is useful when features are close together on the map, making it difficult to click on the desired one.
 
 The visibility of data displayed on the chart can be toggled by clicking the checkbox ![]({{assetsURL}}/img/guide/layers/check.png) next to the data name shown above the chart (only for layers with multiple data items):

packages/geoview-core/public/locales/fr/guide.md

@@ -203,6 +203,8 @@ L’onglet **Couches** comprend les sous-menus suivants :
 
 #### ![]({{assetsURL}}/img/guide/footer/view_25.svg) Vue
 
+_**N.B. : Cliquez sur une couche pour afficher ses information dans la section de droite.**_
+
 Le sous-menu **Vue** de l’onglet **Couches** se divise en deux sections. La section de gauche présente les couches affichées sur la carte. Si vous cliquez sur une couche, ses paramètres (options accessibles pour la couche) s’afficheront dans la section de droite.
 
 **Icônes de couche**
@@ -291,10 +293,10 @@ Pour retirer une couche, cliquez sur l’icône de suppression ![]({{assetsURL}}
 <a id="detailsSection"></a>
 ### ![]({{assetsURL}}/img/guide/sidebar/details_30.svg) Détails [Haut de page](#footerSection)
 
-L’onglet **Détails** se divise en deux sections. La section de gauche dresse la liste des couches accessibles, tandis que celle de droite affiche le détail des éléments pour chaque couche.
-
 _**N.B.&nbsp;: Il faut sélectionner un élément sur la carte pour que la couche devienne cliquable dans la liste, sans quoi elle sera désactivée (grisée).**_
 
+L’onglet **Détails** se divise en deux sections. La section de gauche dresse la liste des couches accessibles, tandis que celle de droite affiche le détail des éléments pour chaque couche.
+
 Cliquez sur une couche pour afficher ses éléments en détail.
 
 Le nombre d’éléments pour la couche sélectionnée est indiqué en haut à gauche de la section détaillée.
@@ -310,6 +312,8 @@ Cochez la case ![]({{assetsURL}}/img/guide/layers/check.png) pour garder l’él
 <a id="dataTableSection"></a>
 ### ![]({{assetsURL}}/img/guide/footer/data_table.svg) Données [Haut de page](#footerSection)
 
+_**N.B.&nbsp;: Cliquez sur une couche pour afficher ses données dans la section de droite.**_
+
 L’onglet **Données** se divise en deux sections. La liste des couches se trouve à gauche, et les données des couches, à droite. Cliquez sur une couche pour en voir les données dans le tableau de droite.
 
 **Commandes de l’onglet Données**
@@ -392,7 +396,9 @@ Pour accéder aux boutons ou aux champs de saisie d’une cellule, assurez-vous
 <a id="timeSliderSection"></a>
 ### ![]({{assetsURL}}/img/guide/footer/time_slider_30.svg) Curseur temporel [Haut de page](#footerSection)
 
-L’onglet **Curseur temporel** dans le pied de page se divise en deux sections. La liste des couches ayant un facteur temporel se trouve dans la section de gauche. Cliquez sur une couche pour afficher son curseur temporel dans la section de droite&nbsp;:
+_**N.B.&nbsp;: Cliquez sur une couche pour afficher son curseur temporel dans la section de droite.**_
+
+L’onglet **Curseur temporel** dans le pied de page se divise en deux sections. La liste des couches ayant un facteur temporel se trouve dans la section de gauche.
 
 Une barre de curseur s’affiche avec un ou deux points déplaçables. Pour les couches à facteur temporel ponctuel, il n’y a qu’un point déplaçable. Pour les couches à plage temporelle, il y a deux points déplaçables permettant de régler le début et la fin de la plage.
 
@@ -413,10 +419,10 @@ Le champ visé par le filtre s’affiche en bas à gauche de la section du curse
 <a id="chartSection"></a>
 ### ![]({{assetsURL}}/img/guide/footer/chart_30.svg) Graphique [Haut de page](#footerSection)
 
-L’onglet **Graphique** dans le pied de page se divise en deux sections. La liste des couches comportant un graphique se trouve dans la section de gauche. Sélectionnez un élément sur la carte pour en voir le graphique dans la section de droite.
-
 _**N.B.&nbsp;: Il faut sélectionner un élément sur la carte pour que la couche devienne cliquable dans la liste, sans quoi elle sera désactivée (grisée).**_
 
+L’onglet **Graphique** dans le pied de page se divise en deux sections. La liste des couches comportant un graphique se trouve dans la section de gauche. Sélectionnez un élément sur la carte pour en voir le graphique dans la section de droite.
+
 Le menu déroulant **Élément** (en haut à gauche de la section du graphique) permet également de sélectionner un élément. Il s’agit d’une fonction pratique lorsque plusieurs éléments sont rapprochés sur la carte et qu’il est difficile de sélectionner celui voulu.
 
 Vous pouvez cocher ou décocher les cases ![]({{assetsURL}}/img/guide/layers/check.png) des données au-dessus du graphique pour déterminer le contenu de celui-ci (seulement pour les couches comportant plusieurs éléments de données).

packages/geoview-core/public/templates/demos/demo-function-event.html

@@ -304,7 +304,9 @@ <h3>Events that will generate notifications:</h3>
         });
 
         // listen to individual layer loaded event
-        cgpv.api.maps.Map1.layer.getGeoviewLayerHybrid(LYR_PATH_NON_METAL)?.onIndividualLayerLoaded((sender, payload) => {
+        // TODO: The gv layer does not exist at the time we attach the event. To make this work, we would
+        // TODO.CONT: need to implement a when-this-then internal approach.
+        cgpv.api.maps.Map1.layer.getGeoviewLayer(LYR_PATH_NON_METAL)?.onIndividualLayerLoaded((sender, payload) => {
           cgpv.api.maps.Map1.notifications.addNotificationSuccess('Nonmetal mines has finished loading');
           console.log(sender.olRootLayer.getSource().getFeatures());
         });
@@ -331,22 +333,22 @@ <h3>Events that will generate notifications:</h3>
         // !!
 
         // listen to layer visibility changed event (individual geoview layer)
-        cgpv.api.maps.Map1.layer.getGeoviewLayerHybrid(LYR_PATH_UNIQUE)?.onVisibleChanged((sender, payload) => {
+        cgpv.api.maps.Map1.layer.getGeoviewLayer(LYR_PATH_UNIQUE)?.onVisibleChanged((sender, payload) => {
           cgpv.api.maps.Map1.notifications.addNotificationSuccess(`${LYR_PATH_UNIQUE} visibility set to ${payload.visible} - individual`);
         });
 
         // listen to layer visibility changed event (individual geoview layer)
-        cgpv.api.maps.Map1.layer.getGeoviewLayerHybrid(LYR_PATH_GEOCORE)?.onVisibleChanged((sender, payload) => {
+        cgpv.api.maps.Map1.layer.getGeoviewLayer(LYR_PATH_GEOCORE)?.onVisibleChanged((sender, payload) => {
           cgpv.api.maps.Map1.notifications.addNotificationSuccess(`layer ${payload.layerPath} visibility set to ${payload.visible} - individual`);
         });
 
         // listen to layer opacity changed event
-        cgpv.api.maps.Map1.layer.getGeoviewLayerHybrid(LYR_PATH_UNIQUE)?.onLayerOpacityChanged((sender, payload) => {
+        cgpv.api.maps.Map1.layer.getGeoviewLayer(LYR_PATH_UNIQUE)?.onLayerOpacityChanged((sender, payload) => {
           cgpv.api.maps.Map1.notifications.addNotificationSuccess(`${payload.layerPath} opacity changed to ${payload.opacity}`);
         });
 
         // listen to layer filter applied event
-        cgpv.api.maps.Map1.layer.getGeoviewLayerHybrid(LYR_PATH_UNIQUE)?.onLayerFilterApplied((sender, payload) => {
+        cgpv.api.maps.Map1.layer.getGeoviewLayer(LYR_PATH_UNIQUE)?.onLayerFilterApplied((sender, payload) => {
           cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Filter ${payload.filter} applied to ${payload.layerPath}`);
         });
 

packages/geoview-core/public/templates/demos/demo-geojson-inject.html

@@ -97,15 +97,15 @@ <h3>API Functions:</h3>
       <ul>
         <li>
           <button id="Add-points1">Place points set 1</button><br />
-          cgpv.api.maps.LYR1.layer.getGeoviewLayer('geojsonLYR1/blank.json').overrideGeojsonSource('geojsonLYR1/blank.json', points1)
+          cgpv.api.maps.LYR1.layer.getGeoviewLayer('geojsonLYR1/blank.json').overrideGeojsonSource(points1)
         </li>
         <li>
           <button id="Add-points2">Place points set 2</button><br />
-          cgpv.api.maps.LYR1.layer.getGeoviewLayer('geojsonLYR1/blank.json').overrideGeojsonSource('geojsonLYR1/blank.json', points2)
+          cgpv.api.maps.LYR1.layer.getGeoviewLayer('geojsonLYR1/blank.json').overrideGeojsonSource(points2)
         </li>
         <li>
           <button id="Add-points3">Place points set 3</button><br />
-          cgpv.api.maps.LYR1.layer.getGeoviewLayer('geojsonLYR1/blank.json').overrideGeojsonSource('geojsonLYR1/blank.json', points3)
+          cgpv.api.maps.LYR1.layer.getGeoviewLayer('geojsonLYR1/blank.json').overrideGeojsonSource(points3)
         </li>
       </ul>
     </div>
@@ -172,7 +172,7 @@ <h3>API Functions:</h3>
       };
       // add an event listener when a button is clicked
       addPoints1Button.addEventListener('click', () => {
-        cgpv.api.maps.LYR1.layer.getGeoviewLayer('geojsonLYR1/blank.json').overrideGeojsonSource('geojsonLYR1/blank.json', points1);
+        cgpv.api.maps.LYR1.layer.getGeoviewLayer('geojsonLYR1/blank.json').overrideGeojsonSource(points1);
       });
 
       // Add points 2 button ====================================================================================
@@ -184,7 +184,7 @@ <h3>API Functions:</h3>
 
       // add an event listener when a button is clicked
       addPoints2Button.addEventListener('click', () => {
-        cgpv.api.maps.LYR1.layer.getGeoviewLayer('geojsonLYR1/blank.json').overrideGeojsonSource('geojsonLYR1/blank.json', points2);
+        cgpv.api.maps.LYR1.layer.getGeoviewLayer('geojsonLYR1/blank.json').overrideGeojsonSource(points2);
       });
 
       // Add points 3 button ====================================================================================
@@ -243,7 +243,7 @@ <h3>API Functions:</h3>
       };
       // add an event listener when a button is clicked
       addPoints3Button.addEventListener('click', () => {
-        cgpv.api.maps.LYR1.layer.getGeoviewLayer('geojsonLYR1/blank.json').overrideGeojsonSource('geojsonLYR1/blank.json', points3);
+        cgpv.api.maps.LYR1.layer.getGeoviewLayer('geojsonLYR1/blank.json').overrideGeojsonSource(points3);
       });
     </script>
   </body>

packages/geoview-core/public/templates/ui-components.html

@@ -173,11 +173,11 @@ <h3>Accessing slider value from outside of the core viewer using api event liste
               track: 'normal',
               onChange: (dates) => {
                 const field = cgpv.api.maps.UI1.layer
-                  .getGeoviewLayerHybrid('historical-flood/0')
-                  .getTemporalDimension('historical-flood/0').field;
+                  .getGeoviewLayer('historical-flood/0')
+                  .getTemporalDimension().field;
                 cgpv.api.maps.UI1.layer
-                  .getGeoviewLayerHybrid('historical-flood/0')
-                  .applyViewFilter('historical-flood/0', `${field} >= date '${dates[0]}-01-01' and ${field} <= date '${dates[1]}-12-31'`);
+                  .getGeoviewLayer('historical-flood/0')
+                  .applyViewFilter(`${field} >= date '${dates[0]}-01-01' and ${field} <= date '${dates[1]}-12-31'`);
               },
             })
           );

packages/geoview-core/src/api/config/types/classes/map-feature-config.ts

@@ -289,8 +289,6 @@ export class MapFeatureConfig {
     const { projection } = this.map.viewSettings;
     const center = this.map.viewSettings.initialView!.zoomAndCenter![1];
     const maxExtent = this.map.viewSettings.maxExtent!;
-    // TODO: Which one do we want, the commented one or the next one?
-    // const [extentMinX, extentMinY, extentMaxX, extentMaxY] = getMinOrMaxExtents(maxExtent, CV_MAP_EXTENTS[projection], 'min');
     const [extentMinX, extentMinY, extentMaxX, extentMaxY] = maxExtent;
 
     const minX = !Number.isNaN(extentMinX) && extentMinX < center[0] ? extentMinX : CV_VALID_MAP_CENTER[projection].long[0];

packages/geoview-core/src/api/event-processors/event-processor-children/legend-event-processor.ts

@@ -132,9 +132,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
     objectIds: string[],
     outfield?: string
   ): Promise<Extent | undefined> | undefined {
-    return MapEventProcessor.getMapViewerLayerAPI(mapId)
-      .getGeoviewLayerHybrid(layerPath)
-      ?.getExtentFromFeatures(layerPath, objectIds, outfield);
+    return MapEventProcessor.getMapViewerLayerAPI(mapId).getGeoviewLayer(layerPath)?.getExtentFromFeatures(objectIds, outfield);
   }
 
   static getLayerIconImage(layerLegend: TypeLegend | null): TypeLegendLayerItem[] | undefined {
@@ -251,14 +249,11 @@ export class LegendEventProcessor extends AbstractEventProcessor {
       if (!layerConfig) return;
 
       // Get the layer
-      const layer = MapEventProcessor.getMapViewerLayerAPI(mapId).getGeoviewLayerHybrid(entryLayerPath);
+      const layer = MapEventProcessor.getMapViewerLayerAPI(mapId).getGeoviewLayer(entryLayerPath);
 
       // Interpret the layer name the best we can
       const layerName =
-        layer?.getLayerName(entryLayerPath) ||
-        layerConfig.layerName ||
-        layerConfig.geoviewLayerConfig.geoviewLayerName ||
-        layerConfig.layerPath;
+        layer?.getLayerName() || layerConfig.layerName || layerConfig.geoviewLayerConfig.geoviewLayerName || layerConfig.layerPath;
 
       let entryIndex = existingEntries.findIndex((entry) => entry.layerPath === entryLayerPath);
       if (layerEntryIsGroupLayer(layerConfig)) {
@@ -556,7 +551,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
     const layer = LegendEventProcessor.findLayerByPath(curLayers, layerPath);
     if (layer) {
       layer.opacity = opacity;
-      MapEventProcessor.getMapViewerLayerAPI(mapId).getGeoviewLayerHybrid(layerPath)?.setOpacity(opacity, layerPath);
+      MapEventProcessor.getMapViewerLayerAPI(mapId).getGeoviewLayer(layerPath)?.setOpacity(opacity);
       if (isChild) {
         layer.opacityFromParent = opacity;
       }