vue-geolocation-api v0.1.21
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
3 years ago
3 years ago
3 years ago
3 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago