Removing dependency for GeoJson constructor (#70)

* Removing dependency for GeoJson constructor instead using google maps data layers.
codeforboston · Oct 25, 2016 · fda2400 · fda2400
1 parent bd52c4d
commit fda2400
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 42 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -296,7 +296,7 @@ module.exports = function (grunt) {
         'rev',
         'usemin'
     ]);
-
+	
     grunt.registerTask('default', [
         'jshint',
         'test',

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -15,7 +15,6 @@ require.config({
         bootstrapTooltip: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip',
         bootstrapTransition: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition',
         text: '../bower_components/requirejs-text/text',
-        geojson: '../bower_components/geojson-google-maps/GeoJSON',
         ejs: '../bower_components/ejs/ejs',
         moment: '../bower_components/moment/moment',
         moment_range: '../bower_components/moment-range/dist/moment-range',
@@ -78,7 +77,6 @@ require(['jquery',
         function($, earlyVotingManager, findPollingLocationFor, mapService, earlyPollingJSON) {
     'use strict';
 
-
     window.location.hash = window.location.hash || 'early-voting';
 
     // Trigger the hashchange event if going to a different tab
@@ -108,7 +106,7 @@ require(['jquery',
 
 
     earlyVotingManager.init();
-
+	
 
     var $address = $('#address');
 

diff --git a/app/scripts/early_voting_mgr.js b/app/scripts/early_voting_mgr.js
@@ -1,14 +1,14 @@
 define(
   [
-    'jquery', 'moment', 'ejs', 'geojson',
+    'jquery', 'moment', 'ejs',
     'map_service',
     'json!vendor/EARLY_VOTING_AddressPoints.geojson',
     'text!templates/early_voting_sidebar.ejs', 'scrollTo', 'moment_range', 'bootstrapCollapse'
   ],
-  function($, moment, ejs, GeoJSON, mapService, earlyVotingJSON, earlyVotingSidebarTmpl) {
+  function($, moment, ejs, mapService, earlyVotingJSON, earlyVotingSidebarTmpl) {
     'use strict';
 
-    var earlyVotingLocations = new GeoJSON(earlyVotingJSON);
+    var earlyVotingLocations = mapService.earlyPollsDataLayer.addGeoJson(earlyVotingJSON);
 
     var $el = $('#early-voting');
 
@@ -25,7 +25,7 @@ define(
     function whenMarkerEventsHappen(eventType, marker) {
       if (eventType === 'click') {
         for (var i = 0; i < earlyVotingLocations.length; i++) {
-          if (marker.getPosition().equals(earlyVotingLocations[i].getPosition())) {
+          if (marker.getPosition().equals(earlyVotingLocations[i].getGeometry().get())) {
             $el.scrollTo($('#location'+i), 800);
           }
         }

diff --git a/app/scripts/map_service.js b/app/scripts/map_service.js
@@ -1,7 +1,5 @@
-define(['geojson',
-        'json!vendor/EARLY_VOTING_AddressPoints.geojson'],
-        function(GeoJSON,  earlyPollingJSON) {
-
+define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'],
+        function(earlyPollingJSON) {
 
   var hoverIcon = "https://mts.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=•&psize=30&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1"
   var defaultIcon = "https://mts.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png&text=•&psize=30&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1"
@@ -10,15 +8,15 @@ define(['geojson',
   var DEFAULT_ZOOM_LEVEL = 13;
   var DEFAULT_CENTER_POSITION = new google.maps.LatLng(42.3736, -71.1106); // Cambridge
 
-
-  var earlyPollingLocations = new GeoJSON(earlyPollingJSON);
-
-
   var map = new google.maps.Map(document.getElementById('map'), {
-    center: DEFAULT_CENTER_POSITION,
-    zoom: DEFAULT_ZOOM_LEVEL
+        center: DEFAULT_CENTER_POSITION,
+        zoom: DEFAULT_ZOOM_LEVEL
   });
-
+
+  var earlyPollsDataLayer = new google.maps.Data(),
+      precinctsDataLayer = new google.maps.Data(),
+      electionPollsDataLayer = new google.maps.Data(),
+      earlyPollingLocations = earlyPollsDataLayer.addGeoJson(earlyPollingJSON);    
 
   var directionsService = new google.maps.DirectionsService(),
       directionsDisplay = new google.maps.DirectionsRenderer({
@@ -40,9 +38,11 @@ define(['geojson',
 
 
   function clearUserInputs() {
+
     userInputs.precinct = null;
     userInputs.homeAddress = null;
     userInputs.destination = null;
+
   }
 
   function fireMarkerEvent(eventType, marker) {
@@ -52,14 +52,13 @@ define(['geojson',
   }
 
   function createEarlyPollingMarkers() {
-    earlyPollingLocations.forEach(function(location) {
+      earlyPollingLocations.forEach(function(poll, index) {
       var earlyVotingMarker = new google.maps.Marker({
-        position: location.position
+        position: poll.getGeometry().get()
       });
       earlyVotingMarker.addListener('click', function() {
         fireMarkerEvent('click', earlyVotingMarker);
       });
-
       earlyPollingMarkers.push(earlyVotingMarker);
     });
   }
@@ -72,8 +71,11 @@ define(['geojson',
 
   function clearPollingLocation() {
     if (userInputs.precinct) {
-      userInputs.precinct.setMap(null);
+
+        userInputs.precinct.setMap(null)
+
     }
+
     directionsDisplay.setDirections({routes: []});
 
     // TODO move UI interaction into its own module
@@ -151,10 +153,13 @@ define(['geojson',
       clearEarlyMarkers();
 
       if (userInputs.precinct && userInputs.homeAddress && userInputs.destination) {
+
         userInputs.precinct.setMap(map);
         map.fitBounds(userInputs.precinct.getBounds());
         displayDirections(userInputs.homeAddress, userInputs.destination);
+
       }
+
     },
 
     subscribeToMarkerEvents: function(cb) {
@@ -171,12 +176,16 @@ define(['geojson',
       userInputs.homeAddress = latLng;
       userInputs.destination = destination;
 
-
       userInputs.precinct.setMap(map);
       map.fitBounds(userInputs.precinct.getBounds());
 
       displayDirections(latLng, destination, successCallback, errorCallback);
 
     },
+	googleMap : map,
+    precinctsDataLayer : precinctsDataLayer,
+    earlyPollsDataLayer : earlyPollsDataLayer,
+    electionPollsDataLayer : electionPollsDataLayer
+
   };
 });
diff --git a/app/scripts/polling_location_finder.js b/app/scripts/polling_location_finder.js
@@ -1,32 +1,57 @@
-define(['jquery', 'geojson',
+define(['jquery',
         'json!vendor/ELECTIONS_WardsPrecincts.geojson',
         'json!vendor/ELECTIONS_PollingLocations.geojson',
         'map_service'],
-    function($, GeoJSON, precinctsJSON, locationsJSON, mapService) {
+    function($, precinctsJSON, locationsJSON, mapService) {
 
     'use strict';
+
+    var precincts = mapService.earlyPollsDataLayer.addGeoJson(precinctsJSON),
+        pollingLocations = mapService.electionPollsDataLayer.addGeoJson(locationsJSON),
+        precinctsPolygons = [];
+
+    createPolygons();
+
+    //function that populates the array with polygons representing each precinct, because data.polygon has little to no useful methods.
+    function createPolygons(){
+
+        var i = 0,
+            len = precincts.length;
+
+        for(i; i<len; i++){
+
+            var currentFeature = precincts[i],
+                currentPolygon = new google.maps.Polygon({
+                                paths: currentFeature.getGeometry().getAt(0).getArray(),
+                                clickable: false
+                                });
+
+            precinctsPolygons.push(currentPolygon);
 
-    var precincts = new GeoJSON(precinctsJSON),
-        pollingLocations = new GeoJSON(locationsJSON);
-
-
+        }    
+    }
+
     function getUserPrecinct(latLng) {
-        for (var i = 0, len1 = precincts.length; i < len1; i++) {
-            if (precincts[i].containsLatLng(latLng)) {
-                return precincts[i];
+
+        for (var i = 0, len1 = precinctsPolygons.length; i < len1; i++) {
+            if (precinctsPolygons[i].containsLatLng(latLng)) {
+                return  precinctsPolygons[i];
             }
         }
+
     }
 
     function getPollingLocation(precinct) {
+
+        var index = precinctsPolygons.indexOf(precinct);
         // find out which ward/precinct they're in using Point in Polygon
-        var wardPrecinct = precinct.geojsonProperties.WardPrecinct;
+        var wardPrecinct = precincts[index].getProperty('WardPrecinct');
         if (wardPrecinct === "3-2A") {
             wardPrecinct = "3-2";
         }
         //Search for the polling location that matches the precinct and ward
         for (var j = 0, len2 = pollingLocations.length; j < len2; j++) {
-            if (pollingLocations[j].geojsonProperties.W_P === wardPrecinct) {
+            if (pollingLocations[j].getProperty('W_P') === wardPrecinct) {
                 return pollingLocations[j];
             }
         }
@@ -57,14 +82,14 @@ define(['jquery', 'geojson',
             var pollingLocation = getPollingLocation(userPrecinct);
             $('.result').addClass('success');
 
-            var destination = pollingLocation.geojsonProperties.Address + ', Cambridge, MA';
+            var destination = pollingLocation.getProperty('Address') + ', Cambridge, MA';
             mapService.displayNewPollingPlace(latLng, destination, userPrecinct, successCallback, errorCallback);
             // userPrecinct.setMap(map);
             // map.fitBounds(userPrecinct.getBounds());
 
             // display location notes
-            $('#info .location').text(pollingLocation.geojsonProperties.LOCATION);
-            $('#info .notes').text(pollingLocation.geojsonProperties.LOCATION_NOTE);
+            $('#info .location').text(pollingLocation.getProperty('LOCATION'));
+            $('#info .notes').text(pollingLocation.getProperty('LOCATION_NOTE'));
 
         }
     };

diff --git a/app/scripts/templates/early_voting_sidebar.ejs b/app/scripts/templates/early_voting_sidebar.ejs
@@ -3,20 +3,20 @@
       <div id="heading<%= i %>" role="tab">
         <h4>
           <a role="button" data-toggle="collapse" data-parent="#early-voting-sidebar" href="#collapse<%= i %>" aria-expanded="false" aria-controls="collapse<%= i %>">
-            <%= location.geojsonProperties.LOCATION %>          
+            <%= location.getProperty('LOCATION') %>          
           </a>
         </h4>
         </div>
 
         <div id="collapse<%= i %>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading<%= i %>">
 
           <div>
-            <a href="<%= getDirections(location.geojsonProperties.Full_Addr + ', Cambridge, MA') %>" target="_blank">Directions
+            <a href="<%= getDirections(location.getProperty('Full_Addr') + ', Cambridge, MA') %>" target="_blank">Directions
             </a>
           </div>
 
           <ul>
-          <% location.geojsonProperties.hours.forEach(function(interval) { %>
+          <% location.getProperty('hours').forEach(function(interval) { %>
             <%
               var dates = moment.range(interval).toDate();
               var startDate = moment(dates[0]);

diff --git a/bower.json b/bower.json
@@ -5,7 +5,6 @@
     "requirejs": "~2.1.8",
     "jquery": "1.10.2",
     "requirejs-text": "~2.0.10",
-    "geojson-google-maps": "*",
     "font-awesome": "~4.0.2",
     "bootstrap-sass": "~3.3.7",
     "moment": "^2.15.1",