Geolocation

Primitives to query and watch geolocation information from within the browser.

#How to use it

#createGeolocation

Used to fetch current geolocation data as a resource. This primitive uses createResource to return a location, so loading, error

const [location, refetch] = createGeolocation();

or with options:

const [location, refetch] = createGeolocation({
  enableHighAccuracy: false,
  maximumAge: 0,
  timeout: 200,
});

#Definition

createGeolocation(
  options: MaybeAccessor<PositionOptions> // these override basic defaults (see Types section)
): [
  location: Resource<GeolocationCoordinates | undefined>,
  refetch: Accessor<void>
]

#createGeolocationWatcher

Creates a geolocation watcher and updates a signal with the latest coordinates. This primitive returns two reactive getters: location and error.

const watcher = createGeolocationWatcher(true);
console.log(watcher.location);
console.log(watcher.error);

#Definition

createGeolocationWatcher(
  enabled: MaybeAccessor<boolean>,
  options: MaybeAccessor<PositionOptions>
): {
  location: GeolocationCoordinates | null,
  error: GeolocationPositionError | null
}

#Types

The values returned in the location property are as follows:

interface GeolocationCoordinates {
  readonly accuracy: number;
  readonly altitude: number | null;
  readonly altitudeAccuracy: number | null;
  readonly heading: number | null;
  readonly latitude: number;
  readonly longitude: number;
  readonly speed: number | null;
}

The options property defaults to the following value unless overwritten:

const geolocationDefaults: PositionOptions = {
  enableHighAccuracy: false,
  maximumAge: 0,
  timeout: Number.POSITIVE_INFINITY,
};

#Demo

Live Site

You may view a working example here: StackBlitz

#Primitive Ideas

We're always looking to enhance our primitives. Some ideas:

• createDistance (supply a lat/lng and reactively calculate the difference in km/m)
• createWithinRadius (a signal for tracking if a user is within a radius boundary)

#Changelog

See CHANGELOG.md