vue-geolocation-api

Vue Geolocation API

A simple reactive wrapper for Geolocation Web API

Features

• Customizable
• Reactive geolocation position
• Simple watcher control
• SSR Compatibility
• GeoJSON output

Setup

Install with npm

npm install --save vue-geolocation-api

Install with yarn

yarn add vue-geolocation-api

Vue instance

import Vue from 'vue' import VueGeolocationApi from 'vue-geolocation-api' Vue.use(VueGeolocationApi/*, { ...options } */)

Nuxt

Add to modules section at your nuxt.config.js

module.exports = { modules: [ 'vue-geolocation-api/nuxt', ], geolocation: { // watch: true, }, }

Usage

Computed properties

export default { // ... computed: { inRange() { const coords = this.$geolocation.coords if (!coords) return '?' return distanceFrom(coords, this.destination) > 150 } } }

Note that distanceFrom is not included in this package, if you need this feature I recommend to use with @turf/distance or geo-distance

Component templates

<template> <div> <span v-if="$geolocation.loading">Loading location...</span> <span v-else-if="!$geolocation.supported">Geolocation API is not supported</span> <span v-else>Range from destination: {{ inRange ? 'Allowed' : 'Disallowed' }}</span> </div> </template>

Watch statements

export default { // ... watch: { inRange(reached) { if (reached !== true) return console.log('Congratulations, you arrived') this.$geolocation.watch = false // Stop watching location } } }

Outputs

$geolocation.position [Position]

Exposes the results from getCurrentPosition or the last result from watchPosition. Default or unavailable: null

$geolocation.loading [Boolean]

If true, means the location is currently being executed.

$geolocation.supported [Boolean]

If true means the location api is available in the browser. If false means the location api is not available in the browser. if null means the support wasn't verified yet.

$geolocation.coords [Coordinates]

Alias for $geolocation.position.coords Default or unavailable: null

$geolocation.timestamp [Timestamp]

Alias for $geolocation.position.timestamp Default or unavailable: null

$geolocation.geoJSON [GeoJSON Point]

Formatted coordinates. Default or unavailable: null

Options

$geolocation.watch [Boolean]

If true will initiate watchPosition. If false stop watchPosition. This property can be changed dynamically and will react to it's changes.

$geolocation.options [PositionOptions]

Defines the parameters that will be used by getCurrentPosition and watchPosition. Changing this property will trigger an watchPosition reload if currently watching. Important: This property is only reactive if you replace it entirely. If you just want to change one options check the method setOption

Methods

$geolocation.getCurrentPosition(?options) [Promised Position]

Simply wraps the navigator.geolocation.getCurrentPosition as a Promise.

$geolocation.setOption(key, value) [Undefined]

Reactively updates the key property in $geolocation.options with value.

$geolocation.checkSupport() [Boolean]

Forces the $geolocation.supported to update.

Contributing or Issuing

Coming soon...

Created by @SkyaTura