From ba19aead547ab7c112cc09da6f09bab50504f1e7 Mon Sep 17 00:00:00 2001 From: alexgao1 Date: Thu, 5 Mar 2026 16:43:54 -0500 Subject: [PATCH 1/2] Google Map source for OpenLayers canvas --- .../src/n2es6/n2mapModule/N2MapCanvas.css | 23 ++++++++- .../src/n2es6/n2mapModule/N2MapCanvas.js | 50 ++++++++++++++++++- 2 files changed, 71 insertions(+), 2 deletions(-) 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..98c3d5b88 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('span'); + element.classList.add('openlayers-google-attribution-control') + element.innerText = "Google Maps" + 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 + ')'); } } From edeaf26bbabf061f4ba45f154e8af6a76dabe101 Mon Sep 17 00:00:00 2001 From: alexgao1 Date: Tue, 10 Mar 2026 12:27:02 -0400 Subject: [PATCH 2/2] Use Google Maps provided logo since we're not limited on space and their guidelines prefer the logo --- .../basic/images/GoogleMaps_Logo_White.svg | 50 +++++++++++++++++++ .../src/main/nunaliit-es6/DEVELOPMENT.md | 6 +-- .../src/n2es6/n2mapModule/N2MapCanvas.js | 4 +- 3 files changed, 55 insertions(+), 5 deletions(-) create mode 100644 nunaliit2-js/src/main/js/nunaliit2/css/basic/images/GoogleMaps_Logo_White.svg 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.js b/nunaliit2-js/src/main/nunaliit-es6/src/n2es6/n2mapModule/N2MapCanvas.js index 98c3d5b88..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 @@ -96,9 +96,9 @@ const stringStyles = { class GoogleLogoControl extends Control { constructor() { - const element = document.createElement('span'); + const element = document.createElement('img'); element.classList.add('openlayers-google-attribution-control') - element.innerText = "Google Maps" + element.src = "nunaliit2/css/basic/images/GoogleMaps_Logo_White.svg" super({ element: element, });