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,7 +65,7 @@
 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,
@@ -66,7 +73,6 @@ import {
 	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,6 +176,8 @@ 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() {
@@ -176,8 +185,6 @@ export default defineComponent({
 		}
 		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>