Geolocation API for Angular

This is an Observable based abstraction over Geolocation API to use with Angular

Install

If you do not have @ng-web-apis/common:

npm i @ng-web-apis/common

Now install the package:

npm i @ng-web-apis/geolocation

How to use

GeolocationService

GeolocationService is an Observable, that emits Position object

Import service in your component:

import {GeolocationService} from '@ng-web-apis/geolocation';

// ...
constructor(private readonly geolocation$: GeolocationService) {}

Now, to observe user position, you can subscribe to geolocation$:

geolocation$.subscribe((position) => doSomethingWithPosition(position));

If you need to get position just once and stop observing user location, you can subscribe to geolocation$ and use take(1) RxJs operator:

geolocation$.pipe(take(1)).subscribe((position) => doSomethingWithPosition(position));

Or you can use async pipe to get position directly in template:

<div *ngIf="geolocation$ | async as position">
  <span>{{position.coords.latitude}}</span>
</div>

Service is cold, meaning if there are no active subscriptions, it doesn't track position.

Tokens

The library also provides some tokens to simplify working with Geolocation API:

• GEOLOCATION_SUPPORT returns true if user's browser supports Geolocation API

export class Example {
  constructor(@Inject(GEOLOCATION_SUPPORT) private readonly geolocationSupport: boolean) {}
}

• You can provide PositionOptions through POSITION_OPTIONS token with optional properties named enableHighAccuracy, timeout and maximumAge. It uses {} by default.

@NgModule({
    ...
  providers: [
        {
            provide: POSITION_OPTIONS,
            useValue: {enableHighAccuracy: true, timeout: 3000, maximumAge: 1000},
        },
    ],
})
export class AppModule {}

• navigator.geolocation can be injected through GEOLOCATION token.

Browser support

| | | | | | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 9+ | 3.5+ | 5+ | 5+ | 3.2+ |

Demo

You can try online demo here

See also

Other Web APIs for Angular by @ng-web-apis