Map layout and interface improvements (#8628)

* Map layout and interface improvements:
* Disable drag to rotate
* Add keyboard shortcut to delete items
* Hide unselect button when selection is empty
* Add display template setting
* Fixed fitData button behaviour

* Removed unused hoveredFeatureId

* Added translations

* Expose clearFilters to the layout.

app/src/interfaces/map/map.vue

@@ -145,16 +145,15 @@ export default defineComponent({
 		const controls = {
 			draw: new MapboxDraw(getDrawOptions(geometryType)),
 			fitData: new ButtonControl('mapboxgl-ctrl-fitdata', fitDataBounds),
-			navigation: new NavigationControl(),
+			navigation: new NavigationControl({
+				showCompass: false,
+			}),
 			geolocate: new GeolocateControl(),
 		};
 
 		onMounted(() => {
-			setupMap();
-		});
-
-		onUnmounted(() => {
-			map.remove();
+			const cleanup = setupMap();
+			onUnmounted(cleanup);
 		});
 
 		return {
@@ -168,11 +167,12 @@ export default defineComponent({
 			basemap,
 		};
 
-		function setupMap() {
+		function setupMap(): () => void {
 			map = new Map({
 				container: container.value!,
 				style: style.value,
 				attributionControl: false,
+				dragRotate: false,
 				logoPosition: 'bottom-right',
 				...props.defaultView,
 				...(mapboxKey ? { accessToken: mapboxKey } : {}),
@@ -200,6 +200,7 @@ export default defineComponent({
 				map.on('draw.delete', handleDrawUpdate);
 				map.on('draw.update', handleDrawUpdate);
 				map.on('draw.modechange', handleDrawModeChange);
+				window.addEventListener('keydown', handleKeyDown);
 			});
 
 			watch(
@@ -247,6 +248,11 @@ export default defineComponent({
 					loadValueFromProps();
 				}
 			);
+
+			return () => {
+				window.removeEventListener('keydown', handleKeyDown);
+				map.remove();
+			};
 		}
 
 		function resetValue(hard: boolean) {
@@ -383,6 +389,12 @@ export default defineComponent({
 				emit('input', serialize(currentGeometry));
 			}
 		}
+
+		function handleKeyDown(event) {
+			if ([8, 46].includes(event.keyCode)) {
+				controls.draw.trash();
+			}
+		}
 	},
 });
 </script>