Added SubscriptionsMap

designs/web-tcef.svg

@@ -26,16 +26,16 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="0.34787809"
-     inkscape:cx="482.26239"
-     inkscape:cy="500.72871"
+     inkscape:zoom="0.17393905"
+     inkscape:cx="-1241.6741"
+     inkscape:cy="980.29345"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      showgrid="false"
      inkscape:window-width="1920"
-     inkscape:window-height="1016"
+     inkscape:window-height="983"
      inkscape:window-x="0"
-     inkscape:window-y="867"
+     inkscape:window-y="438"
      inkscape:window-maximized="1"
      inkscape:showpageshadow="false" />
   <metadata
@@ -270,5 +270,47 @@
          y="236.31812"
          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.69999981px;line-height:1.29999995;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#501616;stroke-width:0.26458332"
          id="tspan4828">FUEGOS ACTIVOS</tspan></text>
+    <rect
+       style="opacity:1;vector-effect:none;fill:#dcd4ce;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect13358"
+       width="340.73239"
+       height="164.28169"
+       x="-412.22534"
+       y="-153.25351" />
+    <rect
+       y="-153.25351"
+       x="-412.22534"
+       height="164.28169"
+       width="340.73239"
+       id="rect13360"
+       style="opacity:0.25;vector-effect:none;fill:#0d2e0e;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       style="opacity:0.5;vector-effect:none;fill:#0d2e0e;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect13362"
+       width="340.73239"
+       height="164.28169"
+       x="-412.22534"
+       y="10.788144" />
+    <rect
+       y="-200.16852"
+       x="-412.22534"
+       height="47.154934"
+       width="340.73239"
+       id="rect13364"
+       style="opacity:1;vector-effect:none;fill:#0d2e0e;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       style="opacity:1;vector-effect:none;fill:#dcd4ce;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect13366"
+       width="340.73239"
+       height="164.28169"
+       x="-412.22534"
+       y="174.8299" />
+    <rect
+       y="338.87128"
+       x="-412.22534"
+       height="164.28169"
+       width="340.73239"
+       id="rect13398"
+       style="opacity:0.3;vector-effect:none;fill:#0d2e0e;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
   </g>
 </svg>

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;

public/locales/en/common.json

@@ -70,7 +70,7 @@
   "noActiveFireInMapCount": "There are no active fires in this area of the map. There is a total of <1><0>{{countTotal}}</0></1> active fires detected worldwide.",
   "activeFireInMapCount": "On the map marked in red <1><0>{{count,number}}</0></1> active fires. There is a total of <3><0>{{countTotal,number}} </0></3> active fires detected worldwide by NASA.",
   "activeNeigFireInMapCount": "In Orange, the fires recently reported by our users.",
-  "Centrar el mapa en tu ubicación": "Center the map on your location",
+  "Centrar en tu ubicación": "Center on your location",
   "Resaltar en verde el área vigilada por nuestros usuarios/as": "The area monitored by our users is highlighted in green",
   "Resaltar los fuegos con un marcador": "Highlight the fires with a marker",
   "mapPrivacy": "<0>In order to preserve the privacy of our users, the reflected data are randomly altered and are only indicative.</0>",
@@ -158,5 +158,7 @@
   "Más información sobre este fuego": "More information about this fire",
   "termsAccept": "I accept the <1>conditions of service</1> of this site",
   "Bienvenid@!": "Welcome!",
-  "Verifica tu dirección de correo": "Verify Your Email Address"
+  "Verifica tu dirección de correo": "Verify Your Email Address",
+  "Zonas vigiladas": "Monitored areas",
+  "En verde, las zonas vigiladas por nuestros usuari@s actualmente. ¡Participa!": "In green, the areas monitored by our users currently. Participate!"
 }

public/locales/es/common.json

@@ -116,8 +116,8 @@
   "En rojo, <1><0>{{count,number}}</0></1> fuegos activos en el mapa. Hay un total de <3><0>{{countTotal,number}}</0></3> fuegos activos detectados en todo el mundo por la NASA.",
   "activeNeigFireInMapCount":
   "En naranja, los fuegos notificados por nuestros usuarios/as recientemente.",
-  "Centrar el mapa en tu ubicación":
-  "Centrar el mapa en tu ubicación",
+  "Centrar en tu ubicación":
+  "Centrar en tu ubicación",
   "Resaltar en verde el área vigilada por nuestros usuarios/as":
   "Resaltar en verde el área vigilada por nuestros usuarios/as",
   "Resaltar los fuegos con un marcador":
@@ -229,5 +229,7 @@
   "Bienvenid@!": "Bienvenid@!",
   "Has iniciado sesión con {{service}} usando la dirección de correo {{email}}.": "Has iniciado sesión con {{service}} usando la dirección de correo {{email}}.",
   "Verifica tu dirección de correo":
-  "Verifica tu dirección de correo"
+  "Verifica tu dirección de correo",
+  "Zonas vigiladas": "Zonas vigiladas",
+  "En verde, las zonas vigiladas por nuestros usuari@s actualmente. ¡Participa!": "En verde, las zonas vigiladas por nuestros usuari@s actualmente. ¡Participa!"
 }