todos-contra-el-fuego-web/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js

45 lines
1.4 KiB
JavaScript

import React from 'react';
import './CenterInMyPosition.scss';
import { Button } from 'react-bootstrap';
import { translate } from 'react-i18next';
class CenterInMyPosition extends React.Component {
constructor(props) {
super(props);
}
onClick = (event) => {
// this.props.onClick(event);
// https://atmospherejs.com/mdg/geolocation
// only with SSL:
// https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
// https://stackoverflow.com/questions/31608579/somethings-wrong-with-my-meteor-geolocation-functions
var userGeoLocation = new ReactiveVar(null);
var self = this;
Tracker.autorun(function (computation) {
userGeoLocation.set(Geolocation.latLng());
if (userGeoLocation.get()) {
//stop the tracker if we got something
var viewport = {
center: [userGeoLocation.get().lat, userGeoLocation.get().lng],
zoom: 11
}
self.props.onClick(viewport);
// console.log(viewport);
// self.onViewportChanged(viewport);
computation.stop();
}
});
}
render() {
return (
<Button bsStyle="default" onClick={(event) => this.onClick(event)}>
<i className="icons icon-target"/>{this.props.t("Centrar el mapa en tu ubicación")}
</Button>
)
}
}
export default translate([], { wait: true }) (CenterInMyPosition);