From 66362827ca21dbd44ea8131148a9cf9c87023f80 Mon Sep 17 00:00:00 2001 From: Lawrence Stone Date: Wed, 22 Jun 2016 13:04:51 -0700 Subject: [PATCH 1/6] re-writing directive with angular 1.5 .component() syntax. adding options to have custom text and custom result index for geocoded coordinates. --- .gitignore | 1 + README.md | 16 ++++++++++++---- angular-reverse-geocode.js | 36 +++++++++++++++++++++++------------- bower.json | 7 ++++--- 4 files changed, 40 insertions(+), 20 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1c2d52b --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/* diff --git a/README.md b/README.md index 5280b54..610c518 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,13 @@ angular-reverse-geocode ======================= -AngularJS reverse geocoding directive - +AngularJS reverse geocoding directive using AngularJS 1.5 component() syntax. ###Demo To see a demo and further details go to http://jasonwatmore.com/post/2014/02/15/AngularJS-Reverse-Geocoding-Directive.aspx ###Installation - Install using bower: `bower install angular-reverse-geocode` Alternatively download the code and include the angular-reverse-geocode.js file in your page. @@ -24,6 +22,16 @@ angular.module('myApp', ['angularReverseGeocode']); To use add a reverse-geocode tag to your page with attributes containing lat and long coordinates, e.g: +####Optional attributes + +`geocode-results-index` - Google returns many levels of results. Index 0 is generally the most explicit. Default is 0. +https://developers.google.com/maps/documentation/javascript/geocoding#reverse-geocoding-by-location + +`location-not-found-text` - Customize the message displayed if no location is found. Default is "Location not found". + +`geocode-failure-text` - Customize the message displayed when a geocoding error happens. Default is "Geocoder failed due to: " followed by the error message. + + ```html - + ``` \ No newline at end of file diff --git a/angular-reverse-geocode.js b/angular-reverse-geocode.js index d8656f9..40f351e 100644 --- a/angular-reverse-geocode.js +++ b/angular-reverse-geocode.js @@ -1,30 +1,40 @@ /** * AngularJS reverse geocoding directive * @author Jason Watmore (http://jasonwatmore.com) - * @version 1.0.0 + * @author Larry Stone + * @version 2.0.0 */ (function () { - angular.module('angularReverseGeocode', []) - .directive('reverseGeocode', function () { + angular.module('angularReverseGeocode', []).component('reverseGeocode', function () { return { - restrict: 'E', - template: '
', - link: function (scope, element, attrs) { + bindings: { + lat: '@', + lng: '@', + geocodeResultsIndex: '@?', + locationNotFoundText: '@?', + geocodeFailureText: '@?' + }, + template: '', + controller: function ($element) { + var vm = this; + var defaultResultsIndex = 0; + var defaultLocationNotFoundText = 'Location not found'; + var defaultGeocodeFailureText = 'Geocoder failed due to: '; var geocoder = new google.maps.Geocoder(); - var latlng = new google.maps.LatLng(attrs.lat, attrs.lng); + var latlng = new google.maps.LatLng(vm.lat, vm.lng); + geocoder.geocode({ 'latLng': latlng }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { - if (results[1]) { - element.text(results[1].formatted_address); + if (results[defaultResultsIndex]) { + $element.text(results[vm.geocodeResultsIndex || defaultResultsIndex].formatted_address); } else { - element.text('Location not found'); + $element.text(vm.locationNotFoundText || defaultLocationNotFoundText); } } else { - element.text('Geocoder failed due to: ' + status); + $element.text(vm.geocodeFailureText || (defaultGeocodeFailureText + status)); } }); - }, - replace: true + } } }); })(); \ No newline at end of file diff --git a/bower.json b/bower.json index e01709e..dd637e5 100644 --- a/bower.json +++ b/bower.json @@ -1,8 +1,9 @@ { "name": "angular-reverse-geocode", - "version": "1.0.0", + "version": "2.0.0", "authors": [ - "Jason Watmore (http://jasonwatmore.com)" + "Jason Watmore (http://jasonwatmore.com)", + "Larry Stone " ], "description": "AngularJS reverse geocoding directive", "main": "angular-reverse-geocode.js", @@ -21,6 +22,6 @@ "tests" ], "dependencies": { - "angular": "~1.2.16" + "angular": "~1.5.5" } } From 6b78061cf2cdaff23321be99532d031fc011a4f0 Mon Sep 17 00:00:00 2001 From: Lawrence Stone Date: Wed, 22 Jun 2016 13:11:10 -0700 Subject: [PATCH 2/6] removing $element and replacing with $ctrl. --- angular-reverse-geocode.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/angular-reverse-geocode.js b/angular-reverse-geocode.js index 40f351e..06848b9 100644 --- a/angular-reverse-geocode.js +++ b/angular-reverse-geocode.js @@ -14,9 +14,10 @@ locationNotFoundText: '@?', geocodeFailureText: '@?' }, - template: '', - controller: function ($element) { + template: '{{$ctrl.address}}', + controller: function () { var vm = this; + vm.address = ''; var defaultResultsIndex = 0; var defaultLocationNotFoundText = 'Location not found'; var defaultGeocodeFailureText = 'Geocoder failed due to: '; @@ -26,12 +27,12 @@ geocoder.geocode({ 'latLng': latlng }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[defaultResultsIndex]) { - $element.text(results[vm.geocodeResultsIndex || defaultResultsIndex].formatted_address); + vm.address = results[vm.geocodeResultsIndex || defaultResultsIndex].formatted_address; } else { - $element.text(vm.locationNotFoundText || defaultLocationNotFoundText); + vm.address = vm.locationNotFoundText || defaultLocationNotFoundText } } else { - $element.text(vm.geocodeFailureText || (defaultGeocodeFailureText + status)); + vm.address = vm.geocodeFailureText || (defaultGeocodeFailureText + status); } }); } From 186fd4e210edf63d27d0296006359704b2eede6d Mon Sep 17 00:00:00 2001 From: Lawrence Stone Date: Wed, 22 Jun 2016 13:23:44 -0700 Subject: [PATCH 3/6] fixing component syntax error and updating demo. --- angular-reverse-geocode.js | 54 ++++++++++++++++++-------------------- demo/demo.html | 2 +- 2 files changed, 27 insertions(+), 29 deletions(-) diff --git a/angular-reverse-geocode.js b/angular-reverse-geocode.js index 06848b9..99dc0e0 100644 --- a/angular-reverse-geocode.js +++ b/angular-reverse-geocode.js @@ -5,37 +5,35 @@ * @version 2.0.0 */ (function () { - angular.module('angularReverseGeocode', []).component('reverseGeocode', function () { - return { - bindings: { - lat: '@', - lng: '@', - geocodeResultsIndex: '@?', - locationNotFoundText: '@?', - geocodeFailureText: '@?' - }, - template: '{{$ctrl.address}}', - controller: function () { - var vm = this; - vm.address = ''; - var defaultResultsIndex = 0; - var defaultLocationNotFoundText = 'Location not found'; - var defaultGeocodeFailureText = 'Geocoder failed due to: '; - var geocoder = new google.maps.Geocoder(); - var latlng = new google.maps.LatLng(vm.lat, vm.lng); + angular.module('angularReverseGeocode', []).component('reverseGeocode', { + bindings: { + lat: '@', + lng: '@', + geocodeResultsIndex: '@?', + locationNotFoundText: '@?', + geocodeFailureText: '@?' + }, + template: '{{$ctrl.address}}', + controller: function () { + var vm = this; + vm.address = ''; + var defaultResultsIndex = 0; + var defaultLocationNotFoundText = 'Location not found'; + var defaultGeocodeFailureText = 'Geocoder failed due to: '; + var geocoder = new google.maps.Geocoder(); + var latlng = new google.maps.LatLng(vm.lat, vm.lng); - geocoder.geocode({ 'latLng': latlng }, function (results, status) { - if (status == google.maps.GeocoderStatus.OK) { - if (results[defaultResultsIndex]) { - vm.address = results[vm.geocodeResultsIndex || defaultResultsIndex].formatted_address; - } else { - vm.address = vm.locationNotFoundText || defaultLocationNotFoundText - } + geocoder.geocode({ 'latLng': latlng }, function (results, status) { + if (status == google.maps.GeocoderStatus.OK) { + if (results[defaultResultsIndex]) { + vm.address = results[vm.geocodeResultsIndex || defaultResultsIndex].formatted_address; } else { - vm.address = vm.geocodeFailureText || (defaultGeocodeFailureText + status); + vm.address = vm.locationNotFoundText || defaultLocationNotFoundText } - }); - } + } else { + vm.address = vm.geocodeFailureText || (defaultGeocodeFailureText + status); + } + }); } }); })(); \ No newline at end of file diff --git a/demo/demo.html b/demo/demo.html index 462891a..fee1b92 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -10,7 +10,7 @@

- +

From a0fa5716ed0a04f3f4d7203c2c747081ea94b6ed Mon Sep 17 00:00:00 2001 From: Lawrence Stone Date: Wed, 22 Jun 2016 14:02:56 -0700 Subject: [PATCH 4/6] cleaning up some code. --- angular-reverse-geocode.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/angular-reverse-geocode.js b/angular-reverse-geocode.js index 99dc0e0..81dca10 100644 --- a/angular-reverse-geocode.js +++ b/angular-reverse-geocode.js @@ -13,27 +13,27 @@ locationNotFoundText: '@?', geocodeFailureText: '@?' }, - template: '{{$ctrl.address}}', controller: function () { var vm = this; - vm.address = ''; var defaultResultsIndex = 0; var defaultLocationNotFoundText = 'Location not found'; var defaultGeocodeFailureText = 'Geocoder failed due to: '; var geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(vm.lat, vm.lng); + var resultsIndex = vm.geocodeResultsIndex || defaultResultsIndex; geocoder.geocode({ 'latLng': latlng }, function (results, status) { - if (status == google.maps.GeocoderStatus.OK) { - if (results[defaultResultsIndex]) { - vm.address = results[vm.geocodeResultsIndex || defaultResultsIndex].formatted_address; - } else { - vm.address = vm.locationNotFoundText || defaultLocationNotFoundText - } + console.log(results, status); + if (status === 'OK') { + vm.address = results[resultsIndex].formatted_address; + } else if (status === 'ZERO_RESULTS') { + vm.address = vm.locationNotFoundText || defaultLocationNotFoundText } else { vm.address = vm.geocodeFailureText || (defaultGeocodeFailureText + status); } }); - } + }, + template: '
{{$ctrl.address}}
' }); + })(); \ No newline at end of file From 2d883b3a0c00d0b3a93e7c4a3389a5aa0acf0748 Mon Sep 17 00:00:00 2001 From: Lawrence Stone Date: Wed, 22 Jun 2016 14:03:36 -0700 Subject: [PATCH 5/6] removing comments. updated the demo in the last commit. --- angular-reverse-geocode.js | 1 - 1 file changed, 1 deletion(-) diff --git a/angular-reverse-geocode.js b/angular-reverse-geocode.js index 81dca10..63baaec 100644 --- a/angular-reverse-geocode.js +++ b/angular-reverse-geocode.js @@ -23,7 +23,6 @@ var resultsIndex = vm.geocodeResultsIndex || defaultResultsIndex; geocoder.geocode({ 'latLng': latlng }, function (results, status) { - console.log(results, status); if (status === 'OK') { vm.address = results[resultsIndex].formatted_address; } else if (status === 'ZERO_RESULTS') { From 04ee85fc95daaa72bc3c44a5a9d79dd7ff799b42 Mon Sep 17 00:00:00 2001 From: Lawrence Stone Date: Wed, 22 Jun 2016 14:11:16 -0700 Subject: [PATCH 6/6] need to call $scope.$apply() to re-render. --- angular-reverse-geocode.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/angular-reverse-geocode.js b/angular-reverse-geocode.js index 63baaec..e2a4a1b 100644 --- a/angular-reverse-geocode.js +++ b/angular-reverse-geocode.js @@ -13,7 +13,7 @@ locationNotFoundText: '@?', geocodeFailureText: '@?' }, - controller: function () { + controller: function ($scope) { var vm = this; var defaultResultsIndex = 0; var defaultLocationNotFoundText = 'Location not found'; @@ -30,6 +30,7 @@ } else { vm.address = vm.geocodeFailureText || (defaultGeocodeFailureText + status); } + $scope.$apply(); }); }, template: '
{{$ctrl.address}}
'