Access device GPS for current position and location tracking
Tags: gps location position tracking coordinates
The useGeolocation composable provides access to the device's GPS capabilities. It supports one-time position fetching, continuous location watching with configurable accuracy, and permission management. The composable works seamlessly across web browsers and native Capacitor apps.
Import
<script>
import { useGeolocation } from '@classic-homes/native/svelte';
</script>// React
import { useGeolocation } from '@classic-homes/native/react';Basic Usage
<script lang="ts">
import { useGeolocation } from '@classic-homes/native/svelte';
const geo = useGeolocation({ enableHighAccuracy: true });
</script>
{#if geo.isLoading}
<p>Getting location...</p>
{:else if geo.position}
<p>
Lat: {geo.position.coords.latitude.toFixed(6)}, Lng: {geo.position.coords.longitude.toFixed(6)}
</p>
{/if}
<button onclick={() => geo.getCurrentPosition()}>Get Location</button>
<button onclick={() => (geo.isWatching ? geo.stopWatching() : geo.startWatching())}>
{geo.isWatching ? 'Stop' : 'Start'} Watching
</button>API Reference
| Property | Type | Description |
|---|---|---|
position |
Position | null |
Current GPS position with coordinates and accuracy |
isLoading |
boolean |
Whether a location request is in progress |
isWatching |
boolean |
Whether actively watching position changes |
error |
Error | null |
Current error if any |
permissionState |
PermissionState | null |
Current permission state ('granted', 'denied', 'prompt') |
getCurrentPosition |
(options?) => Promise<Position> |
Get current position once |
startWatching |
(options?) => Promise<void> |
Start continuous position updates |
stopWatching |
() => Promise<void> |
Stop position watching |
requestPermissions |
() => Promise<PermissionState> |
Request location permissions |
Accessibility
- Works with screen readers and assistive technologies
- Provides loading and error states for accessible status updates
- Keyboard accessible controls