Improved firesmap

2017-12-15 17:43:45 +01:00 · 2017-12-15 17:43:45 +01:00 · 56a7468ae3
commit 56a7468ae3
parent 4c5aef6e4f
7 changed files with 214 additions and 132 deletions
--- a/imports/ui/components/Maps/FireList.js
+++ b/imports/ui/components/Maps/FireList.js
@ -11,15 +11,17 @@ export default function FireList(props) {
  const {
    fires, scale, useMarkers, nasa
  } = props;
-  const items = fires.map(({ _id, ...otherProps }) => {
-    if (useMarkers && scale) {
-      return (<FireIconMark key={_id} nasa={nasa} {...otherProps} />);
-    }
-    if (!nasa && !scale) {
-      return (<FirePixel key={_id} nasa={nasa} {...otherProps} />);
-    }
-    return (<FireCircleMark key={_id} nasa={nasa} {...otherProps} />);
-  });
+  const useMarks = useMarkers && scale;
+  const usePixel = !nasa || !scale;
+  /* console.log(`Using marks: ${useMarks}, using pixels: ${usePixel}`); */
+  let items;
+  if (useMarks) {
+    items = fires.map(({ _id, ...otherProps }) => (<FireIconMark key={_id} nasa={nasa} {...otherProps} />));
+  } else if (usePixel) {
+    items = fires.map(({ _id, ...otherProps }) => (<FirePixel key={_id} nasa={nasa} {...otherProps} />));
+  } else {
+    items = fires.map(({ _id, ...otherProps }) => (<FireCircleMark key={_id} nasa={nasa} {...otherProps} />));
+  }
  return (<div style={{ display: 'none' }}>{items}</div>);
 }

--- a/imports/ui/components/Maps/FirePixel.js
+++ b/imports/ui/components/Maps/FirePixel.js
@ -1,10 +1,19 @@
+/* eslint-disable react/jsx-indent-props */
+
 import React from 'react';
 import { CircleMarker } from 'react-leaflet';
 import PropTypes from 'prop-types';

 /* Less acurate (1 pixel per fire) but faster */
 const FirePixel = ({ lat, lon, nasa }) => (
-  <CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={2} />
+  <CircleMarker
+      center={[lat, lon]}
+      color={nasa ? 'red' : '#D35400'}
+      stroke={false}
+      fillOpacity="1"
+      fill
+      radius={nasa ? 1 : 2}
+  />
 );


--- a/imports/ui/components/Navigation/Navigation.js
+++ b/imports/ui/components/Navigation/Navigation.js
@ -13,38 +13,38 @@ import './Navigation.scss';
 const Navigation = props => (
  <nav className="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    <div className="container">
-    {/* <Navbar bsClass="navbar navbar-dark bg-dark"> */}
-    {/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
-    <Navbar.Header>
-      <Navbar.Brand>
-        <Link to="/">{props.t('AppNameFull')}</Link>
-      </Navbar.Brand>
-      {/* <Navbar.Toggle/> */}
-      <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span className="navbar-toggler-icon"></span>
+      {/* <Navbar bsClass="navbar navbar-dark bg-dark"> */}
+      {/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
+      <Navbar.Header>
+        <Navbar.Brand>
+          <Link to="/">{props.t('AppNameFull')}</Link>
+        </Navbar.Brand>
+        {/* <Navbar.Toggle/> */}
+        <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon" />
+        </button>
+      </Navbar.Header>
+      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+        <span className="navbar-toggler-icon" />
      </button>
-    </Navbar.Header>
-    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-      <span className="navbar-toggler-icon"></span>
-    </button>
-    {/* <Navbar.Collapse> */}
-    <div className="collapse navbar-collapse" id="navbarNavDropdown">
-      <ul className="navbar-nav ml-auto ">
-        {/* <LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
-        <NavItem eventKey={1.1} href="/sandbox">Sandbox</NavItem>
-        </LinkContainer> */}
-        <LinkContainer className="nav-item" anchorClassName="nav-link" to="/subscriptions">
-          <NavItem eventKey={1.2} href="/subscriptions">
-            {props.authenticated ? <Trans>Mis alertas</Trans>:<Trans>Participar</Trans>}
-          </NavItem>
-        </LinkContainer>
-        <LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
-          <NavItem eventKey={2} href="/fires">{props.t('activeFires')}</NavItem>
-        </LinkContainer>
-      </ul>
-      {!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
-      {/* </Navbar.Collapse> */}
-    </div>
+      {/* <Navbar.Collapse> */}
+      <div className="collapse navbar-collapse" id="navbarNavDropdown">
+        <ul className="navbar-nav ml-auto ">
+          {/* <LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
+          <NavItem eventKey={1.1} href="/sandbox">Sandbox</NavItem>
+          </LinkContainer> */}
+          <LinkContainer className="nav-item" anchorClassName="nav-link" to="/subscriptions">
+            <NavItem eventKey={1.2} href="/subscriptions">
+              {props.authenticated ? <Trans>Mis alertas</Trans> : <Trans>Participar</Trans>}
+            </NavItem>
+          </LinkContainer>
+          <LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
+            <NavItem eventKey={2} href="/fires">{props.t('activeFires')}</NavItem>
+          </LinkContainer>
+        </ul>
+        {!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
+        {/* </Navbar.Collapse> */}
+      </div>
    </div>
  </nav>
 );
--- a/imports/ui/pages/FiresMap/FiresMap.js
+++ b/imports/ui/pages/FiresMap/FiresMap.js
@ -31,13 +31,11 @@ import './FiresMap.scss';
 const { BaseLayer } = LayersControl;

 const MAXZOOM = 6;
+const MAXZOOMREACTIVE = 6;
 const zoom = new ReactiveVar(8);
-const lat = new ReactiveVar();
-const lng = new ReactiveVar();
-const height = new ReactiveVar(400);
-const width = new ReactiveVar(400);
+const center = new ReactiveVar([null, null]);
+const mapSize = new ReactiveVar([400, 400]);

-// TODO share only the used part of fires data
 // Remove map in subscription
 class FiresMap extends React.Component {
  constructor(props) {
@ -62,11 +60,26 @@ class FiresMap extends React.Component {
    Gkeys.load((err, key) => {
      self.setState({ gkey: key });
    });
-    height.set(this.divElement.clientHeight);
-    width.set(this.divElement.clientWidth);
+    mapSize.set([this.divElement.clientHeight, this.divElement.clientWidth]);
    this.addScale();
  }

+  /* componentWillReceiveProps(nextProps) {
+   *   if (nextProps.loading) {
+   *     // console.log('Loading new fires');
+   *   }
+   *   // this.setState({ loading: nextProps.loading });
+   * }
+   */
+
+  /* shouldComponentUpdate(nextProps, nextState) {
+   *   if (nextProps.loading) {
+   *     return true; // false;
+   *   }
+   *   return true;
+   * }
+   */
+
  onViewportChanged(viewport) {
    this.debounceView(viewport);
  }
@ -81,7 +94,6 @@ class FiresMap extends React.Component {
  }

  setShowSubsUnion(show) {
-    this.setState({ showSubsUnion: show });
    this.showSubsUnion(show);
  }

@ -115,35 +127,38 @@ class FiresMap extends React.Component {

  handleViewportChange(viewport) {
    console.log(`Viewport changed: ${JSON.stringify(viewport)}`);
+    if (viewport.center === this.state.viewport.center &&
+        viewport.zoom === this.state.viewport.zoom) {
+      // Do nothing, in same point
+      return;
+    }
    zoom.set(viewport.zoom);
-    lat.set(viewport.center[0]);
-    lng.set(viewport.center[1]);
+    center.set(viewport.center);
    this.setState({ viewport });
-    /* this.state.viewport = viewport;
-     * this.state.modified = true; */
    if (this.props.subsready && this.fireMap) {
      this.showSubsUnion(this.state.showSubsUnion);
    }
  }

  centerOnUserLocation(viewport) {
-    this.handleViewportChange(viewport);
+    this.setState({ viewport });
+    // this.handleViewportChange(viewport);
  }

  useMarkers(use) {
    this.setState({ useMarkers: use });
-    // this.state.useMarkers = use;
-    // this.forceUpdate();
  }

  addScale() {
-    // https://www.npmjs.com/package/leaflet-graphicscale
-    const map = this.getMap();
-    const options = {
-      fill: 'fill',
-      showSubunits: true
-    };
-    L.control.graphicScale([options]).addTo(map);
+    if (this.fireMap) {
+      // https://www.npmjs.com/package/leaflet-graphicscale
+      const map = this.getMap();
+      const options = {
+        fill: 'fill',
+        showSubunits: true
+      };
+      L.control.graphicScale([options]).addTo(map);
+    }
  }

  render() {
@ -151,7 +166,7 @@ class FiresMap extends React.Component {
      // Show union of users
      this.showSubsUnion(this.state.showSubsUnion);
    }
-    console.log('Rendering map');
+    console.log(`Rendering ${this.props.loading ? 'loading' : 'LOADED'} map ${this.props.activefires.length} of ${this.props.activefirestotal} total. Subs users ready ${this.props.subsready}, reactive ${this.state.viewport.zoom >= MAXZOOMREACTIVE}`);
    const { t } = this.props;
    const osmlayer = (
      <BaseLayer checked name={t('Mapa gris de OpenStreetMap')}>
@ -175,10 +190,10 @@ class FiresMap extends React.Component {
         <Row>
           <Col xs={12} sm={6} md={6} lg={6} >
             <p>
-             { this.props.activefires.length === 0 ?
-               <Trans parent="span" i18nKey="noActiveFireInMapCount">No hay fuegos activos en esta zona del mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo.</Trans> :
-               <Trans parent="span" i18nKey="activeFireInMapCount">En rojo, <strong>{{ count: this.props.activefires.length }}</strong> fuegos activos en el mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo por la NASA.</Trans>
-             }
+               { this.props.activefires.length === 0 ?
+                 <Trans parent="span" i18nKey="noActiveFireInMapCount">No hay fuegos activos en esta zona del mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo.</Trans> :
+                 <Trans parent="span" i18nKey="activeFireInMapCount">En rojo, <strong>{{ count: this.props.activefires.length }}</strong> fuegos activos en el mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo por la NASA.</Trans>
+               }
             </p>
             <p><Trans parent="span" i18nKey="activeNeigFireInMapCount">En naranja, los fuegos notificados por nuestros usuarios/as recientemente.</Trans></p>
           </Col>
@ -188,17 +203,25 @@ class FiresMap extends React.Component {
             </Checkbox>
             {(this.state.viewport.zoom >= MAXZOOM) &&
              <Checkbox inline={false} onClick={e => this.useMarkers(e.target.checked)}>
-               <Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
+                <Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
              </Checkbox>}
              <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} />
+              <p>
+                <em>{ this.state.viewport.zoom >= MAXZOOMREACTIVE ?
+                     <Trans>Los fuegos activos se actualizan en tiempo real.</Trans> :
+                     <Trans>Haga zoom en una zona de su interés si quiere que los fuegos se actualicen en tiempo real.</Trans>
+                    }
+                </em>
+              </p>
           </Col>
         </Row>
         <Row>
           {/* https://github.com/CliffCloud/Leaflet.Sleep */}
+
           <Map
               ref={(map) => { this.fireMap = map; }}
               animate
-               // minZoom={4}
+               minZoom={5}
               preferCanvas
               onClick={this.onClickReset}
               viewport={this.state.viewport}
@ -212,32 +235,34 @@ class FiresMap extends React.Component {
               sleepOpacity={0.6}
           >
             {/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
+             {!this.props.loading &&
             <FireList
                 fires={this.props.activefires}
                 scale={this.state.viewport.zoom >= MAXZOOM}
                 useMarkers={this.state.useMarkers}
                 nasa
-             />
+             />}
+             {!this.props.loading &&
             <FireList
                 fires={this.props.firealerts}
                 scale={false}
                 useMarkers={this.state.useMarkers}
                 nasa={false}
-             />
+             />}
             <LayersControl position="topright">
               {osmlayer}
               { this.state.gkey &&
-                 <BaseLayer name={t('Mapa de carreteras de Google')}>
-                   <GoogleLayer googlekey={this.state.gkey} maptype="ROADMAP" />
-                 </BaseLayer>}
+               <BaseLayer name={t('Mapa de carreteras de Google')}>
+                 <GoogleLayer googlekey={this.state.gkey} maptype="ROADMAP" />
+               </BaseLayer>}
               { this.state.gkey &&
-                 <BaseLayer name={t('Mapa de terreno de Google')}>
-                   <GoogleLayer googlekey={this.state.gkey} maptype="TERRAIN" />
-                 </BaseLayer>}
+               <BaseLayer name={t('Mapa de terreno de Google')}>
+                 <GoogleLayer googlekey={this.state.gkey} maptype="TERRAIN" />
+               </BaseLayer>}
               { this.state.gkey &&
-                 <BaseLayer name={t('Mapa de satélite de Google')}>
-                   <GoogleLayer googlekey={this.state.gkey} maptype="SATELLITE" />
-                 </BaseLayer>}
+               <BaseLayer name={t('Mapa de satélite de Google')}>
+                 <GoogleLayer googlekey={this.state.gkey} maptype="SATELLITE" />
+               </BaseLayer>}
             </LayersControl>
           </Map>
         </Row>
@ -261,13 +286,21 @@ FiresMap.propTypes = {

 export default translate([], { wait: true })(withTracker(() => {
  let subscription;
+  let init = true;
  Meteor.autorun(() => {
-    if (geolocation.get()) {
-      lat.set(geolocation.get()[0]);
-      lng.set(geolocation.get()[1]);
+    if (geolocation.get() && init) {
+      center.set(geolocation.get());
+      init = false;
    }
-    if (zoom.get() || lat.get() || lng.get()) {
-      subscription = Meteor.subscribe('activefiresmyloc', zoom.get(), lat.get(), lng.get(), height.get(), width.get());
+    if (mapSize.get()) {
+      subscription = Meteor.subscribe(
+        'activefiresmyloc',
+        zoom.get(),
+        center.get()[0],
+        center.get()[1],
+        mapSize.get()[0],
+        mapSize.get()[1]
+      );
    }
  });

@ -276,18 +309,21 @@ export default translate([], { wait: true })(withTracker(() => {
  Meteor.subscribe('fireAlerts');
  const userSubs = Meteor.subscribe('userSubsToFires');
  // const subscription = Meteor.subscribe('activefiresmyloc', zoom.get());
-  console.log(`Active fires ${ActiveFiresCollection.find().fetch().length} of ${Counter.get('countActiveFires')}`);
+  // Warning with the performance of this log:
+  // console.log(`Active fires ${ActiveFiresCollection.find().count()} of ${Counter.get('countActiveFires')}`);
  // console.log(`Active neighborhood fires ${FireAlertsCollection.find().fetch().length} and users subscribed ${UserSubsToFiresCollection.find().fetch().length}`);
  // console.log(UserSubsToFiresCollection.find().fetch());
  return {
    loading: !subscription.ready(),
+    userSubs: UserSubsToFiresCollection.find().fetch(),
    subsready: userSubs.ready(),
-    activefires: ActiveFiresCollection.find().fetch(),
+    // Not reactive query depending on zoom level
+    activefires: ActiveFiresCollection.find({}, { reactive: zoom.get() >= MAXZOOMREACTIVE }).fetch(),
+    // activefires: ActiveFiresCollection.find({}).fetch(),
    activefirestotal: Counter.get('countActiveFires'),
    firealerts: FireAlertsCollection.find().fetch().map(doc => (
      { _id: doc._id, lat: doc.location.lat, lon: doc.location.lon }
    )),
-    userSubs: UserSubsToFiresCollection.find().fetch(),
    viewport: {
      center: geolocation.get(),
      zoom: zoom.get()
--- a/imports/ui/pages/Sandbox/Sandbox.js
+++ b/imports/ui/pages/Sandbox/Sandbox.js
@ -1,22 +1,18 @@
+/* eslint-disable import/no-absolute-path */
 import React from 'react';
 // import PropTypes from 'prop-types';
 import { translate } from 'react-i18next';

 class Sandbox extends React.Component {
-  constructor(props) {
-    super(props);
-    /* this.state = {
-     *   init: false
-     * }; */
-  }
-
  componentDidMount() {
    // this.setState({init: true});
  }

  render() {
    return (
-      <div></div>
+      <div>
+        <div />
+      </div>
    );
  }
 }
@ -25,4 +21,4 @@ Sandbox.propTypes = {
  // history: PropTypes.object.isRequired
 };

-export default translate([], { wait: true }) (Sandbox);
+export default translate([], { wait: true })(Sandbox);