Skip to content

Instantly share code, notes, and snippets.

@zrod
Created March 19, 2016 19:59
Show Gist options
  • Save zrod/96cb00ee6d283a59aa10 to your computer and use it in GitHub Desktop.
Save zrod/96cb00ee6d283a59aa10 to your computer and use it in GitHub Desktop.
var React = require('react'),
ReactDOM = require('react-dom');
class UserLocation extends React.Component {
constructor(props, geoWatchId, lat, lng) {
super(props);
// Internal vars
this.geoWatchId = geoWatchId ? geoWatchId : null;
this.lat = lat ? lat : null;
this.lng = lng ? lng : null;
this.state = {
countryName: 'global',
countrySlug: 'global'
};
}
componentDidMount() {
var _this = this;
navigator.geolocation.getCurrentPosition(
(position) => {
this.lat = position.coords.latitude;
this.lng = position.coords.longitude;
},
(error) => console.log( error.message ),
{enableHighAccuracy: true, maximumAge: 5000, timeout: 20000}
);
this.geoWatchId = navigator.geolocation.watchPosition(
(position) => {
this.lat = position.coords.latitude;
this.lng = position.coords.longitude;
}
);
this.serverRequest = $.getJSON('/geo.json', function( countries ) {
if (countries) {
for (var c in countries) {
if (countries[c].lat == _this.lat && countries[c].lng == _this.lng) {
_this.setState({
countryName: countries[c].name,
countrySlug: countries[c].slug
});
return;
}
}
}
});
}
componentWillUnmount() {
this.serverRequest.abort();
navigator.geolocation.clearWatch( this.geoWatchId );
}
render () {
return (
<div className="row">
<div className="large-12 columns">
Detectamos que voce esta no {this.state.countryName}, ...
</div>
</div>
);
}
}
ReactDOM.render(
<UserLocation />,
document.getElementById('regionSelection')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment