Add Manual bbox entry option to search page

src/components/BBoxEntry.vue

@@ -0,0 +1,95 @@
+<template>
+  <b-container>
+    <b-form-row>
+      <b-col>
+        <b-form-group label="Southwest Latitude" label-for="sw_latitude">
+          <b-form-input
+            id="sw_latitude"
+            @input="updateBBoxArray($event, 0)" 
+            :value="bbox[0]"
+            type="number"
+            no-wheel
+            step="any"
+            min="-180"
+            max="180"
+          />
+        </b-form-group>
+      </b-col>
+      <b-col>
+        <b-form-group label="Southwest Longitude" label-for="sw_longitude">
+          <b-form-input
+            id="sw_longitude"
+            @input="updateBBoxArray($event, 1)" 
+            :value="bbox[1]"
+            type="number"
+            no-wheel
+            step="any"
+            min="-90"
+            max="90"
+          />
+        </b-form-group>
+      </b-col>
+    </b-form-row>
+    <b-form-row>
+      <b-col>
+        <b-form-group label="Northeast Latitude" label-for="ne_latitude">  
+          <b-form-input
+            id="ne_latitude"
+            @input="updateBBoxArray($event, 2)" 
+            :value="bbox[2]"
+            type="number"
+            no-wheel
+            step="any"
+            min="-180"
+            max="180"
+          />
+        </b-form-group>
+      </b-col>
+      <b-col>
+        <b-form-group label="Northeast Longitude" label-for="ne_longitude">
+          <b-form-input
+            id="ne_longitude"
+            @input="updateBBoxArray($event, 3)"
+            :value="bbox[3]"
+            type="number"
+            no-wheel
+            step="any"
+            min="-90"
+            max="90"
+          />
+        </b-form-group>
+      </b-col>
+    </b-form-row>
+  </b-container>
+</template>
+
+<script>
+import { BFormInput, BFormGroup} from 'bootstrap-vue';
+
+export default {
+  name: 'BBoxEntry',
+components: {
+    BFormGroup,
+    BFormInput,
+  },
+props: {
+    bbox: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    updateBBoxArray($event, position) {
+     this.$emit('updateBBoxArray', $event, position);
+   }
+ }
+};
+</script>
+
+<style lang="scss">
+@import "../theme/variables.scss";
+
+legend {
+  font-size: 1.3em
+}
+</style>

src/components/SearchFilter.vue

@@ -27,8 +27,19 @@
         </b-form-group>
 
         <b-form-group v-if="canFilterExtents" :label="$t('search.spatialExtent')" :label-for="ids.bbox">
-          <b-form-checkbox :id="ids.bbox" v-model="provideBBox" value="1" @change="setBBox()">{{ $t('search.filterBySpatialExtent') }}</b-form-checkbox>
-          <Map class="mb-4" v-if="provideBBox" :stac="stac" selectBounds @bounds="setBBox" scrollWheelZoom />
+          <b-form-checkbox :id="ids.bbox" v-model="provideBBox" @change="setBBox()">{{ $t('search.filterBySpatialExtent') }}</b-form-checkbox>
+          <template>
+            <b-form-group v-if="provideBBox">
+              <b-tabs>
+                <b-tab v-model="bboxSelectionStyle" :title="$t('search.defineBbox.map')">
+                  <Map class="mb-4" :stac="stac" selectBounds @bounds="setBBox" scrollWheelZoom />
+                </b-tab>
+                <b-tab v-model="bboxSelectionStyle" :title="$t('search.defineBbox.text')">
+                  <BBoxEntry :bbox="query.bbox || [-180, -80, 180, 80]" @updateBBoxArray="updateBBoxArray" />
+                </b-tab>
+              </b-tabs>
+            </b-form-group>
+          </template>
         </b-form-group>
 
         <b-form-group v-if="conformances.CollectionIdFilter" :label="$tc('stacCollection', collections.length)" :label-for="ids.collections">
@@ -118,11 +129,12 @@
 </template>
 
 <script>
-import { BBadge, BDropdown, BDropdownItem, BForm, BFormGroup, BFormInput, BFormCheckbox, BFormRadioGroup } from 'bootstrap-vue';
+import { BBadge, BDropdown, BDropdownItem, BForm, BFormGroup, BFormInput, BFormCheckbox, BFormRadioGroup, BTabs, BTab } from 'bootstrap-vue';
 import Multiselect from 'vue-multiselect';
 import { mapGetters, mapState } from "vuex";
 import refParser from '@apidevtools/json-schema-ref-parser';
 
+import BBoxEntry from './BBoxEntry.vue';
 import Utils, { schemaMediaType } from '../utils';
 import { ogcQueryables } from "../rels";
 
@@ -159,7 +171,8 @@ function getDefaults() {
     query: getQueryDefaults(),
     filtersAndOr: 'and',
     filters: [],
-    selectedCollections: []
+    selectedCollections: [],
+    bboxSelectionStyle: 'map'
   };
 }
 
@@ -169,13 +182,16 @@ export default {
   name: 'SearchFilter',
   components: {
     BBadge,
+    BBoxEntry,
     BDropdown,
     BDropdownItem,
     BForm,
     BFormGroup,
     BFormInput,
     BFormCheckbox,
     BFormRadioGroup,
+    BTabs,
+    BTab,
     QueryableInput: () => import('./QueryableInput.vue'),
     Loading,
     Map: () => import('./Map.vue'),
@@ -518,9 +534,17 @@ export default {
     setSearchTerms(terms) {
       this.$set(this.query, 'q', terms);
     },
+    updateBBoxArray(entry, position) {
+      const bbox = this.query.bbox;
+      bbox[position] = Number(entry);
+      this.$set(this.query, 'bbox', bbox);
+    },
     setBBox(bounds) {
       let bbox = null;
       if (this.provideBBox) {
+        if(this.bboxSelectionStyle ==="text") {
+          console.log("bbox selection is text")
+        }
         if (Utils.isObject(bounds) && typeof bounds.toBBoxString === 'function') {
           // This is a Leaflet LatLngBounds Object
           const Y = 85.06;

src/locales/en/texts.json

@@ -196,6 +196,10 @@
     "addSearchTerm": "Press enter to add a search term",
     "additionalFilters": "Additional filters",
     "dateDescription": "All times in Coordinated Universal Time (UTC).",
+    "defineBbox": {
+      "map": "Draw bounding box on map",
+      "text": "Enter coordinates"
+    },
     "enterCollections": "Enter one or more Collection IDs...",
     "enterItemIds": "Enter one or more Item IDs...",
     "enterSearchTerms": "Enter one or more search terms...",