From 40c61cfec09e05c9909e1536cc089575a152332d Mon Sep 17 00:00:00 2001 From: Bryce Hewett Date: Thu, 1 Sep 2016 00:39:23 -0500 Subject: [PATCH 1/2] added ng-map and starting hooking it up --- bower.json | 3 +- public/app.js | 2 +- public/index.html | 3 +- public/mainCtrl.js | 110 ++++++++++++++++++++++++--------------------- public/map.html | 4 +- 5 files changed, 67 insertions(+), 55 deletions(-) diff --git a/bower.json b/bower.json index 01fda57..b767849 100644 --- 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 index c780d3c..7037fbb 100644 --- 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 index d255b80..0e09abf 100644 --- a/public/index.html +++ b/public/index.html @@ -83,11 +83,12 @@

Ex-Mormon Missionary Map

- + + diff --git a/public/mainCtrl.js b/public/mainCtrl.js index fb3ebdf..7f8668d 100644 --- 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,50 @@ firebase.initializeApp(firebaseConfig); + vm.mapAPI = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBOuqyDzI-BqSgSjv1cB3K0P5urSjqNj8Y&libraries=places'; + vm.RMList = {}; vm.missionNames = []; vm.newRM; + var map; + vm.mapCenter = { + lat: 41, + lng: -87 + }; var geocoder; - var map; - var markerArray = []; - var markerCluster; + vm.markerArray = []; if (window.location.hostname.indexOf('localhost') < 0) { - $log.debug('not localhost') var db = 'main/' } else { $log.debug('localhost') 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) + } + vm.markerArray.push(marker); + $log.debug(marker) + } + vm.markerCluster = new MarkerClusterer(map, vm.markerArray, { + imagePath: 'libs/js-marker-clusterer/images/m'}); + }) }, function(error) { $log.error(error) }) @@ -81,42 +78,53 @@ clickOutsideToClose: true }) .then(function(newRM) { - map.setCenter(newRM.missionDetails.location); - var marker = new google.maps.Marker({ - map: map, - position: newRM.missionDetails.location - }); + vm.mapCenter.lat = newRM.missionDetails.location.lat; + vm.mapCenter.lng = newRM.missionDetails.location.lng; + console.log(vm.mapCenter.lat) + console.log(vm.mapCenter.lng) + + NgMap.getMap().then(function(map) { + var marker = new google.maps.Marker({ + position: newRM.missionDetails.location + }); + vm.markerCluster.addMarker(marker); + + }) + + + // map.setCenter(newRM.missionDetails.location); + - markerCluster.addMarker(marker); }, function() { }); }; function newRMDialogController($q, $mdDialog, missions) { + vm = this; vm.missionNames = missions 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', - // } - // } - // }; + 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 index ad19e7d..24de6a1 100644 --- a/public/map.html +++ b/public/map.html @@ -1 +1,3 @@ -
+
+ +
From f0a4a5e1ee2303b5b7fecf1edad9909b677c8572 Mon Sep 17 00:00:00 2001 From: Bryce Hewett Date: Thu, 1 Sep 2016 22:30:00 -0500 Subject: [PATCH 2/2] added stats to the sidebar, tweaked map to use ng-map, added loading spinner, added logic to set test data when on localhost --- public/index.html | 87 ++++++++++++++++++++++++++++++++--------- public/mainCtrl.js | 78 ++++++++++++++++++------------------ public/map.html | 15 ++++++- public/newRMDialog.html | 8 ++-- 4 files changed, 125 insertions(+), 63 deletions(-) diff --git a/public/index.html b/public/index.html index 0e09abf..eeeb394 100644 --- a/public/index.html +++ b/public/index.html @@ -6,34 +6,75 @@ + - - -
-

About This Site

-

Ex-Mormon Missionary Map

- - - close - -
+ + +
+

About This Site

+

Ex-Mormon Missionary Map

+ + + close + +
-

This map serves as a visual representation of the mormon missionaries that have left The Church of Jesus Christ of Latter-Day Saints.

@@ -41,7 +82,6 @@

Ex-Mormon Missionary Map

If you served a mission and left the church, add yourself to the map.

- @@ -49,11 +89,22 @@

Ex-Mormon Missionary Map

 + +
+

{{RMCount}}

+

Missionaries

+
+ +
+

{{missionCount}}

+

Missions

+
+ -

mailSend Feedback About This Site

 +

mailSend Feedback About This Site
@@ -68,7 +119,7 @@

Ex-Mormon Missionary Map

 -
+
diff --git a/public/mainCtrl.js b/public/mainCtrl.js index 7f8668d..7fa7fe1 100644 --- a/public/mainCtrl.js +++ b/public/mainCtrl.js @@ -20,24 +20,27 @@ firebase.initializeApp(firebaseConfig); - vm.mapAPI = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBOuqyDzI-BqSgSjv1cB3K0P5urSjqNj8Y&libraries=places'; + $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 map; - vm.mapCenter = { - lat: 41, - lng: -87 - }; - - var geocoder; vm.markerArray = []; + vm.MarkerClusterer; if (window.location.hostname.indexOf('localhost') < 0) { 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/' } @@ -45,7 +48,6 @@ $mdSidenav('left').toggle(); } - vm.appInit = function(){ firebase.database().ref(db + 'RMList').once('value').then(function(snapshot) { vm.RMList = snapshot.val(); @@ -58,10 +60,11 @@ 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); - $log.debug(marker) } - vm.markerCluster = new MarkerClusterer(map, vm.markerArray, { + $scope.markerCluster = new MarkerClusterer(map, vm.markerArray, { imagePath: 'libs/js-marker-clusterer/images/m'}); }) }, function(error) { @@ -78,52 +81,47 @@ clickOutsideToClose: true }) .then(function(newRM) { - vm.mapCenter.lat = newRM.missionDetails.location.lat; - vm.mapCenter.lng = newRM.missionDetails.location.lng; - console.log(vm.mapCenter.lat) - console.log(vm.mapCenter.lng) + $scope.mapCenter = newRM.missionDetails.location; NgMap.getMap().then(function(map) { var marker = new google.maps.Marker({ position: newRM.missionDetails.location }); - vm.markerCluster.addMarker(marker); - + $scope.markerCluster.addMarker(marker); }) - - // map.setCenter(newRM.missionDetails.location); - - - }, function() { - }); + $scope.missionCount++ + $scope.RMCount++ + }) }; function newRMDialogController($q, $mdDialog, missions) { - vm = this; vm.missionNames = missions 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() { diff --git a/public/map.html b/public/map.html index 24de6a1..df968eb 100644 --- a/public/map.html +++ b/public/map.html @@ -1,3 +1,14 @@ -
- +
+ +
+ + diff --git a/public/newRMDialog.html b/public/newRMDialog.html index eb5ef7b..71638c8 100644 --- a/public/newRMDialog.html +++ b/public/newRMDialog.html @@ -27,7 +27,7 @@

Add to Map

md-item-text="mission" md-min-length="1" md-floating-label="Mission Name" - required> + required md-autofocus> @@ -51,8 +51,9 @@

Add to Map

{{location}} +
- + Add to Map required> - + Add to Map restrict="reject" required> +