Awesome Open Source
Awesome Open Source

ng-web-apis logo Geolocation API for Angular

Part of Web APIs for Angular

npm version npm bundle size .github/workflows/ci.yml Coveralls github angular-open-source-starter

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 YourComponent {
    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 {}

Browser support

IE / Edge
Firefox
Chrome
Safari
iOS Safari
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

Open-source

Do you also want to open-source something, but hate the collateral work? Check out this Angular Open-source Library Starter we’ve created for our projects. It got you covered on continuous integration, pre-commit checks, linting, versioning + changelog, code coverage and all that jazz.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (12,005
angular (1,323
geolocation (103
position (18