Support places search in viewfinder view

Replace lat,long-only search with search for reqular query strings. fixes #2280 fixes #2270 fixes #1796
NCEAS · Mar 6, 2024 · 81e357c · 81e357c
1 parent bdd4e21
commit 81e357c
Show file tree

Hide file tree

Showing 12 changed files with 843 additions and 405 deletions.
diff --git a/docs/screenshots/views/maps/viewfinder/ViewfinderView.png b/docs/screenshots/views/maps/viewfinder/ViewfinderView.png
diff --git a/src/css/map-view.css b/src/css/map-view.css
@@ -50,7 +50,8 @@
 }
 
 /* hide the credits until we can find a better placement for them */
-.cesium-widget-credits, .cesium-credit-lightbox-overlay {
+.cesium-widget-credits,
+.cesium-credit-lightbox-overlay {
   display: none !important;
 }
 
@@ -991,7 +992,7 @@ other class: .ui-slider-range */
  *
  */
 
-.map-help-panel{
+.map-help-panel {
   width: 100%;
 }
 
@@ -1060,7 +1061,7 @@ other class: .ui-slider-range */
   align-items: center;
 }
 
-.map-help-panel__title{
+.map-help-panel__title {
   text-transform: uppercase;
   font-size: 0.95rem;
   font-weight: 600;
@@ -1073,6 +1074,10 @@ other class: .ui-slider-range */
   margin-top: 2.5rem;
 }
 
+.viewfinder {
+  width: 100%;
+}
+
 .viewfinder__field {
   border-radius: 4px;
   border: 1px solid var(--portal-col-bkg-active);
@@ -1091,6 +1096,7 @@ other class: .ui-slider-range */
     flex: 1;
     height: 100%;
     margin: 0;
+    height: 48px;
 
     &:focus {
       border: none;
@@ -1114,4 +1120,46 @@ other class: .ui-slider-range */
   color: var(--map-col-text);
   font-size: .8rem;
   padding: 4px 12px;
+}
+
+.viewfinder-predictions {
+  list-style: none;
+  margin: 0;
+
+  .viewfinder-prediction__content {
+    align-items: center;
+    background: var(--map-col-bkg);
+    border: 1px solid var(--portal-col-bkg-active);
+    border-radius: 4px;
+    box-sizing: border-box;
+    color: var(--map-col-text);
+    cursor: pointer;
+    display: flex;
+    height: 48px;
+    justify-content: flex-start;
+    margin: 4px 0;
+    padding: 12px 8px;
+
+    >* {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    i {
+      flex-grow: 0;
+      min-width: 24px;
+      max-width: 24px;
+      text-align: center;
+    }
+
+    &:hover {
+      background-color: var(--map-col-bkg-lightest);
+    }
+
+    &.viewfinder-prediction__focused {
+      background-color: var(--map-col-bkg-lighter);
+    }
+  }
 }
diff --git a/src/js/models/maps/viewfinder/ViewfinderModel.js b/src/js/models/maps/viewfinder/ViewfinderModel.js
@@ -1,4 +1,5 @@
 'use strict';
+
 define(
   [
     'underscore',
@@ -104,39 +105,6 @@ define(
         this.set('focusIndex', -1);
       },
 
-      /**
-       * Event handler for Backbone.View configuration that is called whenever 
-       * the user clicks the search button or hits the Enter key.
-       * @param {string} value is the query string.
-       */
-      async search(value) {
-        // This is not a lat,long value, so geocode the prediction instead.
-        if (!GeoPoint.couldBeLatLong(value)) {
-          const focusedIndex = Math.max(0, this.get("focusIndex"));
-          this.selectPrediction(this.get('predictions')[focusedIndex]);
-          return;
-        }
-
-        try {
-          const geoPoint = GeoPoint.fromString(value);
-          geoPoint.set("height", 10000 /* meters */);
-          if (geoPoint.isValid()) {
-            this.set('error', '');
-            this.mapModel.zoomTo(geoPoint);
-            return;
-          }
-
-          const errors = geoPoint.validationError;
-          if (errors.latitude) {
-            this.set('error', errors.latitude);
-          } else if (errors.longitude) {
-            this.set('error', errors.longitude);
-          }
-        } catch (e) {
-          this.set('error', e.message);
-        }
-      },
-
       /** 
        * Navigate to the GeocodedLocation. 
        * @param {GeocodedLocation} geocoding is the location that corresponds
@@ -164,7 +132,7 @@ define(
       async selectPrediction(prediction) {
         if (!prediction) return;
 
-        const geocodings = await this.geocoderSearch.searchByPlaceId(
+        const geocodings = await this.geocoderSearch.geocode(
           prediction.get('googleMapsPlaceId')
         );
 
@@ -176,6 +144,39 @@ define(
         this.trigger('selection-made', prediction.get('description'));
         this.goToLocation(geocodings[0]);
       },
+
+      /**
+       * Event handler for Backbone.View configuration that is called whenever 
+       * the user clicks the search button or hits the Enter key.
+       * @param {string} value is the query string.
+       */
+      async search(value) {
+        // This is not a lat,long value, so geocode the prediction instead.
+        if (!GeoPoint.couldBeLatLong(value)) {
+          const focusedIndex = Math.max(0, this.get("focusIndex"));
+          this.selectPrediction(this.get('predictions')[focusedIndex]);
+          return;
+        }
+
+        try {
+          const geoPoint = GeoPoint.fromString(value);
+          geoPoint.set("height", 10000 /* meters */);
+          if (geoPoint.isValid()) {
+            this.set('error', '');
+            this.mapModel.zoomTo(geoPoint);
+            return;
+          }
+
+          const errors = geoPoint.validationError;
+          if (errors.latitude) {
+            this.set('error', errors.latitude);
+          } else if (errors.longitude) {
+            this.set('error', errors.longitude);
+          }
+        } catch (e) {
+          this.set('error', e.message);
+        }
+      },
     });
 
     return ViewfinderModel;

diff --git a/src/js/templates/maps/viewfinder/viewfinder.html b/src/js/templates/maps/viewfinder/viewfinder.html
@@ -1,19 +1,15 @@
-<div class="<%= classNames.baseClass %>">
-  <h2>Viewfinder</h2>
-  <span>Enter a latitude and longitude pair and click search to show that point on the map.</span>
-  <br /><br />
-  <div class="viewfinder__form-field">
-    <div class="viewfinder__field">
-      <input class="<%= classNames.input %>" type="text" placeholder="<%= placeholder %>" value="<%= inputValue %>" />
-      <button class="<%= classNames.button %>">
-        <i class="icon icon-search"></i>
-      </button>
-    </div>
+<h2>Viewfinder</h2>
+<div class="viewfinder__form-field">
+  <div class="viewfinder__field">
+    <input class="<%= classNames.input %>" type="text" placeholder="<%= placeholder %>" value="<%= inputValue %>" />
+    <button class="<%= classNames.button %>">
+      <i class="icon icon-search"></i>
+    </button>
+  </div>
 
-    <% if(errorMessage) { %>
-      <div class="viewfinder__error">
-        <%= errorMessage %>
-      </div>
-      <% } %>
+  <div class="<%= classNames.error %>">
+    <%= errorMessage %>
   </div>
-</div>
+</div>
+
+<div class="<%= classNames.predictions %>" tabindex="0"></div>
diff --git a/src/js/views/maps/ToolbarView.js b/src/js/views/maps/ToolbarView.js
@@ -11,7 +11,7 @@ define(
     'views/maps/LayerListView',
     'views/maps/DrawToolView',
     'views/maps/HelpPanelView',
-    'views/maps/ViewfinderView',
+    'views/maps/viewfinder/ViewfinderView',
   ],
   function (
     $,