Map layout and interface improvements (#9288)

* Map layout and interface improvements
* Fix marker not showing up on geocoder search
* Replaced geocoder search placeholder
* Fix geocoder hit area
* Fix item popup positioning
* Removed unselect button
* Removed "No results" popup
* Removed option to filter map on demand vs automatically
* Renamed Geometry field option
* Added placeholder to template option
* Hide "Delete" button when no feature are selected

* Lint fix

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/interfaces/map/map.vue

@@ -1,6 +1,13 @@
 <template>
 	<div class="interface-map">
-		<div class="map" :class="{ loading: mapLoading, error: geometryParsingError || geometryOptionsError }">
+		<div
+			class="map"
+			:class="{
+				loading: mapLoading,
+				error: geometryParsingError || geometryOptionsError,
+				'has-selection': selection.length > 0,
+			}"
+		>
 			<div ref="container" />
 		</div>
 		<div
@@ -58,15 +65,14 @@
 import 'maplibre-gl/dist/maplibre-gl.css';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 import { defineComponent, onMounted, onUnmounted, PropType, ref, watch, toRefs, computed } from 'vue';
-import {
+import maplibre, {
 	LngLatLike,
 	LngLatBoundsLike,
 	AnimationOptions,
 	CameraOptions,
 	Map,
 	NavigationControl,
 	GeolocateControl,
-	PointLike,
 } from 'maplibre-gl';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 // @ts-ignore
@@ -152,6 +158,7 @@ export default defineComponent({
 		const geometryType = (props.fieldData?.schema?.geometry_type ?? props.geometryType) as GeometryType;
 		const geometryFormat = props.geometryFormat || getGeometryFormatForType(props.type)!;
 
+		const mapboxKey = getSetting('mapbox_key');
 		const basemaps = getBasemapSources();
 		const appStore = useAppStore();
 		const { basemap } = toRefs(appStore);
@@ -169,15 +176,15 @@ export default defineComponent({
 			geometryOptionsError.value = error;
 		}
 
+		const selection = ref<GeoJSON.Feature[]>([]);
+
 		const location = ref<LngLatLike | null>();
 		const projection = ref<{ x: number; y: number } | null>();
 		function updateProjection() {
 			projection.value = !location.value ? null : map.project(location.value as any);
 		}
 		watch(location, updateProjection);
 
-		const mapboxKey = getSetting('mapbox_key');
-
 		const controls = {
 			draw: new MapboxDraw(getDrawOptions(geometryType)),
 			fitData: new ButtonControl('mapboxgl-ctrl-fitdata', fitDataBounds),
@@ -194,6 +201,8 @@ export default defineComponent({
 						collapsed: true,
 						flyTo: { speed: 1.4 },
 						marker: false,
+						mapboxgl: maplibre as any,
+						placeholder: t('layouts.map.find_location'),
 				  }) as any),
 		};
 
@@ -238,6 +247,7 @@ export default defineComponent({
 			basemap,
 			location,
 			projection,
+			selection,
 		};
 
 		function setupMap(): () => void {
@@ -275,6 +285,7 @@ export default defineComponent({
 				map.on('draw.delete', handleDrawUpdate);
 				map.on('draw.update', handleDrawUpdate);
 				map.on('draw.modechange', handleDrawModeChange);
+				map.on('draw.selectionchange', handleSelectionChange);
 				map.on('move', updateProjection);
 				for (const layer of activeLayers) {
 					map.on('mousedown', layer, hideTooltip);
@@ -437,6 +448,10 @@ export default defineComponent({
 			}
 		}
 
+		function handleSelectionChange(event: any) {
+			selection.value = event.features;
+		}
+
 		function handleDrawUpdate() {
 			currentGeometry = getCurrentGeometry();
 			if (!currentGeometry) {
@@ -447,7 +462,7 @@ export default defineComponent({
 			}
 		}
 
-		function handleKeyDown(event) {
+		function handleKeyDown(event: any) {
 			if ([8, 46].includes(event.keyCode)) {
 				controls.draw.trash();
 			}
@@ -477,6 +492,10 @@ export default defineComponent({
 			width: 100%;
 			height: 100%;
 		}
+
+		&:not(.has-selection) :deep(.mapbox-gl-draw_trash) {
+			display: none;
+		}
 	}
 
 	.v-info {
@@ -528,13 +547,13 @@ export default defineComponent({
 	pointer-events: none;
 }
 
-:deep(.fade-enter-active),
-:deep(.fade-leave-active) {
+.fade-enter-active,
+.fade-leave-active {
 	transition: opacity var(--medium) var(--transition);
 }
 
-:deep(.fade-enter-from),
-:deep(.fade-leave-to) {
+.fade-enter-from,
+.fade-leave-to {
 	opacity: 0;
 }
 </style>

app/src/lang/translations/bg-BG.yaml

@@ -993,7 +993,7 @@ field_options:
     auth_password_policy:
       none_text: Няма - не се препоръчва
       weak_text: Слаба - минимум от 8 символа
-      strong_text: Силна - главни, малки, числа и специални символи 
+      strong_text: Силна - главни, малки, числа и специални символи
     storage_asset_presets:
       fit:
         contain_text: Напасване (запазване на съотношението)
@@ -1557,19 +1557,13 @@ layouts:
     map: Географска карта
     basemap: Основна карта
     layers: Слоеве
-    edit_custom_layers: Редактиране на слоевете
     cluster_options: Настройки за групиране
     cluster: Групиране на близките обекти
     cluster_radius: Радиус за групиране
     cluster_minpoints: Минимален размер при групиране
     cluster_maxzoom: Максимално увеличение при групиране
     field: Геометрия
     invalid_geometry: Невалидна геометрия
-    auto_location_filter: Филтриране според изгледа
-    search_this_area: Търсене в тази зона
-    clear_data_filter: Изчистване на филтрирането
-    clear_location_filter: Изчистване на филтрирането
-    no_results_here: Няма резултати в тази зона
 panels:
   metric:
     name: Метричен Индикатор

app/src/lang/translations/ca-ES.yaml

@@ -1319,7 +1319,6 @@ layouts:
     map: Mapa
     basemap: Mapa base
     layers: Capes
-    edit_custom_layers: Edita capes
     cluster_options: Opcions de clustering
     cluster_radius: Radi del cluster
     cluster_minpoints: Mida mínima del clúster

app/src/lang/translations/da-DK.yaml

@@ -1475,18 +1475,12 @@ layouts:
   map:
     map: Kort
     layers: Lag
-    edit_custom_layers: Rediger Lag
     cluster_options: Indstillinger for klyngedannelse
     cluster: Klynge Nærliggende Data
     cluster_minpoints: Mindste klyngestørrelse
     cluster_maxzoom: Maksimum zoom til klyngedannelse
     field: Geometri
     invalid_geometry: Ugyldig geometri
-    auto_location_filter: Auto-filter inden for visning
-    search_this_area: Søg i dette område
-    clear_data_filter: Ryd datafilter
-    clear_location_filter: Ryd placeringsfilter
-    no_results_here: Ingen resultater i dette område
 panels:
   metric:
     name: Metrisk

app/src/lang/translations/de-DE.yaml

@@ -1557,19 +1557,13 @@ layouts:
     map: Karte
     basemap: Basiskarte
     layers: Ebenen
-    edit_custom_layers: Ebenen bearbeiten
     cluster_options: Cluster-Optionen
     cluster: Cluster Nachbardaten
     cluster_radius: Cluster-Radius
     cluster_minpoints: Kleinstes Cluster
     cluster_maxzoom: Maximaler Zoom für Cluster
     field: Dimensionen
     invalid_geometry: Ungültige Geometrie
-    auto_location_filter: Auto-Filter in der Ansicht
-    search_this_area: Diesen Bereich durchsuchen
-    clear_data_filter: Datenfilter löschen
-    clear_location_filter: Standortfilter löschen
-    no_results_here: Keine Ergebnisse in diesem Bereich
 panels:
   metric:
     name: Metrik

app/src/lang/translations/en-US.yaml

@@ -1571,19 +1571,15 @@ layouts:
     map: Map
     basemap: Basemap
     layers: Layers
-    edit_custom_layers: Edit Layers
     cluster_options: Clustering options
     cluster: Cluster Nearby Data
     cluster_radius: Cluster radius
     cluster_minpoints: Cluster minimum size
     cluster_maxzoom: Maximum zoom for clustering
-    field: Geometry
+    field: Geospatial Field
     invalid_geometry: Invalid geometry
-    auto_location_filter: Auto-Filter within View
-    search_this_area: Search this area
-    clear_data_filter: Clear data filter
-    clear_location_filter: Clear location filter
-    no_results_here: No results in this area
+    find_location: Find location...
+    default_template: Using Collection Default...
 
 panels:
   metric:

app/src/lang/translations/fr-FR.yaml

@@ -1403,7 +1403,7 @@ interfaces:
     name: Détail du groupe
     description: Rendre les champs comme une section pliable
     show_header: En-tête de groupe
-    header_icon: Icônes de l'en-tête 
+    header_icon: Icônes de l'en-tête
     header_color: Couleur d'en-tête
     start_open: Démarrer Ouverture
     start_closed: Commencer réduit
@@ -1522,20 +1522,14 @@ layouts:
     end_date_field: Champ Date de fin
   map:
     map: Carte
-    basemap: Carte de base
+    basemap: Fond de carte
     layers: Afficher...
-    edit_custom_layers: Modifier la couche
     cluster_options: Options de regroupement
     cluster_radius: Rayon de grappe
     cluster_minpoints: Taille minimale du cluster
     cluster_maxzoom: Zoom maximum pour la grappe
-    field: Géométrie
+    field: Champ de la géométrie
     invalid_geometry: Géométrie invalide
-    auto_location_filter: Filtre automatique dans la vue
-    search_this_area: Chercher dans cette zone
-    clear_data_filter: Réinitialiser le filtre
-    clear_location_filter: Réinitialiser le filtre de localisation
-    no_results_here: Aucun résultat dans cette zone
 panels:
   metric:
     name: Indicateurs

app/src/lang/translations/hu-HU.yaml

@@ -1495,7 +1495,6 @@ layouts:
     map: Térkép
     basemap: Alaptérkép
     layers: Rétegek
-    edit_custom_layers: Rétegek szerkesztése
     cluster_options: Klaszterezés beállításai
     cluster_radius: Klaszter sugara
     cluster_minpoints: Minimális klaszter méret

app/src/lang/translations/it-IT.yaml

@@ -1530,19 +1530,13 @@ layouts:
     map: Mappa
     basemap: Mappa base
     layers: Livelli
-    edit_custom_layers: Modifica i livelli
     cluster_options: Opzioni di raggruppamento
     cluster: Raggruppa dati vicini
     cluster_radius: Raggio del Cluster
     cluster_minpoints: Dimensione minima del cluster
     cluster_maxzoom: Zoom massimo per il raggruppamento
     field: Geometria
     invalid_geometry: Geometria non valida
-    auto_location_filter: Filtro automatico nella vista
-    search_this_area: Cerca in quest'area
-    clear_data_filter: Rimuovi il filtro sui dati
-    clear_location_filter: Rimuovi il filtro sulla posizione
-    no_results_here: Non ci sono risultati in quest'area
 panels:
   metric:
     name: Metrica

app/src/lang/translations/pl-PL.yaml

@@ -1554,19 +1554,13 @@ layouts:
     map: Mapa
     basemap: Mapa bazowa
     layers: Warstwy
-    edit_custom_layers: Edytuj warstwy
     cluster_options: Opcje klastrowania
     cluster: Klaster danych w pobliżu
     cluster_radius: Promień klastra
     cluster_minpoints: Minimalny rozmiar klastra
     cluster_maxzoom: Maksymalne powiększenie klastrów
     field: Geometria
     invalid_geometry: Nieprawidłowa geometria
-    auto_location_filter: Automatyczne filtrowanie w widoku
-    search_this_area: Przeszukaj ten obszar
-    clear_data_filter: Wyczyść filtr danych
-    clear_location_filter: Wyczyść filtr lokalizacji
-    no_results_here: Brak wyników w tym obszarze
 panels:
   metric:
     name: Metryczny

app/src/lang/translations/ru-RU.yaml

@@ -1518,7 +1518,6 @@ layouts:
     map: Карта
     basemap: Основа карты
     layers: Слои
-    edit_custom_layers: Редактировать слои
     cluster_options: Настройки кластеров
     cluster_radius: Радиус кластера
     cluster_minpoints: Минимальный размер кластера

app/src/lang/translations/sl-SI.yaml

@@ -1370,7 +1370,6 @@ layouts:
     map: Zemljevid
     basemap: Osnovni zemljevid
     layers: Plasti
-    edit_custom_layers: Uredi plasti
     cluster_options: Možnosti gruče
     cluster_radius: Polmer gruče
     cluster_minpoints: Minimalna velikost gruče

app/src/lang/translations/zh-CN.yaml

@@ -1485,7 +1485,6 @@ layouts:
     map: 地图
     basemap: 底图
     layers: 图层
-    edit_custom_layers: 编辑图层
     cluster_options: 集群选项
     cluster_radius: 集群半径
     cluster_minpoints: 集群最小尺寸

app/src/layouts/map/components/map.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts">
 import 'maplibre-gl/dist/maplibre-gl.css';
-import {
+import maplibre, {
 	MapboxGeoJSONFeature,
 	MapLayerMouseEvent,
 	AttributionControl,
@@ -24,6 +24,7 @@ import {
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
 import { ref, watch, PropType, onMounted, onUnmounted, defineComponent, toRefs, computed, WatchStopHandle } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import getSetting from '@/utils/get-setting';
 import { useAppStore } from '@/stores';
@@ -64,6 +65,7 @@ export default defineComponent({
 	},
 	emits: ['moveend', 'featureclick', 'featureselect', 'fitdata', 'updateitempopup'],
 	setup(props, { emit }) {
+		const { t } = useI18n();
 		const appStore = useAppStore();
 		let map: Map;
 		const hoveredFeature = ref<MapboxGeoJSONFeature>();
@@ -90,7 +92,6 @@ export default defineComponent({
 		const boxSelectControl = new BoxSelectControl({
 			boxElementClass: 'map-selection-box',
 			selectButtonClass: 'mapboxgl-ctrl-select',
-			unselectButtonClass: 'mapboxgl-ctrl-unselect',
 			layers: ['__directus_polygons', '__directus_points', '__directus_lines'],
 		});
 		let geocoderControl: MapboxGeocoder | undefined;
@@ -102,6 +103,8 @@ export default defineComponent({
 				collapsed: true,
 				marker: { element: marker } as any,
 				flyTo: { speed: 1.4 },
+				mapboxgl: maplibre as any,
+				placeholder: t('layouts.map.find_location'),
 			});
 		}
 		onMounted(() => {
@@ -176,7 +179,7 @@ export default defineComponent({
 		}
 
 		function fitBounds() {
-			const bbox = props.data.bbox?.map((x) => x % 90);
+			const bbox = props.data.bbox;
 			if (map && bbox) {
 				map.fitBounds(bbox as LngLatBoundsLike, {
 					padding: 100,
@@ -247,7 +250,6 @@ export default defineComponent({
 			newSelection?.forEach((id) => {
 				map.setFeatureState({ id, source: '__directus' }, { selected: true });
 			});
-			boxSelectControl.showUnselect(newSelection?.length);
 		}
 
 		function onFeatureClick(event: MapLayerMouseEvent) {