svelte-geolocation

[![NPM][npm]][npm-url]

> Svelte bindings for the Geolocation API

Declaratively access the Geolocation API in Svelte components. This package provides a simple way to fetch the geolocation coordinates of the device.

Features

- Bind to coordinates in a 2-tuple ([longtitude: number, latitude: number]).
- Slotted states: loading/error/success.
- Programmatic access to the Geolocation API (e.g., geolocation.getCurrentPosition).
- Watch the current position.

---

Installation

``bash


npm

npm i -D svelte-geolocation

pnpm

pnpm i -D svelte-geolocation

Bun

bun i -D svelte-geolocation

Yarn

yarn add -D svelte-geolocation
`

Usage

$3

Set getPosition to true to automatically invoke the geolocation.getCurrentPosition method and bind to the coords prop to retrieve the [longitude, latitude] of the device. The default coords value is [-1, -1].

`svelte


{JSON.stringify(coords)}


`

$3

Bind to position to access all properties from GeolocationPosition.

`svelte


{JSON.stringify(position, null, 2)}


`

$3

By default, the component will not automatically fetch the geolocation coordinates. This method must be programmatically triggered.

`svelte no-eval



`

$3

This example shows programmatic usage of geolocation.getCurrentPosition.

Using the default slot, you can destructure the following props:

- coords: geolocation coordinates in [lng, lat] format
- loading: true when the geolocation is being fetched
- success: true if the geolocation has been obtained
- error: true if an error occurs when fetching the geolocation
- notSupported: true if the device does not support the Geolocation API

`svelte


(getPosition = true)}> Get geolocation

{getPosition}
let:coords
let:loading
let:success
let:error
let:notSupported
>
{#if notSupported}
Your browser does not support the Geolocation API.
{:else}
{#if loading}
Loading...
{/if}
{#if success}
{JSON.stringify(coords)}
{/if}
{#if error}
An error occurred. {error.code} {error.message}
{/if}
{/if}

`

$3

Set watch to true to invoke the geolocation.watchPosition method and get informed if the user changes position.

`svelte


(getPositionAgain = !getPositionAgain)}>
Get Position


getPosition={getPositionAgain}
watch={true}
on:position={(e) => {
detail = e.detail;
}}
/>

{JSON.stringify(detail, null, 2)}


`

$3

You can listen to dispatched events as an alternative to binding.

- on:position: fired when geolocation.getCurrentPosition succeeds
- on:error: fired when geolocation.getCurrentPosition fails

`svelte


getPosition
on:position={(e) => {
events = [...events, e.detail];
console.log(e.detail); // GeolocationPosition
}}
on:error={(e) => {
events = [...events, e.detail];
console.log(e.detail); // GeolocationError
}}
/>

Dispatched events:

{#each events as event}


{JSON.stringify(event, null, 2)}


{/each}
`

$3

Specify Geolocation position options using the options prop.

`svelte no-eval



`

API

$3

| Prop name | Value |
| :----------- | :--------------------------------------------------------------------------------------------------------------------------------- |
| coords | [longitude: number, latitude: number]; (default: [-1, -1]) |
| position | GeolocationPosition |
| options | PositionOptions |
| getPosition | boolean (default: false) |
| watch | boolean (default: false) |
| loading | boolean (default: false) |
| success | boolean (default: false) |
| error | false or GeolocationPositionError (default:false) |
| notSupported | boolean (default: false) |

$3

Use the bind:this directive to access the accessor methods available on the component instance.

`svelte no-display



`

#### API

`ts
interface Accessors {
/* Watch the geolocation position. /
watchPosition: (options: PositionOptions) => undefined | number;

/* Programmatically get the geolocation position. /
getGeolocationPosition: (options: PositionOptions) => Promise;

/* Clear the Geolocation watcher. /
clearWatcher: (watcherId: number) => void;
}
``

Changelog

CHANGELOG.md

License

MIT

[npm]: https://img.shields.io/npm/v/svelte-geolocation.svg?style=for-the-badge&color=%23ff3e00
[npm-url]: https://npmjs.com/package/svelte-geolocation