Fix non-native geometries not visible in map layout (#10308)

* Fix non-native geometries not showing up in map layout
* Don't add bbox to edited and parsed geometries

app/src/interfaces/map/map.vue

@@ -257,7 +257,7 @@ export default defineComponent({
 				...(mapboxKey ? { accessToken: mapboxKey } : {}),
 			});
 			if (controls.geocoder) {
-				map.addControl(controls.geocoder, 'top-right');
+				map.addControl(controls.geocoder as any, 'top-right');
 				controls.geocoder.on('result', (event: any) => {
 					location.value = event.result.center;
 				});
@@ -336,7 +336,8 @@ export default defineComponent({
 
 		function fitDataBounds(options: CameraOptions & AnimationOptions) {
 			if (map && currentGeometry) {
-				map.fitBounds(currentGeometry.bbox! as LngLatBoundsLike, {
+				const bbox = getBBox(currentGeometry);
+				map.fitBounds(bbox as LngLatBoundsLike, {
 					padding: 80,
 					maxZoom: 8,
 					...options,
@@ -432,7 +433,6 @@ export default defineComponent({
 			} else {
 				result = geometries[geometries.length - 1];
 			}
-			result!.bbox = getBBox(result!);
 			return result;
 		}
 

app/src/layouts/map/index.ts

@@ -6,7 +6,7 @@ import MapActions from './actions.vue';
 import { useI18n } from 'vue-i18n';
 import { toRefs, computed, ref, watch } from 'vue';
 
-import { toGeoJSON } from '@/utils/geometry';
+import { toGeoJSON, getGeometryFormatForType } from '@/utils/geometry';
 import { layers as directusLayers } from './style';
 import { useRouter } from 'vue-router';
 import { useSync } from '@directus/shared/composables';
@@ -64,23 +64,11 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		const cameraOptions = syncRefProperty(layoutOptions, 'cameraOptions', undefined);
 		const clusterData = syncRefProperty(layoutOptions, 'clusterData', false);
 		const geometryField = syncRefProperty(layoutOptions, 'geometryField', undefined);
-		const geometryFormat = computed<GeometryFormat | undefined>({
-			get: () => layoutOptions.value?.geometryFormat,
-			set(newValue: GeometryFormat | undefined) {
-				layoutOptions.value = {
-					...(layoutOptions.value || {}),
-					geometryFormat: newValue,
-					geometryField: undefined,
-				};
-			},
-		});
 
 		const geometryFieldData = computed(() => {
 			return fieldsInCollection.value.find((f: Field) => f.field == geometryField.value);
 		});
 
-		const isGeometryFieldNative = computed(() => geometryFieldData.value?.type.startsWith('geometry'));
-
 		const geometryFields = computed(() => {
 			return (fieldsInCollection.value as Field[]).filter(
 				({ type, meta }) => type.startsWith('geometry') || meta?.interface == 'map'
@@ -103,7 +91,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 				return;
 			}
 			const geometryField = field.field;
-			const geometryFormat = isGeometryFieldNative.value ? 'native' : field.meta?.options?.geometryFormat;
+			const geometryFormat = getGeometryFormatForType(field.type);
 			const geometryType = field.type.split('.')[1] ?? field.meta?.options?.geometryType;
 			if (!geometryFormat) {
 				return;
@@ -111,6 +99,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			return { geometryField, geometryFormat, geometryType };
 		});
 
+		const isGeometryFieldNative = computed(() => geometryOptions.value?.geometryFormat === 'native');
+
 		const template = computed(() => {
 			return displayTemplate.value || info.value?.meta?.display_template || `{{ ${primaryKeyField.value?.field} }}`;
 		});
@@ -293,7 +283,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			geometryOptions,
 			handleClick,
 			handleSelect,
-			geometryFormat,
 			geometryField,
 			displayTemplate,
 			isGeometryFieldNative,

app/src/layouts/map/types.ts

@@ -1,5 +1,4 @@
 import { CameraOptions } from 'maplibre-gl';
-import { GeometryFormat } from '@directus/shared/types';
 
 export type LayoutQuery = {
 	fields: string[];
@@ -10,7 +9,6 @@ export type LayoutQuery = {
 
 export type LayoutOptions = {
 	cameraOptions?: CameraOptions & { bbox: any };
-	geometryFormat?: GeometryFormat;
 	geometryField?: string;
 	autoLocationFilter?: boolean;
 	clusterData?: boolean;

app/src/utils/geometry/index.ts

@@ -82,7 +82,6 @@ export function getParser(options: GeometryOptions): GeoJSONParser {
 		const geomRaw = entry[options.geometryField];
 		const geom = geomRaw && parse(geomRaw);
 		if (!geom) return undefined;
-		geom.bbox = getBBox(geom);
 		return geom;
 	};
 }
@@ -99,7 +98,7 @@ export function toGeoJSON(entries: any[], options: GeometryOptions): FeatureColl
 	for (let i = 0; i < entries.length; i++) {
 		const geometry = parser(entries[i]);
 		if (!geometry) continue;
-		const [a, b, c, d] = geometry.bbox!;
+		const [a, b, c, d] = getBBox(geometry);
 		geojson.bbox = expandBBox(geojson.bbox!, [a, b]);
 		geojson.bbox = expandBBox(geojson.bbox!, [c, d]);
 		const properties = { ...entries[i] };