diff --git a/nunaliit2-js/src/main/js/nunaliit2/css/basic/images/GoogleMaps_Logo_White.svg b/nunaliit2-js/src/main/js/nunaliit2/css/basic/images/GoogleMaps_Logo_White.svg new file mode 100644 index 000000000..775b6dd83 --- /dev/null +++ b/nunaliit2-js/src/main/js/nunaliit2/css/basic/images/GoogleMaps_Logo_White.svg @@ -0,0 +1,50 @@ + + + + + + + + diff --git a/nunaliit2-js/src/main/nunaliit-es6/DEVELOPMENT.md b/nunaliit2-js/src/main/nunaliit-es6/DEVELOPMENT.md index 373366589..6561e1f12 100644 --- a/nunaliit2-js/src/main/nunaliit-es6/DEVELOPMENT.md +++ b/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/*`. diff --git a/nunaliit2-js/src/main/nunaliit-es6/src/n2es6/n2mapModule/N2MapCanvas.css b/nunaliit2-js/src/main/nunaliit-es6/src/n2es6/n2mapModule/N2MapCanvas.css index 297920afb..fed8b6f89 100644 --- a/nunaliit2-js/src/main/nunaliit-es6/src/n2es6/n2mapModule/N2MapCanvas.css +++ b/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; -} \ No newline at end of file +} + +.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; +} diff --git a/nunaliit2-js/src/main/nunaliit-es6/src/n2es6/n2mapModule/N2MapCanvas.js b/nunaliit2-js/src/main/nunaliit-es6/src/n2es6/n2mapModule/N2MapCanvas.js index d5f8c747b..2564a7812 100644 --- a/nunaliit2-js/src/main/nunaliit-es6/src/n2es6/n2mapModule/N2MapCanvas.js +++ b/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 + ')'); } }