add edge case handling for multiple address matches, no matches

codeforboston · Oct 27, 2013 · db84033 · db84033
1 parent 32be93f
commit db84033
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 27 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -2,16 +2,16 @@
     "node": true,
     "browser": true,
     "esnext": true,
-    "bitwise": true,
-    "camelcase": true,
+    "bitwise": false,
+    "camelcase": false,
     "curly": true,
     "eqeqeq": true,
     "immed": true,
     "indent": 4,
     "latedef": true,
     "newcap": true,
     "noarg": true,
-    "quotmark": "single",
+    "quotmark": false,
     "regexp": true,
     "undef": true,
     "unused": "vars",

diff --git a/app/index.html b/app/index.html
@@ -32,7 +32,12 @@ <h3 class="text-muted">Cambridge Voting Locations</h3>
             <div class="jumbotron">
                 <h1>I live at</h1>
                 <form>
-                    <input type="text" id="address" class="input-lg form-control" placeholder="1234 Main St, Cambridge, MA">
+                    <div class="input-group">
+                        <input type="text" id="address" class="input-lg form-control" placeholder="1234 Main St, Cambridge, MA">
+                        <span class="input-group-btn">
+                            <button class="btn btn-default btn-lg" type="submit" style="padding: 10px 16px; font-size: 18px;"><i class="glyphicon glyphicon-play"></i></button>
+                        </span>
+                    </div>
                 </form>
                 <a class="btn btn-default current-location">I'm at home right now</a>
             </div>

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -81,10 +81,52 @@ require(['jquery', 'polling_location_finder'], function($, findPollingLocationFo
         var address = $('#address').val();
         var geocoder = new google.maps.Geocoder();
 
+        // clear details pane
+        $('#directions').empty();
+
+
+        // go right to the first result if there's only one, or display a list if there are multiples
+        function displaySearchResults(results) {
+            var addressClickHandler = function() {
+                var location = $(this).data('location');
+                $('#directions').empty();
+                findPollingLocationFor(location);
+            };
+            if (results.length === 1) {
+                findPollingLocationFor(results[0].geometry.location);
+            } else {
+                var $ul = $('<ul>').appendTo('#directions');
+                for (var i = 0; i < results.length; i++) {
+                    var result = results[i];
+                    var link = $('<a>').text(result.formatted_address).data('location', result.geometry.location).on('click', addressClickHandler);
+                    $('<li>').append(link).appendTo($ul);
+                }
+            }
+        }
+
+        // only valid Cambridge street addresses, please
+        function addressIsCambridgeStreetAddress(address) {
+            var isInCambridge = !!~address.formatted_address.indexOf('Cambridge, MA');
+            var isStreetAddress = !!~$.inArray('street_address', address.types);
+            return isInCambridge && isStreetAddress;
+        }
+
         geocoder.geocode({ address: address }, function(results, status) {
-            // TODO if there are multiple results, default to Cambridge-specific results
-            var result = results[0];
-            findPollingLocationFor(result.geometry.location);
+            // if there are multiple results, look for Cambridge-specific street results
+            results = $.grep(results, addressIsCambridgeStreetAddress);
+            // if there are no results, try searching for Cambridge
+            if (!results.length) {
+                geocoder.geocode({ address: address + ' Cambridge, MA' }, function(results, status) {
+                    results = $.grep(results, addressIsCambridgeStreetAddress);
+                    if (!results.length) {
+                        $('#directions').text("Sorry, we couldn't find your location. Please use your entire street address; only Cambridge, MA addresses are allowed.");
+                    } else {
+                        displaySearchResults(results);
+                    }
+                });
+            } else {
+                displaySearchResults(results);
+            }
         });
     });
 });
diff --git a/app/scripts/polling_location_finder.js b/app/scripts/polling_location_finder.js
@@ -15,10 +15,17 @@ define(['geojson', 'json!vendor/ELECTIONS_WardsPrecincts.geojson', 'json!vendor/
             panel: document.getElementById('directions')
         });
 
+    // keep track of user precinct across calls so we can erase previous precincts if necessary
+    var userPrecinct = null;
 
     return function(coords) {
+        // if we've already drawn a user precinct, erase it
+        if (userPrecinct) {
+            userPrecinct.setMap(null);
+            userPrecinct = null;
+        }
         // find out which ward they're in using Point in Polygon
-        var userPrecinct = null, pollingLocation = null;
+        var pollingLocation = null;
         for (var i = 0; i < precincts.length; i++) {
             if (precincts[i].containsLatLng(coords)) {
                 userPrecinct = precincts[i];
@@ -29,22 +36,23 @@ define(['geojson', 'json!vendor/ELECTIONS_WardsPrecincts.geojson', 'json!vendor/
         }
         if (!userPrecinct) {
             // TODO handle what happens if they don't live in any precinct
-        }
-
-        // highlight the precinct on the map
-        userPrecinct.setMap(map);
-        map.fitBounds(userPrecinct.getBounds());
+            document.getElementById('directions').innerHTML = "We can't find your precinct! Sorry. Try again?";
+        } else {
+            // highlight the precinct on the map
+            userPrecinct.setMap(map);
+            map.fitBounds(userPrecinct.getBounds());
 
-        // show step-by-step directions
-        var request = {
-            origin: coords,
-            destination: pollingLocation.position,
-            travelMode: google.maps.TravelMode.WALKING
-        };
-        directionsService.route(request, function(result, status) {
-            if (status === google.maps.DirectionsStatus.OK) {
-                directionsDisplay.setDirections(result);
-            }
-        });
+            // show step-by-step directions
+            var request = {
+                origin: coords,
+                destination: pollingLocation.position,
+                travelMode: google.maps.TravelMode.WALKING
+            };
+            directionsService.route(request, function(result, status) {
+                if (status === google.maps.DirectionsStatus.OK) {
+                    directionsDisplay.setDirections(result);
+                }
+            });
+        }
     };
 });
diff --git a/dist/index.html b/dist/index.html
@@ -28,7 +28,12 @@ <h3 class="text-muted">Cambridge Voting Locations</h3>
             <div class="jumbotron">
                 <h1>I live at</h1>
                 <form>
-                    <input type="text" id="address" class="input-lg form-control" placeholder="1234 Main St, Cambridge, MA">
+                    <div class="input-group">
+                        <input type="text" id="address" class="input-lg form-control" placeholder="1234 Main St, Cambridge, MA">
+                        <span class="input-group-btn">
+                            <button class="btn btn-default btn-lg" type="submit" style="padding: 10px 16px; font-size: 18px"><i class="glyphicon glyphicon-play"></i></button>
+                        </span>
+                    </div>
                 </form>
                 <a class="btn btn-default current-location">I'm at home right now</a>
             </div>
@@ -56,6 +61,6 @@ <h1>I live at</h1>
             ga('create','UA-XXXXX-X');ga('send','pageview');
         </script>
 
-        <script data-main="scripts/8a1a7544.app" src="bower_components/requirejs/require.js"></script>
+        <script data-main="scripts/830cff7b.app" src="bower_components/requirejs/require.js"></script>
 </body>
 </html>
diff --git a/dist/scripts/8a1a7544.app.js → dist/scripts/830cff7b.app.js b/dist/scripts/8a1a7544.app.js → dist/scripts/830cff7b.app.js