CenterInMyPosition and refactor

imports/ui/components/CenterInMyPosition/CenterInMyPosition.js

@@ -0,0 +1,45 @@
+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) => {
+    console.log("Click?");
+    // 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);
+        // self.onViewportChanged(viewport);
+        computation.stop();
+      }
+    });
+  }
+
+  render() {
+    return (
+      <Button bsStyle="default" onClick={(event) => this.onClick(event)}>
+        <i className="location"/>{this.props.t("Centrar el mapa en tu ubicación")}
+      </Button>
+    )
+  }
+}
+
+export default translate([], { wait: true }) (CenterInMyPosition);

imports/ui/components/CenterInMyPosition/CenterInMyPosition.scss

@@ -0,0 +1,9 @@
+i.location {
+  background: url(/my_location.svg) no-repeat top left;
+  background-size: contain;
+  cursor: pointer;
+  display: inline-block;
+  height: 30px;
+  width: 35px;
+  vertical-align: middle;
+}

imports/ui/components/SelectionMap/SelectionMap.js

@@ -8,8 +8,10 @@ import geolocation from '/imports/startup/client/geolocation';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
 import Control from 'react-leaflet-control';
-import { Button } from 'react-bootstrap';
+import { Button, ButtonToolbar } from 'react-bootstrap';
 import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
+import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
+import './SelectionMap.scss';
 
 const positionIcon = new Leaflet.Icon({
   iconUrl: "/your-position.png",
@@ -52,6 +54,7 @@ class SelectionMap extends Component {
       marker: [ lat, lng ],
       modified: true
     });
+    this.fit();
   }
 
   fit() {
@@ -77,6 +80,10 @@ class SelectionMap extends Component {
     console.log(event);
   }
 
+  centerOnUserLocation = (event) => {
+    console.log(event);
+  }
+
   render() {
     this.state.center = !this.state.modified && this.props.lat?
                         [this.props.lat, this.props.lng]: this.state.center;
@@ -112,10 +119,13 @@ class SelectionMap extends Component {
                 fillColor="green"
                 fillOpacity={.1}
                 radius={this.state.distance * 1000} />
+
         <Control position="topright" >
-          <Button bsStyle="success" onClick={this.doSubs}>
-            {this.props.t("Subscribirme a fuegos en este rádio")}
-          </Button>
+          <ButtonToolbar>
+            <Button bsStyle="success" onClick={(event) => this.doSubs(event)}>
+              {this.props.t("Subscribirme a fuegos en este rádio")}
+            </Button>
+          </ButtonToolbar>
          </Control>
         </Map> }
       </div>

imports/ui/components/SelectionMap/SelectionMap.scss

@@ -0,0 +1,15 @@
+.leaflet-container {
+  height: 100%;
+  min-height: 60vh;
+  width: 100%;
+  min-width: 75vw;
+  display: flex;
+  margin: 30px auto;
+}
+
+@media only screen and (max-width: 400px) {
+  .leaflet-container {
+     height: 400px;
+     width: 85vw;
+  }
+}