Added geolocation. Improved map subs. FireMap page

imports/ui/pages/FiresMap/FiresMap.js

@@ -1,13 +1,15 @@
 import React, {Component} from 'react';
-import { Row } from 'react-bootstrap';
+import { Row, Button } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
-import { translate } from 'react-i18next';
+import { Trans, Interpolate, translate } from 'react-i18next';
 import 'leaflet/dist/leaflet.css';
 import { Circle, CircleMarker, Map, Marker, Popup, TileLayer, PropTypes as MapPropTypes } from 'react-leaflet'
 import ActiveFiresCollection from '../../../api/ActiveFires/ActiveFires';
 import { withTracker } from 'meteor/react-meteor-data';
 import Loading from '../../components/Loading/Loading';
+import './FiresMap.scss';
+
 
 const MyPopupMarker = ({ children, position }) => (
   <Marker position={position}>
@@ -90,6 +92,8 @@ const DEFAULT_VIEWPORT = {
   zoom: 8,
 }
 
+
+
 class FiresMap extends React.Component {
 
   constructor(props) {
@@ -100,6 +104,26 @@ class FiresMap extends React.Component {
     }
   }
 
+
+  centerOnUserLocation = () => {
+    // https://atmospherejs.com/mdg/geolocation
+    // https://stackoverflow.com/questions/31608579/somethings-wrong-with-my-meteor-geolocation-functions
+    var userGeoLocation = new ReactiveVar(null);
+    var state = this.state;
+    Tracker.autorun(function (computation) {
+      userGeoLocation.set(Geolocation.latLng());
+      if (userGeoLocation.get()) {
+        //stop the tracker if we got something
+        computation.stop();
+        console.log(userGeoLocation.get());
+        state.viewport = {
+          center: [userGeoLocation.get().lat, userGeoLocation.get().lng],
+          zoom: 11
+        }
+      }
+    });
+  }
+
   onViewportChanged = viewport => {
     // console.log(this.state.viewport);
     zoom.set(viewport.zoom);
@@ -122,45 +146,66 @@ class FiresMap extends React.Component {
     }
 
     return (
-      /* !this.props.loading ?*/
       /* Large number of markers:
          https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 */
       <div>
-      <Row>Fires active in this map: {this.props.activefires.length}</Row>
-      <Row>Mostrar fábricas</Row>
-      <Map
-      animate={true}
-      preferCanvas={false}
-      onClick={this.onClickReset}
-      viewport={this.state.viewport}
-      onViewportChanged={this.onViewportChanged}
-      >
-      {/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
-      {/* <TileLayer
-          attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
-          url="http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
-          /> */}
-      {/* <TileLayer
-          attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
-          url="http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png"
-          /> */}
-      <TileLayer
-      attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
-      url="http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
-      />
-      {/* <TileLayer
-          attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
-          url="https://{s}.tiles.mapbox.com/v3/americanredcross.hcji22de/{z}/{x}/{y}.png"
-          />
-          <Circle center={position} color="red" fill={true} radius={scan*1000} />
-          <MyCirclesList circles={circles} />*/}
+        {this.props.loading ?
+         <Row className="align-items-center justify-content-center">
+           <Loading />
+         </Row>
+         :""}
+         <h4 className="page-header"><Trans parent="span">Fuegos activos</Trans></h4>
+         <Row>
+           <Map
+               animate={true}
+               preferCanvas={false}
+               onClick={this.onClickReset}
+               viewport={this.state.viewport}
+               onViewportChanged={this.onViewportChanged}
+           >
+             {/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
+             {/* <TileLayer
+             attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+             url="http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
+             /> */}
+             {/* <TileLayer
+             attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+             url="http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png"
+             /> */}
+             <TileLayer
+                 attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+                 url="http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
+             />
+             {/* <TileLayer
+             attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+             url="https://{s}.tiles.mapbox.com/v3/americanredcross.hcji22de/{z}/{x}/{y}.png"
+             />
+             <Circle center={position} color="red" fill={true} radius={scan*1000} />
+             <MyCirclesList circles={circles} />*/}
 
-      <FireList activefires={this.props.activefires} scale={this.state.viewport.zoom > 8} />
+             <FireList activefires={this.props.activefires} scale={this.state.viewport.zoom > 8} />
 
-      {/* <MyMarkersList markers={markers} /> */}
-      </Map>
+             {/* <MyMarkersList markers={markers} /> */}
+           </Map>
+         </Row>
+         <Row>
+           <p>
+             <Interpolate i18nKey="activeFireInMapCount"
+                          count={this.props.activefires.length}
+                          countTotal={this.props.activefirestotal}
+             ></Interpolate>
+           </p>
+           <p>
+             <em><Trans parent="span">Fuentes: NASA y alertas vecinales de nuestr@s usuari@s</Trans></em>
+           </p>
+         </Row>
+         <Row>
+           <Button bsStyle="default" onClick={() => this.centerOnUserLocation()}>
+             <i className="location"/>
+             <Trans className="location" parent="span">Centrar el mapa en tu ubicación</Trans>
+           </Button>
+         </Row>
       </div>
-      /* : <Loading />*/
     );
   }
 }
@@ -173,9 +218,11 @@ const lng = new ReactiveVar(DEF_LNG);
 FiresMap.propTypes = {
   loading: PropTypes.bool.isRequired,
   activefires: PropTypes.arrayOf(PropTypes.object).isRequired,
+  activefirestotal: PropTypes.number.isRequired,
+  viewport: PropTypes.object.isRequired
 };
 
-export default withTracker(() => {
+export default translate([], { wait: true }) (withTracker(() => {
   var subscription;
   Meteor.autorun(function() {
     // Subscribe for the current templateId (only if one is selected). Note this
@@ -185,7 +232,7 @@ export default withTracker(() => {
       // TODO select position
       subscription = Meteor.subscribe('activefiresmyloc', zoom.get(), lat.get(), lng.get());
   });
-
+  Meteor.subscribe('activefirestotal');
   // const subscription = Meteor.subscribe('activefiresmyloc', zoom.get());
   Meteor.call("geo", function (error, response) {
     if (error) {
@@ -198,11 +245,10 @@ export default withTracker(() => {
   return {
     loading: !subscription.ready(),
     activefires: ActiveFiresCollection.find().fetch(),
-    geoip: geoip.get(),
-    zoom: zoom.get(),
+    activefirestotal: Counter.get('countActiveFires'),
     viewport: {
       center: geoip.get(), // a point in the sea
       zoom: zoom.get(),
     }
   };
-})(FiresMap);
+})(FiresMap));

imports/ui/pages/FiresMap/FiresMap.scss

@@ -0,0 +1,40 @@
+/* https://github.com/PaulLeCam/react-leaflet/issues/108 */
+
+.leaflet-container {
+  height: 100%;
+  min-height: 75vh;
+  width: 100%;
+  min-width: 75vw;
+  display: flex;
+  margin: 30px auto;
+}
+
+.Loading {
+  position: absolute;
+  top: calc(50% - 150px);
+  left: calc(50% - 150px);
+  z-index: 1000;
+}
+
+.Loading > svg {
+  width: 300px;
+  height: 300px;
+  stroke: grey;
+}
+
+@media only screen and (max-width: 400px) {
+  /* .leaflet-container {
+     height: 500px;
+     width: 85vw;
+     } */
+}
+
+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/pages/Index/Index-custom.scss

@@ -140,11 +140,3 @@
   color: white;
   text-transform: uppercase;
 }
-
-
-/* https://github.com/PaulLeCam/react-leaflet/issues/108 */
-.leaflet-container {
-  height: 500px;
-  width: 85%;
-  margin: 0 auto;
-}

imports/ui/pages/Index/Index.js

@@ -5,7 +5,6 @@ import {render} from 'react-dom';
 import { Link } from 'react-router-dom';
 // https://www.npmjs.com/package/react-resize-detector
 import ReactResizeDetector from 'react-resize-detector';
-import FiresMap from  './FiresMap';
 
 import './Index.scss';
 import './Index-custom.scss';
@@ -120,11 +119,6 @@ class Index extends Component {
             <Link className="participe-btn btn btn-lg btn-warning" role="button" to="/signup">{this.props.t('Participa')}</Link>
           </div>
         </section>
-
-        <section className="py-5">
-          <a id="fires" name="fires"></a>
-          <FiresMap />
-        </section>
       </div>
     );
   };