Added SubscriptionsMap

imports/ui/components/CenterInMyPosition/CenterInMyPosition.js

@@ -37,7 +37,7 @@ class CenterInMyPosition extends React.Component {
   render() {
     return (
       <Button bsStyle="default" onClick={() => this.onClick()}>
-        <i className="icons icon-target" />{this.props.t('Centrar el mapa en tu ubicación')}
+        <i className="icons icon-target" />{this.props.t('Centrar en tu ubicación')}
       </Button>);
   }
 }

imports/ui/components/SelectionMap/SelectionMap.scss

@@ -16,8 +16,8 @@ div.selectionmap-leaflet-container {
 
 @include breakpoint(mobile) {
   .selectionmap-leaflet-container {
-     height: 80%;
-     min-width: 90vw;
+    height: 80%;
+    min-width: 90vw;
   }
 }
 

imports/ui/pages/Index/Index-custom.scss

@@ -223,4 +223,26 @@
 
 .full-width .page-header { // section titles
   margin-top: 20px;
+}
+
+.sect1 {
+}
+
+.sect2 {
+}
+
+.sect3 {
+  background-color: $todos-back4;
+}
+
+.sect4 {
+  background-color: $todos-back5;
+}
+
+.sect5 {
+  background-color: $todos-back6;
+}
+
+.sect6 {
+  background-color: $todos-back5;
 }

imports/ui/pages/Index/Index.js

@@ -14,6 +14,7 @@ import { ScrollToTopOnMount, SectionsContainer, Section } from 'react-fullpage';
 import 'html5-device-mockups/dist/device-mockups.min.css';
 import { isAnyMobile } from '/imports/ui/components/Utils/isMobile';
 import SubscriptionEditor from '/imports/ui/components/SubscriptionEditor/SubscriptionEditor';
+import SubscriptionsMap from '/imports/ui/pages/Subscriptions/SubscriptionsMap';
 import FiresMap from '../FiresMap/FiresMap';
 
 import './Index.scss';
@@ -43,7 +44,7 @@ class Index extends Component {
   getMap(isMobile) {
     if (!isMobile) {
       return (
-        <Section className="">
+        <Section className="sect5">
           <div className="container">
             <FiresMap />
           </div>
@@ -70,7 +71,7 @@ class Index extends Component {
   render() {
     // https://github.com/subtirelumihail/react-fullpage
     const fullPageOptions = {
-      anchors:              isAnyMobile ? ['home', 'crowdsourcing', 'participe', 'platforms'] : ['home', 'crowdsourcing', 'participe', 'fires', 'platforms'], // the anchors for each sections
+      anchors:              isAnyMobile ? ['home', 'crowdsourcing', 'users', 'participe', 'platforms'] : ['home', 'crowdsourcing', 'users', 'participe', 'fires', 'platforms'], // the anchors for each sections
       activeClass:          'active', // the class that is appended to the sections links
       arrowNavigation:      true, // use arrow keys (true after development)
       className:            'section-container', // the class name for the section container
@@ -89,7 +90,7 @@ class Index extends Component {
 
         <ScrollToTopOnMount />
         <SectionsContainer className="container" {...fullPageOptions}>
-          <Section>
+          <Section className="sect1">
             <header>
               <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
               <div
@@ -159,7 +160,7 @@ class Index extends Component {
             </section>
           </Section>
 
-          <Section className="crowd text-center bg-image-full">
+          <Section className="crowd text-center bg-image-full sect2">
             <div className="container">
               <div className="row">
                 <div className="col-md-8 mx-auto">
@@ -170,7 +171,13 @@ class Index extends Component {
             </div>
           </Section>
 
-          <Section className="">
+          <Section className="sect3">
+            <div className="container">
+              <SubscriptionsMap />
+            </div>
+          </Section>
+
+          <Section className="sect4">
             <div className="container">
               <h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
               <SubscriptionEditor
@@ -178,12 +185,11 @@ class Index extends Component {
                   history={this.props.history}
               />
             </div>
-            <div className="overlay" />
           </Section>
 
           {this.getMap(isAnyMobile)}
 
-          <Section className="platf">
+          <Section className="platf sect6">
             <div className="container">
               <div className="section-heading text-center">
                 <h2><Trans>Somos muchos ojos</Trans></h2>

imports/ui/pages/Subscriptions/SubscriptionsMap.js

@@ -0,0 +1,137 @@
+/* global L */
+/* eslint-disable import/no-absolute-path */
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable react/jsx-indent */
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { ButtonGroup, Row, Col } from 'react-bootstrap';
+import { Meteor } from 'meteor/meteor';
+import { withTracker } from 'meteor/react-meteor-data';
+import { Trans, translate } from 'react-i18next';
+import { Map } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
+import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
+import 'leaflet-sleep/Leaflet.Sleep.js';
+import Control from 'react-leaflet-control';
+import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition';
+import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
+import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
+import Loading from '/imports/ui/components/Loading/Loading';
+import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
+
+import './SubscriptionsMap.scss';
+
+// Remove map in subscription
+class SubscriptionsMap extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      viewport: {
+        center: [0, 0],
+        zoom: 0
+      },
+      init: true
+    };
+  }
+
+  componentDidMount() {
+    if (this.subscriptionsMap) {
+      this.addScale();
+    }
+  }
+
+  getMap() {
+    return this.subscriptionsMap.leafletElement;
+  }
+
+  addScale() {
+    // https://www.npmjs.com/package/leaflet-graphicscale
+    const map = this.getMap();
+    const options = {
+      fill: 'fill',
+      showSubunits: true
+    };
+    L.control.graphicScale([options]).addTo(map);
+  }
+
+  handleLeafletLoad(map) {
+    // console.log('Map loading');
+    // console.log(map);
+    if (map) {
+      this.state.union = subsUnion(this.state.union, {
+        map,
+        subs: this.props.userSubs,
+        show: true,
+        fit: this.state.init
+      });
+    }
+  }
+
+  centerOnUserLocation(viewport) {
+    console.log(`viewport: ${JSON.stringify(viewport)}`);
+    this.setState({ init: false, viewport });
+  }
+
+  render() {
+    console.log(`Rendering Subs users ready ${this.props.subsready} subs: ${this.props.userSubs.length} viewport: ${JSON.stringify(this.state.viewport)}`);
+    return (
+      <Fragment>
+        {!this.props.subsready ?
+         <Row className="align-items-center justify-content-center">
+           <Loading />
+         </Row>
+         : ''}
+         <h4 className="page-header"><Trans parent="span">Zonas vigiladas</Trans></h4>
+         <Col xs={12} sm={12} md={12} lg={12}>
+           <Row>
+             <Trans>En verde, las zonas vigiladas por nuestros usuari@s actualmente. ¡Participa!</Trans>&nbsp;(*)
+           </Row>
+           <Map
+               ref={(map) => {
+                   this.subscriptionsMap = map;
+                   this.handleLeafletLoad(map);
+                 }}
+               zoom={this.state.viewport.zoom}
+               center={this.state.viewport.center}
+               className="subscriptionsmap-leaflet-container"
+               animate
+               sleep={window.location.pathname === '/'}
+               sleepTime={10750}
+               wakeTime={750}
+               sleepNote
+               hoverToWake
+               wakeMessage={this.props.t('Pulsa para activar')}
+               sleepOpacity={0.6}
+           >
+             <DefMapLayers />
+             <Control position="topright" >
+               <ButtonGroup>
+                 <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} {... this.props} />
+               </ButtonGroup>
+             </Control>
+           </Map>
+         </Col>
+         <Row>
+           <Col xs={12} sm={12} md={12} lg={12}>
+             <p className="subscriptionsmap-footnote"><span style={{ paddingRight: '5px' }}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
+           </Col>
+         </Row>
+      </Fragment>
+    );
+  }
+}
+
+SubscriptionsMap.propTypes = {
+  subsready: PropTypes.bool.isRequired,
+  userSubs: PropTypes.arrayOf(PropTypes.object).isRequired,
+  t: PropTypes.func.isRequired
+};
+
+export default translate([], { wait: true })(withTracker(() => {
+  const userSubs = Meteor.subscribe('userSubsToFires');
+  return {
+    userSubs: UserSubsToFiresCollection.find().fetch(),
+    subsready: userSubs.ready()
+  };
+})(SubscriptionsMap));

imports/ui/pages/Subscriptions/SubscriptionsMap.scss

@@ -0,0 +1,63 @@
+@import '../../stylesheets/mixins';
+@import '../../stylesheets/colors';
+
+.subscriptionsmap-leaflet-container {
+  height: 100%;
+  min-height: 60vh;
+  width: 100%;
+  /* min-width: 75vw; */
+  display: flex;
+  margin: 20px auto;
+}
+
+div.selectionmap-leaflet-container {
+  position: relative;
+  margin: 0;
+}
+
+@include breakpoint(mobile) {
+  .subscriptionsmap-leaflet-container {
+    height: 80%;
+    min-width: 90vw;
+  }
+}
+
+.Loading {
+  position: absolute;
+  top: calc(50% - 150px);
+  left: calc(50% - 150px);
+  z-index: 1000;
+}
+
+.Loading > svg {
+  width: 300px;
+  height: 300px;
+  stroke: grey;
+}
+
+.mark-checkbox {
+  margin-left: 5px;
+}
+
+.leaflet-control-layers-toggle {
+  background-image: url(/images/layers.png);
+}
+
+.leaflet-retina .leaflet-control-layers-toggle {
+  background-image: url(/images/layers.png);
+  background-size: 26px 26px;
+}
+
+.glyphicon .glyphicon-thumbs-up {
+
+}
+
+.subscriptionsmap-legend {
+  font-size: 16px;
+}
+
+.subscriptionsmap-note,
+.subscriptionsmap-footnote {
+  font-size: 14px;
+  color: $light;
+}

imports/ui/stylesheets/colors.scss

@@ -42,6 +42,15 @@ $todos-palette3: $todos-palette3b;
 $todos-palette4: $todos-palette4b;
 $todos-palette5: $todos-palette5b;
 
+$todos-back1: #0D2E0E;
+$todos-back2: #A8AB9E;
+$todos-back3: #869686;
+$todos-back4: #DCD4CE;
+$todos-back5: #B7C1B7;
+$todos-back6: #E0E0E0;
+
+
+
 // It seems that we are not using bootstrap scss version so does not work
 $primary: $todos-palette1;
 $success: $todos-palette2;