Support places search in viewfinder view

Replace lat,long-only search with search for reqular query strings.

fixes NCEAS#2280
fixes NCEAS#2270
fixes NCEAS#1796

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);
+    }
+  }
 }

src/js/models/maps/viewfinder/ViewfinderModel.js

@@ -1,4 +1,5 @@
 'use strict';
+
 define(
   [
     'underscore',

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>

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 (
     $,