Location view

client/package.json

@@ -24,6 +24,7 @@
     "django-s3-file-field": "1.1.0",
     "geojs": "1.19.0",
     "lodash": "4.17.23",
+    "maplibre-gl": "5.17.0",
     "vue": "3.5.30",
     "vue-router": "5.0.4",
     "vuetify": "3.12.3"
@@ -38,7 +39,7 @@
     "eslint-plugin-vue": "10.8.0",
     "sass-embedded": "^1.98.0",
     "typescript": "5.9.3",
-    "vite": "8.0.2",
+    "vite": "8.0.3",
     "vite-plugin-vuetify": "2.1.3",
     "vue-tsc": "3.2.6"
   }

client/src/api/api.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 import { AxiosError } from "axios";
 import { SpectroInfo } from "@components/geoJS/geoJSUtils";
+import type { FeatureCollection, Point } from "geojson";
 
 export interface Recording {
   id: number;
@@ -31,6 +32,13 @@ export interface Recording {
   tags_text?: string[];
 }
 
+export type RecordingLocationsFeatureProperties = {
+  recording_id: number;
+  filename: string;
+};
+
+export type RecordingLocationsGeoJson = FeatureCollection<Point, RecordingLocationsFeatureProperties>;
+
 export interface Species {
   species_code: string;
   family: string;
@@ -287,6 +295,8 @@ export interface RecordingListParams {
   sort_direction?: 'asc' | 'desc';
   page?: number;
   limit?: number;
+  /** WGS84 [minLon, minLat, maxLon, maxLat]; recordings must intersect this box. */
+  bbox?: [number, number, number, number];
 }
 
 /** Paginated recording list response (v-data-table-server compatible). */
@@ -315,6 +325,13 @@ async function getRecordings(getPublic = false, params?: RecordingListParams) {
     if (params.sort_direction) query.set('sort_direction', params.sort_direction);
     if (params.page !== undefined) query.set('page', String(params.page));
     if (params.limit !== undefined) query.set('limit', String(params.limit));
+    if (
+      params.bbox !== undefined &&
+      params.bbox.length === 4 &&
+      params.bbox.every((n) => Number.isFinite(n))
+    ) {
+      query.set('bbox', params.bbox.join(','));
+    }
   }
   if (!params?.page) query.set('page', '1');
   if (!params?.limit) query.set('limit', '20');
@@ -329,6 +346,8 @@ export interface UnsubmittedNeighborsParams {
   sort_direction?: 'asc' | 'desc';
   /** Comma-separated or array of tag texts; recording must have all listed tags. */
   tags?: string | string[];
+  /** Bounding box filter (lon/lat) as `[min_lon, min_lat, max_lon, max_lat]`. */
+  bbox?: [number, number, number, number];
 }
 
 export interface UnsubmittedNeighborsResponse {
@@ -347,6 +366,13 @@ async function getUnsubmittedNeighbors(
     const tagStr = Array.isArray(params.tags) ? params.tags.join(',') : params.tags;
     if (tagStr) query.set('tags', tagStr);
   }
+  if (
+    params?.bbox !== undefined &&
+    params.bbox.length === 4 &&
+    params.bbox.every((n) => Number.isFinite(n))
+  ) {
+    query.set('bbox', params.bbox.join(','));
+  }
   const response = await axiosInstance.get<UnsubmittedNeighborsResponse>(
     `/recording/unsubmitted-neighbors/?${query.toString()}`
   );
@@ -455,6 +481,28 @@ async function getCellBbox(cellId: number) {
   return await axiosInstance.get<GRTSCellBbox>(`/grts/${cellId}/bbox`);
 }
 
+export interface RecordingLocationsParams {
+  exclude_submitted?: boolean;
+  /** Comma-separated or array of tag texts; recording must have all listed tags. */
+  tags?: string | string[];
+  /** Bounding box filter (lon/lat) as `[min_lon, min_lat, max_lon, max_lat]`. */
+  bbox?: [number, number, number, number];
+}
+
+async function getRecordingLocations(params?: RecordingLocationsParams) {
+  const query = new URLSearchParams();
+  if (params?.exclude_submitted !== undefined) query.set("exclude_submitted", String(params.exclude_submitted));
+  if (params?.tags !== undefined) {
+    const tagStr = Array.isArray(params.tags) ? params.tags.join(",") : params.tags;
+    if (tagStr) query.set("tags", tagStr);
+  }
+  if (params?.bbox !== undefined && params.bbox.length === 4 && params.bbox.every((n) => Number.isFinite(n))) {
+    query.set("bbox", params.bbox.join(','));
+  }
+  const qs = query.toString();
+  return axiosInstance.get<RecordingLocationsGeoJson>(`/recording-locations/${qs ? `?${qs}` : ""}`);
+}
+
 async function getFileAnnotations(recordingId: number) {
   return axiosInstance.get<FileAnnotation[]>(`recording/${recordingId}/recording-annotations`);
 }
@@ -706,6 +754,7 @@ export {
   getCellLocation,
   getCellBbox,
   getCellfromLocation,
+  getRecordingLocations,
   getGuanoMetadata,
   getFileAnnotations,
   putFileAnnotation,

client/src/components/MapLocation.vue

@@ -21,6 +21,10 @@ export default defineComponent({
       type: Object as PropType<{ x?: number; y?: number } | undefined>,
       default: () => undefined,
     },
+    bbox: {
+      type: Array as unknown as PropType<[number, number, number, number] | null>,
+      default: null,
+    },
     grtsCellId: {
       type: Number,
       default: undefined,
@@ -63,8 +67,35 @@ export default defineComponent({
           position: { bottom: 10, left: 10},
         });
 
+        const drawBbox = (bounds: [number, number, number, number]) => {
+          const [west, south, east, north] = bounds;
+          const data = [
+            { x: west, y: south },
+            { x: east, y: south },
+            { x: east, y: north },
+            { x: west, y: north },
+            { x: west, y: south },
+          ];
+          bboxFeature.value.data([data]).style({
+            stroke: true,
+            strokeWidth: 2,
+            strokeColor: "black",
+            fill: true,
+            fillColor: "orange",
+            fillOpacity: 0.15,
+          }).draw();
+          bboxLayer.value.draw();
+          map.value.center({ x: (west + east) / 2, y: (south + north) / 2 });
+          map.value.zoom(6);
+        };
 
-        if (props.grtsCellId !== undefined) {
+        if (
+          props.bbox
+          && props.bbox.length === 4
+          && props.bbox.every((n) => Number.isFinite(n))
+        ) {
+          drawBbox(props.bbox);
+        } else if (props.grtsCellId !== undefined) {
           const annotation = await getCellBbox(props.grtsCellId);
           const coordinates = annotation.data.geometry.coordinates;
           const data = coordinates.map((point: number[]) => ({ x: point[0], y: point[1] }));
@@ -123,7 +154,36 @@ export default defineComponent({
       }
     });
     watch(() =>  props.updateMap, () => {
-      if (props.location?.x && props.location?.y) {
+      if (
+        props.bbox
+        && props.bbox.length === 4
+        && props.bbox.every((n) => Number.isFinite(n))
+        && bboxFeature.value
+        && map.value
+      ) {
+        const [west, south, east, north] = props.bbox;
+        const data = [
+          { x: west, y: south },
+          { x: east, y: south },
+          { x: east, y: north },
+          { x: west, y: north },
+          { x: west, y: south },
+        ];
+        bboxFeature.value
+          .data([data])
+          .style({
+            stroke: true,
+            strokeWidth: 2,
+            strokeColor: "black",
+            fill: true,
+            fillColor: "orange",
+            fillOpacity: 0.15,
+          })
+          .draw();
+        bboxLayer.value?.draw();
+        map.value.center({ x: (west + east) / 2, y: (south + north) / 2 });
+        map.value.zoom(6);
+      } else if (props.location?.x && props.location?.y) {
             markerLocation.value = { x: props.location?.x, y: props.location.y };
             markerFeature.value
               .data([markerLocation.value])