{"id":16791976,"url":"https://github.com/metonym/svelte-geolocation","last_synced_at":"2025-05-05T16:20:34.083Z","repository":{"id":46712513,"uuid":"325627659","full_name":"metonym/svelte-geolocation","owner":"metonym","description":"Geolocation API wrapper for Svelte","archived":false,"fork":false,"pushed_at":"2024-08-13T20:30:32.000Z","size":251,"stargazers_count":29,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-14T13:58:24.353Z","etag":null,"topics":["coordinates","geolocation","latitude","longitude","svelte","svelte-component"],"latest_commit_sha":null,"homepage":"https://metonym.github.io/svelte-geolocation/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metonym.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-30T19:05:14.000Z","updated_at":"2025-03-09T22:30:38.000Z","dependencies_parsed_at":"2024-08-13T23:36:10.111Z","dependency_job_id":null,"html_url":"https://github.com/metonym/svelte-geolocation","commit_stats":{"total_commits":24,"total_committers":3,"mean_commits":8.0,"dds":0.08333333333333337,"last_synced_commit":"a4ef480bfc56c139a0820558805a008f2bb7ea30"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-geolocation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-geolocation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-geolocation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-geolocation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metonym","download_url":"https://codeload.github.com/metonym/svelte-geolocation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252531879,"owners_count":21763293,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["coordinates","geolocation","latitude","longitude","svelte","svelte-component"],"created_at":"2024-10-13T08:43:43.916Z","updated_at":"2025-05-05T16:20:34.057Z","avatar_url":"https://github.com/metonym.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-geolocation\n\n[![NPM][npm]][npm-url]\n\n\u003e Svelte bindings for the [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)\n\nDeclaratively access the Geolocation API in Svelte components. This package provides a simple way to fetch the geolocation coordinates of the device.\n\n**Features**\n\n- Bind to coordinates in a 2-tuple (`[longtitude: number, latitude: number]`).\n- Slotted states: loading/error/success.\n- Programmatic access to the Geolocation API (e.g., `geolocation.getCurrentPosition`).\n- Watch the current position.\n\n---\n\n\u003c!-- TOC --\u003e\n\n## Installation\n\n```bash\n# npm\nnpm i -D svelte-geolocation\n\n# pnpm\npnpm i -D svelte-geolocation\n\n# Bun\nbun i -D svelte-geolocation\n\n# Yarn\nyarn add -D svelte-geolocation\n```\n\n## Usage\n\n### Binding coordinates\n\nSet `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]`.\n\n```svelte\n\u003cscript\u003e\n  import Geolocation from \"svelte-geolocation\";\n\n  let coords = [];\n\u003c/script\u003e\n\n\u003cGeolocation getPosition bind:coords /\u003e\n\n\u003cpre\u003e{JSON.stringify(coords)}\u003c/pre\u003e\n```\n\n### Binding geolocation position\n\nBind to `position` to access all properties from [GeolocationPosition](https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPosition).\n\n```svelte\n\u003cscript\u003e\n  import Geolocation from \"svelte-geolocation\";\n\n  let position;\n\u003c/script\u003e\n\n\u003cGeolocation getPosition bind:position /\u003e\n\n\u003cpre\u003e{JSON.stringify(position, null, 2)}\u003c/pre\u003e\n```\n\n### Programmatic usage\n\nBy default, the component will not automatically fetch the geolocation coordinates. This method must be programmatically triggered.\n\n```svelte no-eval\n\u003cscript\u003e\n  let ref;\n\n  // Access the component instance and programmatically invoke the method.\n  $: ref?.getGeolocationPosition({ enableHighAccuracy: true });\n\u003c/script\u003e\n\n\u003cGeolocation bind:this={ref} /\u003e\n```\n\n### Slotted states\n\nThis example shows programmatic usage of `geolocation.getCurrentPosition`.\n\nUsing the default slot, you can destructure the following props:\n\n- **`coords`**: geolocation coordinates in `[lng, lat]` format\n- **`loading`**: `true` when the geolocation is being fetched\n- **`success`**: `true` if the geolocation has been obtained\n- **`error`**: `true` if an error occurs when fetching the geolocation\n- **`notSupported`**: `true` if the device does not support the Geolocation API\n\n```svelte\n\u003cscript\u003e\n  import Geolocation from \"svelte-geolocation\";\n\n  let getPosition = false;\n\u003c/script\u003e\n\n\u003cbutton on:click={() =\u003e (getPosition = true)}\u003e Get geolocation \u003c/button\u003e\n\n\u003cGeolocation\n  {getPosition}\n  let:coords\n  let:loading\n  let:success\n  let:error\n  let:notSupported\n\u003e\n  {#if notSupported}\n    Your browser does not support the Geolocation API.\n  {:else}\n    {#if loading}\n      Loading...\n    {/if}\n    {#if success}\n      {JSON.stringify(coords)}\n    {/if}\n    {#if error}\n      An error occurred. {error.code} {error.message}\n    {/if}\n  {/if}\n\u003c/Geolocation\u003e\n```\n\n### Watching Position\n\nSet `watch` to `true` to invoke the `geolocation.watchPosition` method and get informed if the user changes position.\n\n```svelte\n\u003cscript\u003e\n  import Geolocation from \"svelte-geolocation\";\n\n  let getPositionAgain = false;\n  let detail = {};\n\u003c/script\u003e\n\n\u003cbutton on:click={() =\u003e (getPositionAgain = !getPositionAgain)}\u003e\n  Get Position\n\u003c/button\u003e\n\n\u003cGeolocation\n  getPosition={getPositionAgain}\n  watch={true}\n  on:position={(e) =\u003e {\n    detail = e.detail;\n  }}\n/\u003e\n\n\u003cpre\u003e{JSON.stringify(detail, null, 2)}\u003c/pre\u003e\n```\n\n### Dispatched Events\n\nYou can listen to dispatched events as an alternative to binding.\n\n- **`on:position`**: fired when `geolocation.getCurrentPosition` succeeds\n- **`on:error`**: fired when `geolocation.getCurrentPosition` fails\n\n```svelte\n\u003cscript\u003e\n  import Geolocation from \"svelte-geolocation\";\n\n  let events = [];\n\u003c/script\u003e\n\n\u003cGeolocation\n  getPosition\n  on:position={(e) =\u003e {\n    events = [...events, e.detail];\n    console.log(e.detail); // GeolocationPosition\n  }}\n  on:error={(e) =\u003e {\n    events = [...events, e.detail];\n    console.log(e.detail); // GeolocationError\n  }}\n/\u003e\n\n\u003cstrong\u003eDispatched events:\u003c/strong\u003e\n\n{#each events as event}\n  \u003cpre\u003e{JSON.stringify(event, null, 2)}\u003c/pre\u003e\n{/each}\n```\n\n### Geolocation options\n\nSpecify [Geolocation position options](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) using the `options` prop.\n\n```svelte no-eval\n\u003cscript\u003e\n  import Geolocation from \"svelte-geolocation\";\n\n  let options = {\n    /**\n     * @type {boolean}\n     * @default false\n     */\n    enableHighAccuracy: true,\n\n    /**\n     * @type {number}\n     * @default Infinity\n     */\n    timeout: 5000, // milliseconds\n\n    /**\n     * @type {number}\n     * @default 0\n     */\n    maximumAge: 60 * 60 * 1000, // milliseconds\n  };\n\u003c/script\u003e\n\n\u003cGeolocation getPosition {options} /\u003e\n```\n\n## API\n\n### Props\n\n| Prop name    | Value                                                                                                                              |\n| :----------- | :--------------------------------------------------------------------------------------------------------------------------------- |\n| coords       | `[longitude: number, latitude: number];` (default: `[-1, -1]`)                                                                     |\n| position     | [GeolocationPosition](https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPosition)                                        |\n| options      | [PositionOptions](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions)                                                |\n| getPosition  | `boolean` (default: `false`)                                                                                                       |\n| watch        | `boolean` (default: `false`)                                                                                                       |\n| loading      | `boolean` (default: `false`)                                                                                                       |\n| success      | `boolean` (default: `false`)                                                                                                       |\n| error        | `false` or [GeolocationPositionError](https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPositionError) (default:`false`) |\n| notSupported | `boolean` (default: `false`)                                                                                                       |\n\n### Accessors\n\nUse the `bind:this` directive to access the accessor methods available on the component instance.\n\n```svelte no-display\n\u003cscript\u003e\n  import Geolocation from \"svelte-geolocation\";\n\n  let geolocation;\n\n  $: geolocation?.getGeolocationPosition({ enableHighAccuracy: true });\n\u003c/script\u003e\n\n\u003cGeolocation bind:this={geolocation} /\u003e\n```\n\n#### API\n\n```ts\ninterface Accessors {\n  /** Watch the geolocation position. */\n  watchPosition: (options: PositionOptions) =\u003e undefined | number;\n\n  /** Programmatically get the geolocation position. */\n  getGeolocationPosition: (options: PositionOptions) =\u003e Promise\u003cvoid\u003e;\n\n  /** Clear the Geolocation watcher. */\n  clearWatcher: (watcherId: number) =\u003e void;\n}\n```\n\n## Examples\n\n- [examples/sveltekit](examples/sveltekit)\n- [examples/vite](examples/vite)\n- [examples/rollup](examples/rollup)\n- [examples/webpack](examples/webpack)\n\n## Changelog\n\n[CHANGELOG.md](CHANGELOG.md)\n\n## License\n\n[MIT](LICENSE)\n\n[npm]: https://img.shields.io/npm/v/svelte-geolocation.svg?style=for-the-badge\u0026color=%23ff3e00\n[npm-url]: https://npmjs.com/package/svelte-geolocation\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelte-geolocation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetonym%2Fsvelte-geolocation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelte-geolocation/lists"}