Keyboard controls for map.json config (#1244)

* Keyboard controls for map.json config * Set tabindex for map so keyboard controls only in focus * add focus css for map
GCRC · Sep 24, 2024 · daa76d9 · daa76d9
1 parent c803699
commit daa76d9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/nunaliit2-js/src/main/js/nunaliit2/css/basic/n2.mapAndControls.css b/nunaliit2-js/src/main/js/nunaliit2/css/basic/n2.mapAndControls.css
@@ -349,3 +349,7 @@ table.mediaSelection td {
 .olLayerGooglePoweredBy, .gmnoprint, .gm-style-cc {
 	visibility: hidden;
 }
+
+.n2_content_map:focus {
+	border: solid #444444 2px;
+}
diff --git a/nunaliit2-js/src/main/js/nunaliit2/n2.couchModule.js b/nunaliit2-js/src/main/js/nunaliit2/n2.couchModule.js
@@ -1073,6 +1073,8 @@ var ModuleDisplay = $n2.Class({
 			showSRSAttribution = mapInfo.showSRSAttribution;
 		};
 
+		const enableKeyboardControls = mapInfo.enableKeyboardControls || false
+
 		// ScaleLine
 		var scaleLine = {
 			visible: false
@@ -1114,6 +1116,7 @@ var ModuleDisplay = $n2.Class({
 			,overlays: []
 			,toggleClick: toggleClick
 			,showSRSAttribution: showSRSAttribution
+			,enableKeyboardControls: enableKeyboardControls
 			,scaleLine: scaleLine
 			,enableWheelZoom: enableWheelZoom
 			,sidePanelName: _this.sidePanelName

diff --git a/nunaliit2-js/src/main/js/nunaliit2/n2.mapAndControls.js b/nunaliit2-js/src/main/js/nunaliit2/n2.mapAndControls.js
@@ -1570,6 +1570,13 @@ var MapAndControls = $n2.Class('MapAndControls',{
 			this.map.addControl(scaleLine);
 		};
 
+		if (this.options.enableKeyboardControls) {
+			const keyboardControls = new OpenLayers.Control.KeyboardDefaults()
+			this.map.div.tabIndex = 0
+			keyboardControls.observeElement = this.map.div
+			this.map.addControl(keyboardControls)
+		}
+
 		// Disable zoom on mouse wheel
 		if( this.options.enableWheelZoom ) {
 			// Do nothing. Enabled by default