npm install @solid-primitives/geolocation
yarn add @solid-primitives/geolocation
pnpm add @solid-primitives/geolocation


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

#How to use it


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,


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


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);


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


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,


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)