Obtaining browser location information using Angular

Whilst building a weather app I needed access to the browsers location information in order to display relevant weather information and I thought it might be of use if I posted the method I used.


The Geolocation.getCurrentPosition() method can be used to get the current location. It accepts one mandatory parameter which is a callback function along with several optional parameters. When invoked this method will bring up a browser notification so that the user can allow or block the request for location information.

To use this method in my Angular app I wrapped the call to Geolocation.getCurrentPosition inside an Observable method called getPosition.

getPosition(): Observable<any> {
    return Observable.create(observer => {
      window.navigator.geolocation.getCurrentPosition(position => {
        error => observer.error(error));

This method will notify its subscribers when the user agrees to allow the application access to the browsers location data.

With getPosition in place, I placed a call to subscribe to the observable from an Angular components ngOnInit lifecycle hook.

this.getPosition().subscribe(pos => {

I have purposefully left in the evolving calls to console.log to give an indication of how you can gain a better understanding of what the pos object contains.

This stuff is hard

The problem with a blog post is that it can look all too easy to showcase a solution and not the amount of wrong turns and dead ends that were taken. I didn’t want to end this post abruptly with a da dah and here is the solution. Instead I wanted to say something about how I arrived at the solution I have just described.

I started off trying to call Geolocation.getCurrentPosition and implement my own callback function but soon found myself in a world of trying to set “this” to the right context. I then went down the route of using a Promise which worked but didn’t feel right especially after reading the many posts discussing Promise v Observable so I finally ended up using an Observable. Even now I’m not 100% happy with the solution because I am using the any type. Please get in touch if you know how I could have used a more appropriate type!


To everyone that has written a blog, asked or answered a Stack Overflow question, posted a YouTube video, delivered a Plurasight course on Observables. Thank you it is really appreciated.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.