• Two ways to build a location picker for a mobile AngularJS application

    Summary
    See the Pen 4d0c2a06e9671ec046baf30a16d811a8 [http://codepen.io/winkerVSbecks/pen/4d0c2a06e9671ec046baf30a16d811a8/] by Varun Vachhar (@winkerVSbecks [http://codepen.io/winkerVSbecks]) on CodePen [http://codepen.io]. Source [https://github.com/winkerVSbecks/locator] Demo [http://winkervsbecks.github.io/locator/] Building mobile apps [https://rangle.io/services/mobile-app-development/] often requires working with location information. While, the Cordova geo-location plugin makes it quite trivia
    Read time: 3 minutes
    Written by
    Date published
    January 5, 2015

    See the Pen 4d0c2a06e9671ec046baf30a16d811a8 by Varun Vachhar (@winkerVSbecks) on CodePen.

    Source
    Demo

    Building mobile apps often requires working with location information. While, the Cordova geo-location plugin makes it quite trivial to get the latitude and longitude values for the user’s current location, what we often want is location identifiers that are meaningful to the user - and not necessarily corresponding to the place where the user is right now. Below we look at two ways at acquiring meaningful location identifiers.

    1. Geo-Location to Nearby Locations

    We fetch nearby locations based on the geo-location data and allow the user to pick the most appropriate option. For this method we can split the tasks into two services:

    Location

    The Location service checks to see if geo-location is available and grabs the current location. It also allows us to register on-ready-tasks with it. Therefore, all the other directives/services which depend on the geo-location data only bootstrap once the data is available.

    The geo-location data is captured using using the navigator.geolocation.getCurrentPosition method. This works for both desktop browsers and Cordova/PhoneGap.

    Reverse Geocoder

    Reverse geocoding is the process of converting geographic coordinates (like latitude 43.647118 and longitude -79.420194) into a human-readable address (such as Ossington Ave at Argyle St, Toronto, ON, M6J 2Z5).

    The Reverse Geocoder sets up the Google Geocoder service and uses the geo-location data to fetch, reverse geocoded, nearby locations. The service provides various options with reducing resolution, for example:

    • House #, Street, City, Province, Postal Code, Country
    • Street, City, Province, Postal Code, Country
    • Neighbourhood, City, Province, Country
    • City, Province, Postal Code, Country

    Location-Picker

    The Location-Picker packages this into a simple directive. It utilizes the reverse-geocoder service to fetch a set of options for the user. The user selection is then bound to the object passed in through the ng-model attribute.

    <!-- Requires access to the user's geo-location data -->
    <location-picker
        ng-model="pickedLocation"
        limit-to="5"></location-picker>
    

    2. Manually Query the Location Database

    The second method is to allow the user to query the location database manually. In this case we use a set of nested directives and the Google Auto-complete service.

    Location-Predictions

    Location-Predictions directive generates a search box and sets up the Google Auto-complete service. The auto-complete service fetches predictions based on the user submitted query string.

    Location-Lookup

    The location-predictions directive generates a set of options which are passed into the Location-Lookup directive. Which in turn displays them as a list for the user to choose from. Once the user picks a location it uses the Google Places service to fetch the geo-location data for it.

    <!-- Requires user to enter a query -->
    <location-lookup
        ng-model="lookedUpLocation"
        limit-to="4"></location-lookup>
    

    The Google Places Library has certain logo requirements. In this case we are not using a map therefore, we are required to display a Powered by Google logo along with the data.

    Usage

    Both, location-lookup and location picker, directives are fairly straight forward to use. They essentially behave as a <select> element. The selection is captured using ng-model. Optionally you can limit the number of choices by using the limit-to attribute.

    The selection returns data of the following type:

    {
        name: 'CN Tower',
        description: 'CN Tower, Front Street West, Toronto, ON, Canada',
        latitude: 43.642566,
        longitude: -79.38705700000003
    }
    

    Alternative Geocoding Providers

    In this example I've used Google Maps JavaScript API v3 for all the location services required. Depending on your business and/or technical needs this might not be the best option. However, the idea remains the same and you could swap out the Google services with your prefered alternative.

    Tags

    See what Ranglers are writing about on our blog