Svelte bindings for the Geolocation API
npm install 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.
---
``bashnpm
npm i -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}
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
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;
}
``[npm]: https://img.shields.io/npm/v/svelte-geolocation.svg?style=for-the-badge&color=%23ff3e00
[npm-url]: https://npmjs.com/package/svelte-geolocation