Merge pull request #1 from brycehewett/ng-map

Add ng-map
brycehewett · Sep 2, 2016 · dca5481 · dca5481
2 parents 8ccda24 + f0a4a5e
commit dca5481
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 82 deletions.
diff --git a/bower.json b/bower.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "angular-ui-router": "^0.3.1",
     "js-marker-clusterer": "*",
-    "ngMask": "angular-mask#^3.1.1"
+    "ngMask": "angular-mask#^3.1.1",
+    "ngmap": "^1.17.6"
   }
 }
diff --git a/public/app.js b/public/app.js
@@ -7,5 +7,5 @@
   ]);
 
   angular.module('app.Services', []);
-  angular.module('app.main', ['ngMaterial', 'ngMask']);
+  angular.module('app.main', ['ngMaterial', 'ngMask', 'ngMap']);
 })();
diff --git a/public/index.html b/public/index.html
@@ -6,54 +6,105 @@
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
 
     <style>
-      #map {
-        height: calc(100vh - 64px);
-      }
 
       md-pagination-wrapper {
         width: auto!important;
       }
+
+      .content {
+        position: relative;
+      }
+
+      .content md-progress-circular{
+        position: absolute;
+        top: 50%;
+        left:50%;
+        margin-top: -20px;
+        margin-left: -20px;
+      }
+
+      .stat-column {
+        text-align: center;
+      }
+
+      .stat-column h3 {
+        margin-bottom: 0;
+      }
+
+      .stat-column p {
+        color: #888;
+      }
+
+      @media (min-width: 960px) {
+        .map {
+          height: calc(100vh - 64px);
+        }
+      }
+
+      @media (max-width: 959px) {
+        .map {
+          height: calc(100vh - 48px);
+        }
+      }
+
+      @media (max-width: 699px) {
+        .map {
+          height: calc(100vh - 56px);
+        }
+      }
     </style>
   </head>
 
   <body layout="row" ng-controller="mainController as main"  id="{{$state}}" ng-cloak>
-    <md-sidenav md-component-id="left" class="md-sidenav-left"
-                md-is-locked-open="$mdMedia('gt-sm')">
-                <md-toolbar class="md-theme-indigo">
-                  <div class="md-toolbar-tools">
-        <h1 hide-gt-sm>About This Site</h1>
-        <h1 hide-xs hide-sm>Ex-Mormon Missionary Map</h1>
-        <span flex></span>
-        <md-button class="md-icon-button" ng-click="main.toggleNav()" hide-gt-sm>
-          <md-icon aria-label="Close Sidebar" class="material-icons">close</md-icon>
-        </md-button>
-      </div>
+    <md-sidenav md-component-id="left"
+                class="md-sidenav-left"
+                md-is-locked-open="$mdMedia('gt-sm')"
+                layout="column">
+      <md-toolbar class="md-theme-indigo">
+        <div class="md-toolbar-tools">
+          <h1 hide-gt-sm>About This Site</h1>
+          <h1 hide-xs hide-sm>Ex-Mormon Missionary Map</h1>
+          <span flex></span>
+          <md-button class="md-icon-button" ng-click="main.toggleNav()" hide-gt-sm>
+            <md-icon aria-label="Close Sidebar" class="material-icons">close</md-icon>
+          </md-button>
+        </div>
 
       </md-toolbar>
       <md-content class="layout-margin">
-
         <p>
           This map serves as a visual representation of the mormon missionaries that have left The Church of Jesus Christ of Latter-Day Saints.
         </p>
         <p>
           If you served a mission and left the church, add yourself to the map.
         </p>
 
-
         <md-button class="md-primary md-raised md-button"
                    style="width: 90%"
                    ng-click="main.showNewRMDialog($event); main.toggleNav();">
                    Add yourself to the map
         </md-button>
 
       </md-content>
+      <md-content layout="row">
+        <div flex="50" class="stat-column">
+          <h3 class="md-display-3">{{RMCount}}</h3>
+          <p>Missionaries</p>
+        </div>
+
+        <div flex class="stat-column">
+          <h3 class="md-display-3">{{missionCount}}</h3>
+          <p>Missions</p>
+        </div>
+      </md-content>
 
       <span flex></span>
 
       <md-menu-item>
-              <a md-button href="mailto:feedback@exrmmap.com"><p><md-icon class="material-icons">mail</md-icon>Send Feedback About This Site</p></a>
+              <a md-button href="mailto:feedback@exrmmap.com"><p><md-icon class="material-icons">mail</md-icon>Send Feedback <span hide-xs>About This Site</span></p></a>
       </md-menu-item>
     </md-sidenav>
     <div md-layout="column" flex>
@@ -68,7 +119,7 @@ <h1 hide-gt-sm>Ex-Mormon Missionary Map</h1>
         </md-button>
       </div>
       </md-toolbar>
-      <div ui-view></div>
+      <div class="content" ui-view></div>
     </div>
   </body>
 
@@ -83,11 +134,12 @@ <h1 hide-gt-sm>Ex-Mormon Missionary Map</h1>
   <!-- Angular Material Library -->
   <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
 
-  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOuqyDzI-BqSgSjv1cB3K0P5urSjqNj8Y&libraries=places"></script>
+  <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOuqyDzI-BqSgSjv1cB3K0P5urSjqNj8Y&libraries=places"></script> -->
 
   <!-- Other dependencies -->
   <script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
   <script src='libs/ngMask/dist/ngMask.min.js'></script>
+  <script src="libs/ngmap/build/scripts/ng-map.min.js"></script>
   <script src="libs/js-marker-clusterer/src/markerclusterer_compiled.js"></script>
 
   <script src="app.js"></script>

diff --git a/public/mainCtrl.js b/public/mainCtrl.js
@@ -5,9 +5,9 @@
     .module('app.main')
     .controller('mainController', mainController);
 
-  mainController.$inject = ['$q', '$scope', '$log', '$mdToast', '$mdDialog', '$mdSidenav'];
+  mainController.$inject = ['$q', '$scope', '$log', '$mdToast', '$mdDialog', '$mdSidenav', 'NgMap'];
 
-  function mainController($q, $scope, $log, $mdToast, $mdDialog, $mdSidenav) {
+  function mainController($q, $scope, $log, $mdToast, $mdDialog, $mdSidenav, NgMap) {
 
     var vm = this;
 
@@ -20,53 +20,53 @@
 
     firebase.initializeApp(firebaseConfig);
 
+    $scope.missionCount = 0;
+    $scope.RMCount = 0;
+    $scope.map;
+    $scope.mapCenter = {
+      lat: 41,
+      lng: -87
+    }
+
+    vm.mapAPI = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBOuqyDzI-BqSgSjv1cB3K0P5urSjqNj8Y&libraries=places';
     vm.RMList = {};
+    vm.RMCount = 0;
+
     vm.missionNames = [];
     vm.newRM;
-
-    var geocoder;
-    var map;
-    var markerArray = [];
-    var markerCluster;
+    vm.markerArray = [];
+    vm.MarkerClusterer;
 
     if (window.location.hostname.indexOf('localhost') < 0) {
-      $log.debug('not localhost')
       var db = 'main/'
     } else {
-      $log.debug('localhost')
+      $log.warn("You're currently on localhost. All data will be pushed to test directory.")
       var db = 'test/'
-      $log.debug(db)
     }
 
     vm.toggleNav = function() {
       $mdSidenav('left').toggle();
     }
 
-    vm.initMap = function() {
-      var myLatLng = {lat: 33.328748, lng: -40.497745};
-
-      map = new google.maps.Map(document.getElementById('map'), {
-        zoom: 3,
-        center: myLatLng
-      });
-
-      markerCluster = new MarkerClusterer(map, markerArray, {imagePath: 'libs/js-marker-clusterer/images/m'});
-    }
-
     vm.appInit = function(){
       firebase.database().ref(db + 'RMList').once('value').then(function(snapshot) {
         vm.RMList = snapshot.val();
-        for (var rm in vm.RMList) {
-          var latLng = new google.maps.LatLng(vm.RMList[rm].missionDetails.location.lat, vm.RMList[rm].missionDetails.location.lng);
-          var marker = new google.maps.Marker({
-            position: latLng
-          });
-          if (vm.missionNames.indexOf(vm.RMList[rm].missionDetails.name) < 0) {
-            vm.missionNames.push(vm.RMList[rm].missionDetails.name)
-          }
-          markerArray.push(marker);
-        }
-        vm.initMap();
+          NgMap.getMap().then(function(map) {
+            for (var rm in vm.RMList) {
+              var latLng = new google.maps.LatLng(vm.RMList[rm].missionDetails.location.lat, vm.RMList[rm].missionDetails.location.lng);
+              var marker = new google.maps.Marker({
+                position: latLng
+              });
+              if (vm.missionNames.indexOf(vm.RMList[rm].missionDetails.name) < 0) {
+                vm.missionNames.push(vm.RMList[rm].missionDetails.name)
+              }
+              $scope.missionCount = vm.missionNames.length;
+              $scope.RMCount++
+              vm.markerArray.push(marker);
+            }
+            $scope.markerCluster = new MarkerClusterer(map, vm.markerArray, {
+              imagePath: 'libs/js-marker-clusterer/images/m'});
+          })
       }, function(error) {
           $log.error(error)
       })
@@ -81,15 +81,18 @@
         clickOutsideToClose: true
       })
       .then(function(newRM) {
-        map.setCenter(newRM.missionDetails.location);
-        var marker = new google.maps.Marker({
-            map: map,
-            position: newRM.missionDetails.location
-        });
+        $scope.mapCenter = newRM.missionDetails.location;
+
+        NgMap.getMap().then(function(map) {
+          var marker = new google.maps.Marker({
+              position: newRM.missionDetails.location
+          });
+          $scope.markerCluster.addMarker(marker);
+        })
 
-        markerCluster.addMarker(marker);
-      }, function() {
-      });
+        $scope.missionCount++
+        $scope.RMCount++
+      })
     };
 
     function newRMDialogController($q, $mdDialog, missions) {
@@ -100,23 +103,26 @@
       vm.gmapsService = new google.maps.places.AutocompleteService();
       vm.geocoder = new google.maps.Geocoder();
 
-      // vm.RM = {
-      //   from: 'Panama City, FL',
-      //   gender: 'Male',
-      //   creationDate: 'text',
-      //   leftChurch: {
-      //     date: '2015',
-      //     reason: 'text'
-      //   },
-      //   missionDetails: {
-      //     start: '2007',
-      //     end: '2009',
-      //     name: 'Tirana Albania Mission',
-      //     location: {
-      //       address: 'Tirana, Albania',
-      //     }
-      //   }
-      // };
+      if (window.location.hostname.indexOf('localhost') == 0) {
+        $log.warn("You're on localhost, adding to test db.")
+        vm.RM = {
+          from: 'Panama City, FL',
+          gender: 'Male',
+          creationDate: 'text',
+          leftChurch: {
+            date: '2015',
+            reason: 'text'
+          },
+          missionDetails: {
+            start: '2007',
+            end: '2009',
+            name: 'Tirana Albania Mission',
+            location: {
+              address: 'Tirana, Albania',
+            }
+          }
+        };
+      };
 
       vm.cancel = function() {
         $mdDialog.cancel();

diff --git a/public/map.html b/public/map.html
@@ -1 +1,14 @@
-<div id="map"></div>
+<div class="map" map-lazy-load="{{main.mapAPI}}">
+  <ng-map center="[{{mapCenter.lat}}, {{mapCenter.lng}}]"
+          map-initialized="main.mapReady = true"
+          zoom="4"
+          max-zoom="7"
+          min-zoom="4"
+          street-view-control="false">
+  </ng-map>
+</div>
+<md-progress-circular ng-disabled="main.mapReady"
+                      class="md-accent"
+                      md-diameter="40"
+                      class="progress-indicator">
+</md-progress-circular>
diff --git a/public/newRMDialog.html b/public/newRMDialog.html
@@ -27,7 +27,7 @@ <h2>Add to Map</h2>
                                    md-item-text="mission"
                                    md-min-length="1"
                                    md-floating-label="Mission Name"
-                                   required>
+                                   required md-autofocus>
                                    <md-item-template>
                                      <span md-highlight-text="newRM.RM.missionDetails.name"
                                            md-highlight-flags="^i">
@@ -51,8 +51,9 @@ <h2>Add to Map</h2>
                                      <span md-highlight-text="locationSearchText" md-highlight-flags="^i">{{location}}</span>
                                    </md-item-template>
                   </md-autocomplete>
+                  <div layout="row">
 
-                  <md-input-container>
+                  <md-input-container flex="50">
                     <label>Mission Start Year</label>
                     <input ng-model="newRM.RM.missionDetails.start"
                            type="text"
@@ -61,14 +62,15 @@ <h2>Add to Map</h2>
                            required>
                   </md-input-container>
 
-                  <md-input-container>
+                  <md-input-container flex>
                     <label>Mission End Year</label>
                     <input ng-model="newRM.RM.missionDetails.end"
                            type="text"
                            mask="2999"
                            restrict="reject"
                            required>
                   </md-input-container>
+                </div>
                 </form>
             </md-content>
           </md-tab-body>