- Introspecting my wandering mind - https://rajandesai.com/blog -

Part 5: Web application development using AngularJS, Spring Boot and Maven – Support for eBird APIs, HTML 5 Geolocation and Google Geocoding

In my previous post [1], I completed the first phase of my Bird Log application. I can use this application to view my current sightings and add new sightings. I also implemented very basic support for content filtering. In this post, I am going to use eBird APIs [2] to display current bird sightings reported on ebird.org, near my current location. I plan to use HTML5 Geolocation APIs [3] to find out my current location automatically and then use Google Geocoding APIs [4] to map my current Geographic coordinates (latitude and longitude) to a human-readable address.### Integrate with ebird.org using ebird APIs
– Create a new file <project folder>/src/main/resources/static/app/js/controllers/ebird.js
– Create a new module called starterApp.ebird. This module depends on ngResource module.

        angular.module("starterApp.ebird", ["ngResource"])
- Add eBirdApiFactory that uses `$resource` to load recent bird sightings from `eBird.org`

        .factory('eBirdApiFactory', function($resource) {
            return $resource('http://ebird.org/ws1.1/data/obs/geo/recent?fmt=json', 
                             {lat: 42.3581, lng: -71.0636, dist: 2, back: 5, maxResults: 500, locale:'en_US'});
        })

    **NOTE**: 
    - This will send the following HTTP request:
              `http://ebird.org/ws1.1/data/obs/geo/recent?fmt=json&back=5&dist=2&lat=42.3581&lng=-71.0636&locale=en_US&maxResults=500`
    - **Default parameter values** specified above can be over written when the query method is called.
- Implement `ebirdApiCtrl` that uses `eBirdApiFactory` to populate the `$scope` field called `recentSightings`.

        .controller("ebirdApiCtrl", ['eBirdApiFactory', 
                                        function(eBirdApiFactory) {
            $scope.recentSightings = [];
            eBirdApiFactory.query(function(data){
                $scope.recentSightings = data;
            });
        }]);

  **Note**: Every time `ebirdApiCtrl` is loaded, `eBirdApiFactory.query` is executed and recent sightings are retrieved from the ebird.org server.

Sum it up

There you go, I have my Bird Log ready now. It demonstrates how easy it is to build a web application using Spring Boot, AngularJS and Maven.
Bird Log - Home
Bird Log - ebird sightings