Google Map source for OpenLayers canvas

nunaliit2-js/src/main/nunaliit-es6/DEVELOPMENT.md

@@ -7,10 +7,10 @@
 ```
 
 2. Ensure that you are running a compatible version of Node and npm.  
-Presently, `node v22.15.1` and `npm v10.9.2` are the respective versions used. You can use [nvm](https://github.com/nvm-sh/nvm) to manage them (ex. `nvm use 22`). Install the relevant modules if not already done (`npm install`).
+Presently, `node v24.14.0` and `npm v11.9.0` are the respective versions used. You can use [nvm](https://github.com/nvm-sh/nvm) to manage them (ex. `nvm use 24`). Install the relevant modules if not already done (`npm install`).
 ```sh
-~/nunaliit/nunaliit2-js/src/main/nunaliit-es6$ nvm use 22
-Now using node v22.15.1 (npm v10.9.2)
+~/nunaliit/nunaliit2-js/src/main/nunaliit-es6$ nvm use 24
+Now using node v24.14.0 (npm v11.9.0)
 ```
 
 3. Run `npm run watch`.  Changes to files under the `src` directory will automatically rebuild the `n2es6` related files found at `dist/target/*`.

nunaliit2-js/src/main/nunaliit-es6/src/n2es6/n2mapModule/N2MapCanvas.css

@@ -12,4 +12,25 @@
     background-size: 19px 19px;
     width: 1.375em;
     height: 1.375em;
-}
+}
+
+.nunaliit_atlas .openlayers-google-attribution-control {
+    pointer-events: none;
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+
+    margin: 0;
+    padding: 1px .5em;
+    color: var(--ol-foreground-color);
+    text-shadow: 0 0 2px var(--ol-background-color);
+    font-size: 12px;
+    background: var(--ol-partial-background-color);
+    border-radius: 2px;
+
+    right: 135px;
+}
+
+.nunaliit_atlas .n2_content_map .ol-viewport .ol-attribution.ol-uncollapsible {
+    bottom: 6px;
+}

nunaliit2-js/src/main/nunaliit-es6/src/n2es6/n2mapModule/N2MapCanvas.js

@@ -31,12 +31,14 @@ import WKT from 'ol/format/WKT';
 import { getArea, getLength, getDistance } from 'ol/sphere';
 
 import mouseWheelZoom from 'ol/interaction/MouseWheelZoom.js';
+import Control from 'ol/control/Control.js'
 import { defaults as defaultsInteractionSet } from 'ol/interaction.js';
 
 import { default as DrawInteraction } from 'ol/interaction/Draw.js';
 import N2StadiaMapsFactory from './N2StadiaMapsFactory';
 import OSM from 'ol/source/OSM';
 import BingMaps from 'ol/source/BingMaps';
+import Google from 'ol/source/Google.js'
 import TileWMS from 'ol/source/TileWMS';
 import ImageTileSource from 'ol/source/ImageTile.js';
 import { TileGrid } from 'ol/tilegrid';
@@ -68,6 +70,7 @@ const VENDOR = {
 	WMTS: 'wmts',
 	OSM: 'osm',
 	STADIA: 'stadia',
+	GOOGLE: 'google',
 	XYZ: 'xyz'
 };
 
@@ -91,6 +94,17 @@ const stringStyles = {
 	"label": true
 };
 
+class GoogleLogoControl extends Control {
+	constructor() {
+		const element = document.createElement('img');
+		element.classList.add('openlayers-google-attribution-control')
+		element.src = "nunaliit2/css/basic/images/GoogleMaps_Logo_White.svg"
+		super({
+			element: element,
+		});
+	}
+}
+
 /**
  * @classdesc
  * N2MapCanvas - canvas type "map"
@@ -760,6 +774,12 @@ class N2MapCanvas {
 		this.popupOverlay = customPopup;
 		this.n2Map.addOverlay(customPopup);
 
+
+		/* Google Control if needed */
+		this.googleAttribution = new GoogleLogoControl()
+		this.overlayLayers.forEach(this._toggleGoogleAttributionControl.bind(this))
+		this.mapLayers.forEach(this._toggleGoogleAttributionControl.bind(this))
+
 		/**
 		 * Two Groups : Overlay and Background
 		 */
@@ -948,6 +968,11 @@ class N2MapCanvas {
 		this.editbarControl.getInteraction('DrawPolygon').on('drawend', function (evt) {
 			_this.editModeAddFeatureCallback(evt);
 		});
+
+		this.dispatchService.send(DH, {
+			type: 'mapInitialized',
+			mapControl: this
+		});
 	}
 
 	onMoveendCallback(evt) { }
@@ -960,6 +985,19 @@ class N2MapCanvas {
 		this._centerMapOnFeature(feature);
 	}
 
+	_toggleGoogleAttributionControl(layer) {
+		if (layer?.getSource() instanceof Google) {
+			layer.on("change:visible", (ev) => {
+				if (ev.target.getVisible()) {
+					this.n2Map.addControl(this.googleAttribution)
+				}
+				else {
+					this.n2Map.removeControl(this.googleAttribution)
+				}
+			})
+		}
+	}
+
 	_createImageLegendPaylod(legendUrl, ol_uid, canvasName, layerSwipe, info, visible) {
 		var imagePayload = {
 			type: 'imageUrlLegendDisplay'
@@ -1416,7 +1454,17 @@ class N2MapCanvas {
 			} else {
 				$n2.reportError('Parameter is missing for source: ' + sourceTypeInternal)
 			}
-		} else {
+		}
+		else if (sourceTypeInternal === VENDOR.GOOGLE) {
+			if (sourceOptionsInternal && n2atlas && n2atlas.googleMapApiKey) {
+				const parameters = {...sourceOptionsInternal}
+				parameters.key = n2atlas.googleMapApiKey
+				return new Google(parameters);
+			} else {
+				$n2.reportError(`Source '${sourceTypeInternal}' requires a Google API key`);
+			}
+		}
+		 else {
 			$n2.reportError('Unrecognized type (' + layerDefinition.type + ')');
 		}
 	}