Merge branch 'develop' into add-tree-display-to-add-layer

packages/geoview-core/public/configs/navigator/06-basic-footer.json

@@ -9,6 +9,28 @@
       "shaded": true,
       "labeled": true
     },
+    "overlayObjects": {
+      "pointMarkers": {
+        "group1": [
+          {
+            "id": "1",
+            "coordinate": [-100, 60],
+            "color": "blue",
+            "opacity": 0.5
+          },
+          {
+            "id": "2",
+            "coordinate": [-80, 65],
+            "color": "rgb(0, 226, 0)"
+          },
+          {
+            "id": "3",
+            "coordinate": [-115, 66],
+            "color": "#C52022"
+          }
+        ]
+      }
+    },
     "listOfGeoviewLayerConfig": [
       {
         "geoviewLayerId": "airborne_radioactivity",

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

@@ -123,11 +123,11 @@ <h3>API Functions:</h3>
           cgpv.api.maps.Map1.appBarApi.selectAppBarTab('AppbarPanelButtonGeolocator', 'geolocator')
         </li>
         <li><button id="Disable-hover">Disable hover query for Top 100</button><button id="Enable-hover">Enable hover query for Top 100</button><br />
-          cgpv.api.maps.Map1.layer.hoverFeatureInfoLayerSet.disableHoverListener('esriFeatureLYR5/0')
+          cgpv.api.maps.Map1.layer.hoverFeatureInfoLayerSet.disableHoverListener('esriFeatureLYR5/0')<br />
           cgpv.api.maps.Map1.layer.hoverFeatureInfoLayerSet.enableHoverListener('esriFeatureLYR5/0')
         </li>
         <li><button id="Disable-feature-info">Disable feature query for Top 100</button><button id="Enable-feature-info">Enable feature query for Top 100</button><br />
-          cgpv.api.maps.Map1.layer.featureInfoLayerSet.disableClickListener('esriFeatureLYR5/0')
+          cgpv.api.maps.Map1.layer.featureInfoLayerSet.disableClickListener('esriFeatureLYR5/0')<br />
           cgpv.api.maps.Map1.layer.featureInfoLayerSet.enableClickListener('esriFeatureLYR5/0')
         </li>
         <li><button id="Show-collapsed-state">Show collapsed legend state for Water Quantity</button><br />
@@ -140,17 +140,18 @@ <h3>API Functions:</h3>
           cgpv.api.maps.Map1.getMapLayerOrderInfo()
         </li>
         <li><button id="Language-en">Change language to English</button><button id="Language-fr">Change language to French</button><br />
-          cgpv.api.maps.Map1.getMapLayerOrderInfo()
+          cgpv.api.maps.Map1.setLanguage('en')<br />
+          cgpv.api.maps.Map1.setLanguage('fr')
         </li>
         <li><button id="Change-basemap">Change basemap</button><br />
-          const basemap = await cgpv.api.maps.Map1.basemap.createCoreBasemap(basemapOptions = {basemapId: 'simple'})
+          const basemap = await cgpv.api.maps.Map1.basemap.createCoreBasemap(basemapOptions = {basemapId: 'simple'})<br />
           cgpv.api.maps.Map1.basemap.setBasemap(basemap)
         </li>
         <li><button id="Set-layer">Set selected layer in layers panel to Nonmetal mines</button><br />
           cgpv.api.maps.Map1.stateApi.setSelectedLayersTabLayer('nonmetalmines/5')
         </li>
         <li><button id="Swiper-add">Add Nonmetal mines to swiper</button><button id="Swiper-remove">Remove Nonmetal mines from swiper</button><br />
-          cgpv.api.maps.Map1.plugins['swiper'].activateForLayer('nonmetalmines/5')
+          cgpv.api.maps.Map1.plugins['swiper'].activateForLayer('nonmetalmines/5')<br />
           cgpv.api.maps.Map1.plugins['swiper'].deActivateForLayer('nonmetalmines/5')
         </li>
         <li><button id="Calc-dist">Calculate distance</button>
@@ -167,6 +168,16 @@ <h3>API Functions:</h3>
         <li><button id="Reload-map">Reload map with current state</button><br />
           cgpv.api.maps.Map1.reloadWithCurrentState()
         </li>
+        <li><button id="Add-marker">Add markers to map</button><button id="Remove-marker">Remove markers from map</button><br />
+          cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.addPointMarkers('group1', markers)<br />
+          cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.removePointMarkersOrGroup('group1');
+        </li>
+        <li><button id="Zoom-to-markers">Zoom to markers 1 and 3</button><br />
+          cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.zoomToPointMarkers('group1', ['1', '3']);
+        </li>
+        <li><button id="Zoom-to-marker-group">Zoom to marker group</button><br />
+          cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.zoomToPointMarkerGroup('group1');
+        </li>
       </ul>
       <h3>Events that will generate notifications:</h3>
       <ul>
@@ -184,6 +195,7 @@ <h3>Events that will generate notifications:</h3>
         <li>onBasemapChanged</li>
         <li>onLayersReordered</li>
         <li>onLayerOpacityChanged for Water Quantity</li>
+        <li>onMapAddedToDiv</li>
       </ul>
     </div>
     <br>
@@ -283,8 +295,11 @@ <h3>Events that will generate notifications:</h3>
           cgpv.api.maps.Map1.notifications.addNotificationSuccess(`${payload.layerPath} opacity changed to ${payload.opacity}`);
         });
 
-      });
-
+        // listen to map added to div event
+        cgpv.api.onMapAddedToDiv((sender, payload) => {
+          cgpv.api.maps[payload.mapId].notifications.addNotificationSuccess(`Map ${payload.mapId} added`);
+        });
+      })
       // Add WMS Button======================================================================================================
       // find the button element by ID
       var addLayerButton = document.getElementById('Add-layer');
@@ -518,7 +533,7 @@ <h3>Events that will generate notifications:</h3>
 
       // add an event listener when a button is clicked
       changeLanguageEnglishButton.addEventListener('click', async () => {
-        console.log(cgpv.api.maps.Map1.setLanguage('en'));
+        cgpv.api.maps.Map1.setLanguage('en');
       });
 
       // Enable language fr Button================================================================================================
@@ -527,7 +542,7 @@ <h3>Events that will generate notifications:</h3>
 
       // add an event listener when a button is clicked
       changeLanguageFrenchButton.addEventListener('click', async () => {
-        console.log(cgpv.api.maps.Map1.setLanguage('fr'));
+        cgpv.api.maps.Map1.setLanguage('fr');
       });
 
       // Change basemap Button================================================================================================
@@ -607,6 +622,61 @@ <h3>Events that will generate notifications:</h3>
       reloadMapButton.addEventListener('click', () => {
         cgpv.api.maps.Map1.reloadWithCurrentState();
       });
+
+      // Add-marker Button================================================================================================
+      // find the button element by ID
+      var addMarkerButton = document.getElementById('Add-marker');
+
+      const markers = [
+        {
+          "id": "1",
+          "coordinate": [-100, 60],
+          "color": "blue",
+          "opacity": 0.5
+        },
+        {
+          "id": "2",
+          "coordinate": [-80, 65],
+          "color": "rgb(0, 226, 0)"
+        },
+        {
+          "id": "3",
+          "coordinate": [-115, 66],
+          "color": "#C52022"
+        }
+      ]
+
+      // add an event listener when a button is clicked
+      addMarkerButton.addEventListener('click', () => {
+        cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.addPointMarkers('group1', markers);
+      });
+
+      // Remove-marker Button================================================================================================
+      // find the button element by ID
+      var removeMarkerButton = document.getElementById('Remove-marker');
+
+      // add an event listener when a button is clicked
+      removeMarkerButton.addEventListener('click', () => {
+        cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.removePointMarkersOrGroup('group1');
+      });
+
+      // Zoom-to-markers Button================================================================================================
+      // find the button element by ID
+      var zoomToMarkersButton = document.getElementById('Zoom-to-markers');
+
+      // add an event listener when a button is clicked
+      zoomToMarkersButton.addEventListener('click', () => {
+        cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.zoomToPointMarkers('group1', ['1', '3']);
+      });
+
+      // Zoom-to-marker-group Button================================================================================================
+      // find the button element by ID
+      var zoomToMarkerGroupButton = document.getElementById('Zoom-to-marker-group');
+
+      // add an event listener when a button is clicked
+      zoomToMarkerGroupButton.addEventListener('click', () => {
+        cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.zoomToPointMarkerGroup('group1');
+      });
 
       // create snippets
       window.addEventListener('load', () => {

packages/geoview-core/schema.json

@@ -565,7 +565,7 @@
         },
         "dataProjection": {
           "type": "string",
-          "description": "The projection code of the source. Used only for GeoJSON format. Default value is EPSG:4326. "
+          "description": "The projection code of the source. Used only for GeoJSON format. Default value is EPSG:4326."
         },
         "featureInfo": {
           "$ref": "#/definitions/TypeFeatureInfoLayerConfig"
@@ -1346,6 +1346,9 @@
         "highlightColor": {
           "$ref": "#/definitions/TypeHighlightColors"
         },
+        "overlayObjects": {
+          "$ref": "#/definitions/TypeOverlayObjects"
+        },
         "extraOptions": {
           "type": "object",
           "description": "Additional options used for OpenLayers map options"
@@ -1388,6 +1391,60 @@
       "default": "black",
       "description": "Color to use for feature highlights."
     },
+    "TypeOverlayObjects": {
+      "type": "object",
+      "properties": {
+        "pointMarkers": {
+          "$ref": "#/definitions/TypePointMarkers"
+        }
+      }
+    },
+    "TypePointMarkers": {
+      "type": "object",
+      "patternProperties": {
+        "[^]*": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/TypePointMarker"
+          }
+        }
+      }
+    },
+    "TypePointMarker": {
+      "additionalProperties": false,
+      "type": "object",
+      "properties": {
+        "id": {
+          "type": "string",
+          "description": "ID for point marker. Must be unique in group."
+        },
+        "coordinate": {
+          "type": "array",
+          "minItems": 2,
+          "maxItems": 2,
+          "items": {
+            "type": "number"
+          },
+          "description": "The coordinates of the marker."
+        },
+        "color": {
+          "type": "string",
+          "default": "green",
+          "description": "Marker color."
+        },
+        "opacity": {
+          "type": "number",
+          "minimum": 0,
+          "maximum": 1,
+          "default": 1
+        },
+        "projection": {
+          "type": "number",
+          "description": "The projection code of the coordinates. Default value is 4326."
+        }
+      },
+      "required": ["id", "coordinate"]
+    },
     "TypeListOfGeoviewLayerConfig": {
       "description": "List of GeoView Layers in the order which they should be added to the map.",
       "type": "array",

packages/geoview-core/src/api/api.ts

@@ -12,6 +12,7 @@ import { MapViewer } from '@/geo/map/map-viewer';
 import * as GeoUtilities from '@/geo/utils/utilities';
 
 import { initMapDivFromFunctionCall } from '@/app';
+import EventHelper, { EventDelegateBase } from './events/event-helper';
 
 /**
  * Class used to handle api calls (events, functions etc...)
@@ -32,6 +33,9 @@ export class API {
   // utilities object
   utilities;
 
+  // Keep all callback delegates references
+  #onMapAddedToDivHandlers: MapAddedToDivDelegate[] = [];
+
   /**
    * Initiate the event and projection objects
    */
@@ -110,9 +114,51 @@ export class API {
     if (mapDiv) {
       // Init by function call
       await initMapDivFromFunctionCall(mapDiv, mapConfig);
+      this.#emitMapAddedToDiv({ mapId: divId });
       return Promise.resolve();
     }
 
     return Promise.reject(new Error(`Div with id ${divId} does not exist`));
   }
+
+  /**
+   * Emits an event to all handlers.
+   * @param {MapAddedToDivEvent} event - The event to emit
+   * @private
+   */
+  #emitMapAddedToDiv(event: MapAddedToDivEvent): void {
+    // Emit the event for all handlers
+    EventHelper.emitEvent(this, this.#onMapAddedToDivHandlers, event);
+  }
+
+  /**
+   * Registers a map added to div event handler.
+   * @param {MapAddedToDivDelegate} callback - The callback to be executed whenever the event is emitted
+   */
+  onMapAddedToDiv(callback: MapAddedToDivDelegate): void {
+    // Register the event handler
+    EventHelper.onEvent(this.#onMapAddedToDivHandlers, callback);
+  }
+
+  /**
+   * Unregisters a map added to div event handler.
+   * @param {MapAddedToDivdDelegate} callback - The callback to stop being called whenever the event is emitted
+   */
+  offMapAddedToDiv(callback: MapAddedToDivDelegate): void {
+    // Unregister the event handler
+    EventHelper.offEvent(this.#onMapAddedToDivHandlers, callback);
+  }
 }
+
+/**
+ * Define a delegate for the event handler function signature
+ */
+type MapAddedToDivDelegate = EventDelegateBase<API, MapAddedToDivEvent, void>;
+
+/**
+ * Define an event for the delegate
+ */
+export type MapAddedToDivEvent = {
+  // The added layer
+  mapId: string;
+};

packages/geoview-core/src/api/config/types/config-constants.ts

@@ -159,6 +159,9 @@ export const CV_DEFAULT_MAP_FEATURE_CONFIG = Cast<MapFeatureConfig>({
     interaction: 'dynamic',
     listOfGeoviewLayerConfig: [],
     highlightColor: 'black',
+    overlayObjects: {
+      pointMarkers: {},
+    },
     viewSettings: {
       initialView: {
         zoomAndCenter: [3.5, CV_MAP_CENTER[3978]],