Geolocation

Reactive wrapper around the Geolocation API. Track user location with Angular signals.

Secure Context Required

This feature is available only in secure contexts (HTTPS) or potentially trustworthy origins (such as localhost or 127.0.0.1). Regular http:// URLs will not work in most browsers.

Loading demo...

Usage

import { Component } from '@angular/core';
import { geolocation } from '@signality/core';

@Component({
  template: `
    @if (geo.position()?.coords; as coords) {
      <p>📍 {{ coords.latitude }}, {{ coords.longitude }}</p>
    } @else {
      <button (click)="geo.start()">Get Location</button>
    }
  `,
})
export class LocationDemo {
  readonly geo = geolocation(); 
}

Parameters

Parameter	Type	Description
options	GeolocationOptions	Configuration options (see Options below)

Options

Option	Type	Default	Description
immediate	boolean	false	Start tracking immediately
enableHighAccuracy	boolean	true	Use GPS for better accuracy
maximumAge	number	0	Max age of cached position (ms)
timeout	number	Infinity	Request timeout (ms)
injector	Injector	-	Optional injector for DI context

Return Value

Returns a GeolocationRef:

Property	Type	Description
position	Signal<GeolocationPosition | null>	Full position object with timestamp
error	Signal<GeolocationPositionError | null>	Last error
isSupported	Signal<boolean>	Whether Geolocation API is supported
isActive	Signal<boolean>	Whether location tracking is active
isLoading	Signal<boolean>	Whether currently fetching location
stop	() => void	Stop watching position
start	() => void	Start/resume watching position

Examples

Show on map

import { Component, effect, viewChild, ElementRef } from '@angular/core';
import { geolocation } from '@signality/core';

@Component({
  template: `
    <div #map class="map"></div>
    @if (geo.isLoading()) {
      <p>Getting location...</p>
    }
    @if (geo.error()) {
      <p class="error">{{ geo.error()?.message }}</p>
    }
  `,
})
export class MapComponent {
  readonly mapEl = viewChild<ElementRef>('map');
  readonly geo = geolocation();
  
  constructor() {
    effect(() => {
      const coords = this.geo.position()?.coords;
      if (coords) {
        this.updateMarker(coords.latitude, coords.longitude);
      }
    });
  }
  
  private updateMarker(lat: number, lng: number) {
    // Update map marker position
  }
}

Distance calculator

import { Component, signal, computed } from '@angular/core';
import { geolocation } from '@signality/core';

@Component({
  template: `
    <p>Your location: {{ formattedCoords() }}</p>
    <p>Distance to destination: {{ distanceKm() }} km</p>
  `,
})
export class DistanceCalculator {
  readonly geo = geolocation({ immediate: true });
  readonly destination = signal({ lat: 40.7128, lng: -74.0060 }); // NYC
  
  readonly formattedCoords = computed(() => {
    const coords = this.geo.position()?.coords;
    
    if (!coords) {
      return 'Loading...';
    }}
    
    return `${coords.latitude.toFixed(4)}, ${coords.longitude.toFixed(4)}`;
  });
  
  readonly distanceKm = computed(() => {
    const coords = this.geo.position()?.coords;
    
    if (!coords) {
      return '...';
    } 
    
    const distance = this.haversineDistance(
      coords.latitude,
      coords.longitude,
      this.destination().lat,
      this.destination().lng
    );
    
    return distance.toFixed(1);
  });
  
  private haversineDistance(
    lat1: number, 
    lon1: number, 
    lat2: number, 
    lon2: number
  ): number {
    // Calculate distance using Haversine formula
  }
}

SSR Compatibility

On the server, signals initialize with safe defaults:

• position, error → null
• isSupported → false
• isActive, isLoading → false
• stop, start → no-op functions

Type Definitions

interface GeolocationOptions extends WithInjector {
  readonly immediate?: boolean;
  readonly enableHighAccuracy?: boolean;
  readonly maximumAge?: number;
  readonly timeout?: number;
}

interface GeolocationRef {
  readonly position: Signal<GeolocationPosition | null>;
  readonly error: Signal<GeolocationPositionError | null>;
  readonly isSupported: Signal<boolean>;
  readonly isActive: Signal<boolean>;
  readonly isLoading: Signal<boolean>;
  readonly stop: () => void;
  readonly start: () => void;
}

function geolocation(options?: GeolocationOptions): GeolocationRef;

Edit this page on GitHub Last updated: Mar 19, 2026, 23:28:23

PreviousGamepadNextInputModality