react-redux-geolocation
This package allows you to get a users geolocation.
Table of Contents
Installation
npm i --save react-redux-geolocation
Usage
The Location component uses the HTML5 geolocation API to get a users location, and uses
freegeoip
as a fallback.
why do we use freegeoip
as a fallback ?
The HTML5 geoAPI prompts the user if he wants to use his location. If the user presses no then there is no way to get a users location. This prompt will re-display again when a user clears his cache.
freegeoip
will be used when this the HTML5 geolocation API permission is denied.
How does react-redux-geolocation gets the user location?
-
We check localStorage for previous cached position and we try to re-use those as initial values. We use localStorage because sometimes positions do not get cached. If this works we save the position in redux and then try #2.
-
The default geoOptions of
{ maximumAge: Infinity, timeout:0 }
are used to set a cached position. If this works we use the position if not we go to step #3. -
When step #2 fails, due to timing error we try to get a real users location by calling
navigator.geolocation.getCurrentPosition()
without any options. We do not use options so that the position is always fresh. -
When step #3 fails, due to permission errors, then we try to get the users position from the 3rd party service
freegeoip
. This service will return us the latitude and longitude. -
If all of the above fail than no position will be saved in the redux store.
Add the reducer
;; geolocation;
User GeoLocation component
; const App = { return <div> <GeoLocation /> propschildren </div> ;};
API
GeoLocation props
-
googleAPIKey - {string} When the API key is passed this will use google to get the location address.
-
watch - {bool} watches position changes and updates the lat, long coordinates
-
debug - {bool} displays all of the GeoLocation component properties
-
timeout - {number | Infinity} // By using a 'timeout' of x milliseconds, if there is no suitable cached position available, the user agent will asynchronously invoke the error callback with code TIMEOUT and will not initiate a new position
-
maximumAge - {number}ms By using the 'maximumAge' option above, the position object is guaranteed to be at most x minutes old.
-
enableHighAccuracy - {bool}
GeoLocation Values
The latitude and longitude attributes are geographic coordinates specified in decimal degrees.
The altitude attribute denotes the height of the position, specified in meters above the [WGS84] ellipsoid. If the implementation cannot provide altitude information, the value of this attribute MUST be null.
The accuracy attribute denotes the accuracy level of the latitude and longitude coordinates. It is specified in meters and MUST be supported by all implementations. The value of the accuracy attribute MUST be a non-negative real number.
The altitudeAccuracy attribute is specified in meters. If the implementation cannot provide altitude information, the value of this attribute MUST be null. Otherwise, the value of the altitudeAccuracy attribute MUST be a non-negative real number.
The accuracy and altitudeAccuracy values returned by an implementation SHOULD correspond to a 95% confidence level.
The heading attribute denotes the direction of travel of the hosting device and is specified in degrees, where 0° ≤ heading < 360°, counting clockwise relative to the true north. If the implementation cannot provide heading information, the value of this attribute MUST be null. If the hosting device is stationary (i.e. the value of the speed attribute is 0), then the value of the heading attribute MUST be NaN.
The speed attribute denotes the magnitude of the horizontal component of the hosting device's current velocity and is specified in meters per second. If the implementation cannot provide speed information, the value of this attribute MUST be null. Otherwise, the value of the speed attribute MUST be a non-negative real number.
Support
Please open an issue for support.
Contributing
Please contribute using Github Flow. Create a branch, add commits, and open a pull request.