Geolocation

Reactive Geolocation API.

Usage

<script>
    import { geolocation } from "@sveu/browser"

    const { supported, coords, locatedAt, error, resume, pause } = geolocation()
</script>
<script>
    import { geolocation } from "@sveu/browser"

    const { supported, coords, locatedAt, error, resume, pause } = geolocation()
</script>
svelte

Example

supported: false

{
    "coords": {
        "accuracy": 0,
        "latitude": null,
        "longitude": null,
        "altitude": null,
        "altitudeAccuracy": null,
        "heading": null,
        "speed": null
    },
    "locatedAt": null,
    "error": {}
}

<script>
    import { geolocation } from "@sveu/browser"

    const { coords, locatedAt, error, resume, pause, supported } = geolocation()
</script>

<div class="grid place-items-center">
    <h1>supported: {$supported}</h1>

    <pre lang="json">{JSON.stringify(
            {
                coords: {
                    accuracy: $coords.accuracy,
                    latitude: $coords.latitude,
                    longitude: $coords.longitude,
                    altitude: $coords.altitude,
                    altitudeAccuracy: $coords.altitudeAccuracy,
                    heading: $coords.heading,
                    speed: $coords.speed,
                },
                locatedAt: $locatedAt,
                error: $error ? $error.message : error,
            },
            null,
            4
        )}</pre>
    <button on:click="{pause}">
        Pause watch
    </button>
    <br />
    <button  on:click="{resume}">
        Start watch
    </button>
</div>
<script>
    import { geolocation } from "@sveu/browser"

    const { coords, locatedAt, error, resume, pause, supported } = geolocation()
</script>

<div class="grid place-items-center">
    <h1>supported: {$supported}</h1>

    <pre lang="json">{JSON.stringify(
            {
                coords: {
                    accuracy: $coords.accuracy,
                    latitude: $coords.latitude,
                    longitude: $coords.longitude,
                    altitude: $coords.altitude,
                    altitudeAccuracy: $coords.altitudeAccuracy,
                    heading: $coords.heading,
                    speed: $coords.speed,
                },
                locatedAt: $locatedAt,
                error: $error ? $error.message : error,
            },
            null,
            4
        )}</pre>
    <button on:click="{pause}">
        Pause watch
    </button>
    <br />
    <button  on:click="{resume}">
        Start watch
    </button>
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Click fold/expand code

API

Options

Name Description Type Default
high Whether to enable high accuracy. boolean true
immediate Whether to start watching the location immediately. boolean true
maxAge The maximum age of a cached position. number 3
timeout The timeout in seconds. number 27


Returns

Name Description Type
supported Whether the Geolocation API is supported. Readable<boolean>
coords The current coordinates. Readable<GeolocationCoordinates>
locatedAt The timestamp of the last location update. Readable<number>
error The last error. Readable<GeolocationPositionError>
resume Resume watching the location. () => void
pause Pause watching the location. () => void
Last update at: Invalid Date