diff --git a/docs/screenshots/views/maps/viewfinder/PredictionView.png b/docs/screenshots/views/maps/viewfinder/PredictionView.png
new file mode 100644
index 000000000..2b724befa
Binary files /dev/null and b/docs/screenshots/views/maps/viewfinder/PredictionView.png differ
diff --git a/docs/screenshots/views/maps/viewfinder/PredictionsListView.png b/docs/screenshots/views/maps/viewfinder/PredictionsListView.png
new file mode 100644
index 000000000..f419be070
Binary files /dev/null and b/docs/screenshots/views/maps/viewfinder/PredictionsListView.png differ
diff --git a/src/js/models/geocoder/Prediction.js b/src/js/models/geocoder/Prediction.js
index 2f4bc2c21..822eb68b8 100644
--- a/src/js/models/geocoder/Prediction.js
+++ b/src/js/models/geocoder/Prediction.js
@@ -9,16 +9,16 @@ define(['backbone'], (Backbone) => {
* @since x.x.x
*/
const Prediction = Backbone.Model.extend({
- /**
- * Overrides the default Backbone.Model.defaults() function to specify
- * default attributes for the Map
- * @name Prediction#defaults
- * @type {Object}
- * @property {string} description A user-friendly description of a Google
- * Maps Place.
- * @property {string} googleMapsPlaceId Unique identifier that can be
- * geocoded by the Google Maps Geocoder API.
- */
+ /**
+ * Overrides the default Backbone.Model.defaults() function to specify
+ * default attributes for the Map
+ * @name Prediction#defaults
+ * @type {Object}
+ * @property {string} description A user-friendly description of a Google
+ * Maps Place.
+ * @property {string} googleMapsPlaceId Unique identifier that can be
+ * geocoded by the Google Maps Geocoder API.
+ */
defaults() {
return { description: '', googleMapsPlaceId: '' };
},
diff --git a/src/js/models/maps/viewfinder/ViewfinderModel.js b/src/js/models/maps/viewfinder/ViewfinderModel.js
new file mode 100644
index 000000000..3d7e438ac
--- /dev/null
+++ b/src/js/models/maps/viewfinder/ViewfinderModel.js
@@ -0,0 +1,173 @@
+'use strict';
+define(
+ [
+ 'underscore',
+ 'backbone',
+ 'cesium',
+ 'models/geocoder/GeocoderSearch',
+ 'models/maps/GeoPoint'],
+ (_, Backbone, Cesium, GeocoderSearch, GeoPoint) => {
+ const NO_RESULTS_MESSAGE = 'No search results found.';
+ /**
+ * @class ViewfinderModel
+ * @classdes ViewfinderModel maintains state for the ViewfinderView and
+ * interfaces with location searching services.
+ * @classcategory Models/Maps
+ */
+ const ViewfinderModel = Backbone.Model.extend({
+ /**
+ * @name ViewfinderModel#defaults
+ * @type {Object}
+ * @property {string} error is the current error string to be displayed
+ * in the UI.
+ * @property {number} focusIndex is the index of the element
+ * in the list of predictions that shoudl be highlighted as focus.
+ * @property {Prediction[]} predictions a list of Predictions models that
+ * correspond to the user's search query.
+ * @property {string} query the user's search query.
+ */
+ defaults() {
+ return {
+ error: '',
+ focusIndex: -1,
+ predictions: [],
+ query: '',
+ }
+ },
+
+ /**
+ * @param {Map} mapModel is the Map model that the ViewfinderModel is
+ * managing for the corresponding ViewfinderView.
+ */
+ initialize({ mapModel }) {
+ this.geocoderSearch = new GeocoderSearch();
+ this.mapModel = mapModel;
+ },
+
+ /**
+ * Get autocompletion predictions from the GeocoderSearch model.
+ * @param {string} rawQuery is the user's search query with spaces.
+ */
+ async autocompleteSearch(rawQuery) {
+ const query = rawQuery.trim();
+ if (this.get('query') === query) {
+ return;
+ } else if (!query) {
+ this.set({ error: '', predictions: [], query: '', focusIndex: -1, });
+ return;
+ } else if (GeoPoint.couldBeLatLong(query)) {
+ this.set({ predictions: [], query: '', focusIndex: -1, });
+ return;
+ }
+
+ // User is looking for autocompletions.
+ const predictions = await this.geocoderSearch.autocomplete(query);
+ const error = predictions.length === 0 ? NO_RESULTS_MESSAGE : '';
+ this.set({ error, focusIndex: -1, predictions, query, });
+ },
+
+ /**
+ * Decrement the focused index with a minimum value of 0. This corresponds
+ * to an ArrowUp key down event.
+ * Note: An ArrowUp key press while the current index is -1 will
+ * result in highlighting the first element in the list.
+ */
+ decrementFocusIndex() {
+ const currentIndex = this.get('focusIndex');
+ this.set('focusIndex', Math.max(0, currentIndex - 1));
+ },
+
+ /**
+ * Increment the focused index with a maximum value of the last value in
+ * the list. This corresponds to an ArrowDown key down event.
+ */
+ incrementFocusIndex() {
+ const currentIndex = this.get('focusIndex');
+ this.set(
+ 'focusIndex',
+ Math.min(currentIndex + 1, this.get('predictions').length - 1)
+ );
+ },
+
+ /**
+ * Reset the focused index back to the initial value so that no element
+ * in the UI is highlighted.
+ */
+ resetFocusIndex() {
+ this.set('focusIndex', -1);
+ },
+
+ /**
+ * Navigate to the GeocodedLocation.
+ * @param {GeocodedLocation} geocoding is the location that corresponds
+ * to the the selected prediction.
+ */
+ goToLocation(geocoding) {
+ if (!geocoding) return;
+
+ const coords = geocoding.get('box').getCoords();
+ this.mapModel.zoomTo({
+ destination: Cesium.Rectangle.fromDegrees(
+ coords.west,
+ coords.south,
+ coords.east,
+ coords.north,
+ )
+ });
+ },
+
+ /**
+ * Select a prediction from the list of predictions and navigate there.
+ * @param {Prediction} prediction is the user-selected Prediction that
+ * needs to be geocoded and navigated to.
+ */
+ async selectPrediction(prediction) {
+ if (!prediction) return;
+
+ const geocodings = await this.geocoderSearch.geocode(prediction);
+
+ if (geocodings.length === 0) {
+ this.set('error', NO_RESULTS_MESSAGE)
+ return;
+ }
+
+ 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 = new GeoPoint(value, { parse: true });
+ 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;
+ });
\ No newline at end of file
diff --git a/src/js/templates/maps/viewfinder/viewfinder-prediction.html b/src/js/templates/maps/viewfinder/viewfinder-prediction.html
new file mode 100644
index 000000000..52715cf37
--- /dev/null
+++ b/src/js/templates/maps/viewfinder/viewfinder-prediction.html
@@ -0,0 +1,9 @@
+
+
+
+ <%= description %>
+
+