From cda00794d5d7c56f020c2fbc6eead17bbd1e954a Mon Sep 17 00:00:00 2001
From: Alice Rottersman <arottersman@azavea.com>
Date: Fri, 11 Aug 2017 16:59:32 -0400
Subject: [PATCH 1/5] Geocoder text "Search" -> "Jump to location or HUC"

---
 src/mmw/js/src/geocode/templates/search.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mmw/js/src/geocode/templates/search.html b/src/mmw/js/src/geocode/templates/search.html
index f0c3022bf..1dab2a593 100644
--- a/src/mmw/js/src/geocode/templates/search.html
+++ b/src/mmw/js/src/geocode/templates/search.html
@@ -1,4 +1,4 @@
-<input class="search-input" id="geocoder-search" type="text" placeholder="Search"/>
+<input class="search-input" id="geocoder-search" type="text" placeholder="Jump to location or HUC"/>
 <i class="search-icon fa fa-search"></i>
 <div id="geocode-search-results-region"></div>
 <div class="message hidden">

From ce15a97e5bfee746cf94f224d47cdb8dfef1711a Mon Sep 17 00:00:00 2001
From: Alice Rottersman <arottersman@azavea.com>
Date: Mon, 14 Aug 2017 14:49:13 -0400
Subject: [PATCH 2/5] On Draw create, don't initialize geocoder if one already
 exists

- Prevent draw controller from clearing geocoder state by only creating
a new one if the view doesn't already exist
---
 src/mmw/js/src/draw/controllers.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/mmw/js/src/draw/controllers.js b/src/mmw/js/src/draw/controllers.js
index d4327cf1d..aeabfc230 100644
--- a/src/mmw/js/src/draw/controllers.js
+++ b/src/mmw/js/src/draw/controllers.js
@@ -20,7 +20,10 @@ var DrawController = {
         toolbarModel.set('predefinedShapeTypes',
             _.filter(settings.get('boundary_layers'), { selectable: true }));
 
-        App.rootView.geocodeSearchRegion.show(geocodeSearch);
+        if (!App.rootView.geocodeSearchRegion.hasView()) {
+            App.rootView.geocodeSearchRegion.show(geocodeSearch);
+        }
+
         App.rootView.sidebarRegion.show(new views.DrawWindow({
             model: toolbarModel
         }));

From 85a2a7d969ca3aee9a91320a0589de5c41524e2a Mon Sep 17 00:00:00 2001
From: Alice Rottersman <arottersman@azavea.com>
Date: Mon, 14 Aug 2017 10:39:23 -0400
Subject: [PATCH 3/5] On geocoder suggestion select, show location name and go
 to /draw

- If selected location is a place, show the address
- If selected location is a boundary, show the boundary name
- On escape key press, clear the selected location and query
- navigate to /draw
---
 src/mmw/js/src/geocode/models.js             |  1 +
 src/mmw/js/src/geocode/templates/search.html |  8 +++-
 src/mmw/js/src/geocode/views.js              | 48 +++++++++++++++-----
 3 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/mmw/js/src/geocode/models.js b/src/mmw/js/src/geocode/models.js
index 1ea27252b..4d7e5bceb 100644
--- a/src/mmw/js/src/geocode/models.js
+++ b/src/mmw/js/src/geocode/models.js
@@ -7,6 +7,7 @@ var _ = require('underscore'),
 
 var GeocoderModel = Backbone.Model.extend({
     defaults: {
+        selectedLocation: '',
         query: ''
     }
 });
diff --git a/src/mmw/js/src/geocode/templates/search.html b/src/mmw/js/src/geocode/templates/search.html
index 1dab2a593..f90bb5bf3 100644
--- a/src/mmw/js/src/geocode/templates/search.html
+++ b/src/mmw/js/src/geocode/templates/search.html
@@ -1,4 +1,10 @@
-<input class="search-input" id="geocoder-search" type="text" placeholder="Jump to location or HUC"/>
+<input class="search-input" id="geocoder-search" type="text"
+       {%- if selectedLocation %}
+       placeholder="{{selectedLocation}}"
+       {%- else %}
+       placeholder="Jump to location or HUC"
+       {% endif -%}
+>
 <i class="search-icon fa fa-search"></i>
 <div id="geocode-search-results-region"></div>
 <div class="message hidden">
diff --git a/src/mmw/js/src/geocode/views.js b/src/mmw/js/src/geocode/views.js
index 772d08fd1..f446ec9a4 100644
--- a/src/mmw/js/src/geocode/views.js
+++ b/src/mmw/js/src/geocode/views.js
@@ -5,13 +5,15 @@ var _ = require('underscore'),
     Backbone = require('../../shim/backbone'),
     Marionette = require('../../shim/backbone.marionette'),
     App = require('../app'),
+    router = require('../router').router,
     drawViews = require('../draw/views'),
     models = require('./models'),
     geocoderTmpl = require('./templates/geocoder.html'),
     searchTmpl = require('./templates/search.html'),
     suggestionsTmpl = require('./templates/suggestions.html');
 
-var ENTER_KEYCODE = 13;
+var ENTER_KEYCODE = 13,
+    ESC_KEYCODE = 27;
 
 var ICON_BASE = 'search-icon fa ',
     ICON_DEFAULT = 'fa-search',
@@ -38,6 +40,7 @@ function selectSearchSuggestion(model) {
     model.setMapViewToLocation();
     if (model.get('isBoundaryLayer')) {
         addBoundaryLayer(model);
+        router.navigate('draw/', { trigger: true });
     } else {
         drawViews.clearAoiLayer();
     }
@@ -77,7 +80,7 @@ var SearchBoxView = Marionette.LayoutView.extend({
     },
 
     modelEvents: {
-        'change:query': 'render'
+        'change:query change:selectedLocation': 'render'
     },
 
     regions: {
@@ -119,7 +122,12 @@ var SearchBoxView = Marionette.LayoutView.extend({
     },
 
     processSearchInputEvent: function(e) {
-        var query = $(e.target).val().trim();
+        var query = this.ui.searchBox.val().trim();
+
+        if (e.keyCode === ESC_KEYCODE) {
+            this.dismissAction();
+            return false;
+        }
 
         if (query === '') {
             this.setStateDefault();
@@ -191,9 +199,8 @@ var SearchBoxView = Marionette.LayoutView.extend({
             .first()
             .select()
                 .done(function() {
-                    self.setStateDefault();
                     var model = self.collection.first();
-                    selectSearchSuggestion(model);
+                    self.selectSuggestion(model);
                 })
                 .fail(_.bind(this.setStateError, this))
                 .always(_.bind(this.reset, this));
@@ -209,9 +216,8 @@ var SearchBoxView = Marionette.LayoutView.extend({
         this.listenTo(view, 'suggestion:select:in-progress', function() {
             this.setStateWorking();
         });
-        this.listenTo(view, 'suggestion:select:success', function() {
-            this.reset();
-            this.setStateDefault();
+        this.listenTo(view, 'suggestion:select:success', function(suggestionModel) {
+            this.selectSuggestion(suggestionModel);
         });
         this.listenTo(view, 'suggestion:select:failure', function() {
             this.setStateError();
@@ -224,14 +230,35 @@ var SearchBoxView = Marionette.LayoutView.extend({
         this.getRegion('resultsRegion').empty();
     },
 
+    selectSuggestion: function(suggestionModel) {
+        this.dismissAction();
+        this.model.set('selectedLocation', suggestionModel.get('text'));
+        selectSearchSuggestion(suggestionModel);
+    },
+
     reset: function() {
-        this.model.set('query', '');
+        this.ui.searchBox.val('');
+        this.model.set({
+            query: '',
+            selectedSuggestion: null,
+        });
         this.emptyResultsRegion();
+        drawViews.clearAoiLayer();
     },
 
     dismissAction: function() {
         this.reset();
         this.setStateDefault();
+    },
+
+    validateShapeAndGoToAnalyze: function() {
+        drawViews.validateShape(App.map.get('areaOfInterest'))
+            .fail(function(message) {
+                drawViews.displayAlert(message, modalModels.AlertTypes.error);
+            })
+            .done(function() {
+                router.navigate('/analyze', { trigger: true });
+            });
     }
 });
 
@@ -254,8 +281,7 @@ var SuggestionsView = Backbone.View.extend({
     },
 
     selectSuccess: function(model) {
-        selectSearchSuggestion(model);
-        this.trigger('suggestion:select:success');
+        this.trigger('suggestion:select:success', model);
     },
 
     selectFail: function() {

From 9c3723b9a876514185f86a532530008760c57c87 Mon Sep 17 00:00:00 2001
From: Alice Rottersman <arottersman@azavea.com>
Date: Mon, 14 Aug 2017 15:07:23 -0400
Subject: [PATCH 4/5] Add analyze boundary button to geocoder

- if the selected suggestion is a boundary, add a "select" button
to the geocoder that will analyze the boundary on click
---
 src/mmw/js/src/draw/views.js                 |  2 ++
 src/mmw/js/src/geocode/models.js             |  2 +-
 src/mmw/js/src/geocode/templates/search.html |  9 ++++++---
 src/mmw/js/src/geocode/views.js              | 21 ++++++++++++++------
 src/mmw/sass/pages/_search-map.scss          | 10 ++++++++++
 5 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/mmw/js/src/draw/views.js b/src/mmw/js/src/draw/views.js
index 9056b4458..e6088b519 100644
--- a/src/mmw/js/src/draw/views.js
+++ b/src/mmw/js/src/draw/views.js
@@ -1114,6 +1114,8 @@ module.exports = {
     DrawWindow: DrawWindow,
     getShapeAndAnalyze: getShapeAndAnalyze,
     addLayer: addLayer,
+    validateShape: validateShape,
+    displayAlert: displayAlert,
     clearAoiLayer: clearAoiLayer,
     selectBoundary: selectBoundary,
     drawArea: drawArea,
diff --git a/src/mmw/js/src/geocode/models.js b/src/mmw/js/src/geocode/models.js
index 4d7e5bceb..64fd35ce3 100644
--- a/src/mmw/js/src/geocode/models.js
+++ b/src/mmw/js/src/geocode/models.js
@@ -7,7 +7,7 @@ var _ = require('underscore'),
 
 var GeocoderModel = Backbone.Model.extend({
     defaults: {
-        selectedLocation: '',
+        selectedSuggestion: null, // SuggestionModel
         query: ''
     }
 });
diff --git a/src/mmw/js/src/geocode/templates/search.html b/src/mmw/js/src/geocode/templates/search.html
index f90bb5bf3..c29c53c11 100644
--- a/src/mmw/js/src/geocode/templates/search.html
+++ b/src/mmw/js/src/geocode/templates/search.html
@@ -1,11 +1,14 @@
 <input class="search-input" id="geocoder-search" type="text"
-       {%- if selectedLocation %}
-       placeholder="{{selectedLocation}}"
+       {%- if selectedSuggestion %}
+           placeholder="{{selectedSuggestion.get('text')}}"
        {%- else %}
-       placeholder="Jump to location or HUC"
+           placeholder="Jump to location or HUC"
        {% endif -%}
 >
 <i class="search-icon fa fa-search"></i>
+{% if selectedSuggestion and selectedSuggestion.get('isBoundaryLayer') %}
+    <button class="search-select-btn">Select</button>
+{% endif %}
 <div id="geocode-search-results-region"></div>
 <div class="message hidden">
     <span></span>
diff --git a/src/mmw/js/src/geocode/views.js b/src/mmw/js/src/geocode/views.js
index f446ec9a4..e7ca5e411 100644
--- a/src/mmw/js/src/geocode/views.js
+++ b/src/mmw/js/src/geocode/views.js
@@ -7,6 +7,7 @@ var _ = require('underscore'),
     App = require('../app'),
     router = require('../router').router,
     drawViews = require('../draw/views'),
+    modalModels = require('../core/modals/models'),
     models = require('./models'),
     geocoderTmpl = require('./templates/geocoder.html'),
     searchTmpl = require('./templates/search.html'),
@@ -27,12 +28,18 @@ var MSG_DEFAULT = '',
 
 
 function addBoundaryLayer(model) {
+    var layerCode = model.get('code'),
+        shapeId = model.get('id'),
+        shapeName = model.get('text'),
+        layerName = model.get('label');
+
     App.restApi.getPolygon({
-            layerCode: model.get('code'),
-            shapeId: model.get('id')
+            layerCode: layerCode,
+            shapeId: shapeId
         })
         .then(function(shape) {
-            drawViews.addLayer(shape);
+            var wkaoi = layerCode + '__' + shapeId;
+            drawViews.addLayer(shape, shapeName, layerName, wkaoi);
         });
 }
 
@@ -71,16 +78,18 @@ var SearchBoxView = Marionette.LayoutView.extend({
         'searchIcon': '.search-icon',
         'message': '.message',
         'messageDismiss': '.dismiss',
-        'resultsRegion': '#geocode-search-results-region'
+        'resultsRegion': '#geocode-search-results-region',
+        'selectButton': '.search-select-btn'
     },
 
     events: {
         'keyup @ui.searchBox': 'processSearchInputEvent',
         'click @ui.messageDismiss': 'dismissAction',
+        'click @ui.selectButton': 'validateShapeAndGoToAnalyze'
     },
 
     modelEvents: {
-        'change:query change:selectedLocation': 'render'
+        'change:query change:selectedSuggestion': 'render'
     },
 
     regions: {
@@ -232,7 +241,7 @@ var SearchBoxView = Marionette.LayoutView.extend({
 
     selectSuggestion: function(suggestionModel) {
         this.dismissAction();
-        this.model.set('selectedLocation', suggestionModel.get('text'));
+        this.model.set('selectedSuggestion', suggestionModel);
         selectSearchSuggestion(suggestionModel);
     },
 
diff --git a/src/mmw/sass/pages/_search-map.scss b/src/mmw/sass/pages/_search-map.scss
index 668d9fc37..999e8a655 100644
--- a/src/mmw/sass/pages/_search-map.scss
+++ b/src/mmw/sass/pages/_search-map.scss
@@ -35,6 +35,16 @@
     }
   }
 
+  .search-select-btn {
+      font-size: $font-size-p;
+      position: absolute;
+      top: 12px;
+      right: 42px;
+      background-color: $brand-primary;
+      color: $paper;
+      border: none;
+  }
+
   .message {
     position: absolute;
     color: $paper-74;

From 857670ccd0ddd7993d205d56857616e80ae38f26 Mon Sep 17 00:00:00 2001
From: Alice Rottersman <arottersman@azavea.com>
Date: Tue, 15 Aug 2017 12:23:59 -0400
Subject: [PATCH 5/5] Add geocoder boundary result to map as intermediary red
 shape

- Previously we added the selected geocoder boundary result as
the map's aoi (a white and grey masked off area)
- Create a new map layer "selectedGeocoderArea" that renders
to look like free drawn shapes, this cues the user that they can still
select another area of interest besides the geocoder shape
---
 src/mmw/js/src/core/models.js   |  3 ++-
 src/mmw/js/src/core/views.js    | 35 ++++++++++++++++++++++++-
 src/mmw/js/src/geocode/views.js | 46 +++++++++++++++++++++++----------
 3 files changed, 69 insertions(+), 15 deletions(-)

diff --git a/src/mmw/js/src/core/models.js b/src/mmw/js/src/core/models.js
index e9710c23b..c5f343ff4 100644
--- a/src/mmw/js/src/core/models.js
+++ b/src/mmw/js/src/core/models.js
@@ -22,7 +22,8 @@ var MapModel = Backbone.Model.extend({
         geolocationEnabled: true,
         previousAreaOfInterest: null,
         dataCatalogResults: null,       // GeoJSON array
-        dataCatalogActiveResult: null   // GeoJSON
+        dataCatalogActiveResult: null,  // GeoJSON
+        selectedGeocoderArea: null,     // GeoJSON
     },
 
     revertMaskLayer: function() {
diff --git a/src/mmw/js/src/core/views.js b/src/mmw/js/src/core/views.js
index 226d03b83..0ec2f0dc7 100644
--- a/src/mmw/js/src/core/views.js
+++ b/src/mmw/js/src/core/views.js
@@ -44,6 +44,16 @@ var dataCatalogActiveStyle = {
     fillOpacity: 0.2
 };
 
+var selectedGeocoderAreaStyle = {
+    stroke: true,
+    fill: true,
+    weight: 3,
+    opacity: 0.5,
+    fillOpacity: 0.2,
+    fillColor: '#E77471',
+    color: '#E77471'
+};
+
 var RootView = Marionette.LayoutView.extend({
     el: 'body',
     ui: {
@@ -195,7 +205,8 @@ var MapView = Marionette.ItemView.extend({
         'change:size': 'toggleMapSize',
         'change:maskLayerApplied': 'toggleMask',
         'change:dataCatalogResults': 'renderDataCatalogResults',
-        'change:dataCatalogActiveResult': 'renderDataCatalogActiveResult'
+        'change:dataCatalogActiveResult': 'renderDataCatalogActiveResult',
+        'change:selectedGeocoderArea': 'renderSelectedGeocoderArea',
     },
 
     // L.Map instance.
@@ -209,9 +220,15 @@ var MapView = Marionette.ItemView.extend({
     // L.FeatureGroup instance.
     _modificationsLayer: null,
 
+    // Shapes for the active data catalog tab's results.
+    // L.FeatureGroup instance
     _dataCatalogResultsLayer: null,
     _dataCatalogActiveLayer: null,
 
+    // The shape for a selected geocoder boundary result
+    // L.FeatureGroup instance
+    _selectedGeocoderAreaLayer: null,
+
     // Flag used to determine if AOI change should trigger a prompt.
     _areaOfInterestSet: false,
     _didRevert: false,
@@ -242,6 +259,7 @@ var MapView = Marionette.ItemView.extend({
         this._modificationsLayer = new L.FeatureGroup();
         this._dataCatalogResultsLayer = new L.FeatureGroup();
         this._dataCatalogActiveLayer = new L.FeatureGroup();
+        this._selectedGeocoderAreaLayer = new L.FeatureGroup();
 
         this.fitToDefaultBounds();
 
@@ -281,6 +299,7 @@ var MapView = Marionette.ItemView.extend({
         map.addLayer(this._modificationsLayer);
         map.addLayer(this._dataCatalogResultsLayer);
         map.addLayer(this._dataCatalogActiveLayer);
+        map.addLayer(this._selectedGeocoderAreaLayer);
     },
 
     fitToDefaultBounds: function() {
@@ -701,6 +720,20 @@ var MapView = Marionette.ItemView.extend({
                 this._dataCatalogActiveLayer.addLayer(layer);
             }
         }
+    },
+
+    renderSelectedGeocoderArea: function() {
+        var geom = this.model.get('selectedGeocoderArea');
+
+        this._selectedGeocoderAreaLayer.clearLayers();
+
+        if (geom) {
+            this.disableGeolocation();
+
+            var layer = new L.GeoJSON(geom, { style: selectedGeocoderAreaStyle });
+            this._leafletMap.fitBounds(layer.getBounds(), { reset: true });
+            this._selectedGeocoderAreaLayer.addLayer(layer);
+        }
     }
 });
 
diff --git a/src/mmw/js/src/geocode/views.js b/src/mmw/js/src/geocode/views.js
index e7ca5e411..fcad91fec 100644
--- a/src/mmw/js/src/geocode/views.js
+++ b/src/mmw/js/src/geocode/views.js
@@ -27,26 +27,30 @@ var MSG_DEFAULT = '',
     MSG_ERROR   = 'Oops! Something went wrong.';
 
 
-function addBoundaryLayer(model) {
-    var layerCode = model.get('code'),
-        shapeId = model.get('id'),
-        shapeName = model.get('text'),
-        layerName = model.get('label');
+function addBoundaryLayer(suggestionModel, shape) {
+    var layerCode = suggestionModel.get('code'),
+        shapeId = suggestionModel.get('id'),
+        shapeName = suggestionModel.get('text'),
+        layerName = suggestionModel.get('label'),
+        wkaoi = layerCode + '__' + shapeId;
+
+   drawViews.addLayer(shape, shapeName, layerName, wkaoi);
+}
 
+function addGeocoderBoundaryLayer(suggestionModel) {
     App.restApi.getPolygon({
-            layerCode: layerCode,
-            shapeId: shapeId
+            layerCode: suggestionModel.get('code'),
+            shapeId: suggestionModel.get('id')
         })
         .then(function(shape) {
-            var wkaoi = layerCode + '__' + shapeId;
-            drawViews.addLayer(shape, shapeName, layerName, wkaoi);
+            App.map.set('selectedGeocoderArea', shape);
         });
 }
 
 function selectSearchSuggestion(model) {
     model.setMapViewToLocation();
     if (model.get('isBoundaryLayer')) {
-        addBoundaryLayer(model);
+        addGeocoderBoundaryLayer(model);
         router.navigate('draw/', { trigger: true });
     } else {
         drawViews.clearAoiLayer();
@@ -96,6 +100,10 @@ var SearchBoxView = Marionette.LayoutView.extend({
         'resultsRegion': '#geocode-search-results-region'
     },
 
+    onDestroy: function() {
+        App.map.set('selectedGeocoderArea', null);
+    },
+
     setIcon: function(icon) {
         this.ui.searchIcon.prop('class', ICON_BASE + icon);
     },
@@ -252,7 +260,7 @@ var SearchBoxView = Marionette.LayoutView.extend({
             selectedSuggestion: null,
         });
         this.emptyResultsRegion();
-        drawViews.clearAoiLayer();
+        App.map.set('selectedGeocoderArea', null);
     },
 
     dismissAction: function() {
@@ -261,12 +269,24 @@ var SearchBoxView = Marionette.LayoutView.extend({
     },
 
     validateShapeAndGoToAnalyze: function() {
-        drawViews.validateShape(App.map.get('areaOfInterest'))
+        var selectedBoundary = this.model.get('selectedSuggestion'),
+            selectedBoundaryShape = App.map.get('selectedGeocoderArea');
+
+        if (!selectedBoundary.get('isBoundaryLayer') ||
+            !selectedBoundaryShape) {
+            // Fail early if there's no selected geocoder result on the map
+            // or the selected suggestion isn't a boundary layer
+            return false;
+        }
+
+        drawViews.validateShape(selectedBoundaryShape)
             .fail(function(message) {
                 drawViews.displayAlert(message, modalModels.AlertTypes.error);
             })
             .done(function() {
-                router.navigate('/analyze', { trigger: true });
+                App.map.set('selectedGeocoderArea', null);
+                addBoundaryLayer(selectedBoundary, selectedBoundaryShape);
+                router.navigate('/analyze', { trigger: true});
             });
     }
 });