Map of active fires

2017-12-01 13:33:24 +01:00 · 2017-12-01 13:33:24 +01:00 · 0b4f895506
commit 0b4f895506
parent f87cf02c2d
7 changed files with 430 additions and 61 deletions
--- a/imports/ui/pages/Index/FiresMap.js
+++ b/imports/ui/pages/Index/FiresMap.js
@ -0,0 +1,208 @@
+import React, {Component} from 'react';
+import { Row } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { Meteor } from 'meteor/meteor';
+import { 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';
+
+const MyPopupMarker = ({ children, position }) => (
+  <Marker position={position}>
+    <Popup>
+      <span>{children}</span>
+    </Popup>
+  </Marker>
+)
+
+const MyCircle = ({ radius, position }) => (
+  <Circle center={position} color="red" stroke={false} fillOpacity="1" fill={true} radius={radius} />
+)
+
+const FireMark = ({ lat, lon, scan }) => (
+  <Circle center={[lat, lon]} color="red" stroke={false} fillOpacity="1" fill={true} radius={scan*1000} />
+)
+
+/* Less acurate (1 pixel per fire) but faster */
+const Fire = ({ lat, lon, scan }) => (
+  <CircleMarker center={[lat, lon]} color="red" stroke={false} fillOpacity="1" fill={true} radius={1} />
+)
+
+MyPopupMarker.propTypes = {
+  children: MapPropTypes.children,
+  position: MapPropTypes.latlng,
+}
+
+MyCircle.propTypes = {
+  radius: PropTypes.number.isRequired,
+  position: MapPropTypes.latlng,
+}
+
+Fire.propTypes = {
+  scan: PropTypes.number.isRequired,
+  lat: PropTypes.number.isRequired,
+  lon:  PropTypes.number.isRequired,
+}
+
+FireMark.propTypes = {
+  scan: PropTypes.number.isRequired,
+  lat: PropTypes.number.isRequired,
+  lon:  PropTypes.number.isRequired,
+}
+
+const MyMarkersList = ({ markers }) => {
+  const items = markers.map(({ key, ...props }) => (
+    <MyPopupMarker key={key} {...props} />
+  ))
+  return <div style={{ display: 'none' }}>{items}</div>
+}
+
+const MyCirclesList = ({ circles }) => {
+  const items = circles.map(({ key, ...props }) => (
+    <MyCircle key={key} {...props} />
+  ))
+  return <div style={{ display: 'none' }}>{items}</div>
+}
+
+const FireList = ({ activefires, scale }) => {
+  // console.log("Scaling? :" +  scale);
+  const items = activefires.map(({ _id, ...props }) => (
+    scale? <Fire key={_id} {...props} />:
+    <FireMark key={_id} {...props} />
+  ))
+  return <div style={{ display: 'none' }}>{items}</div>
+}
+
+MyMarkersList.propTypes = {
+  markers: PropTypes.array.isRequired,
+}
+
+MyCirclesList.propTypes = {
+  circles: PropTypes.array.isRequired,
+}
+
+const DEF_LAT = 35.159028;
+const DEF_LNG = -46.738057;
+const DEFAULT_VIEWPORT = {
+  center: [DEF_LAT, DEF_LNG], // a point in the sea
+  zoom: 8,
+}
+
+class FiresMap extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      viewport: DEFAULT_VIEWPORT,
+      modified: false
+    }
+  }
+
+  onViewportChanged = viewport => {
+    // console.log(this.state.viewport);
+    zoom.set(viewport.zoom);
+    lat.set(viewport.center[0]);
+    lng.set(viewport.center[1]);
+    this.state = { viewport: viewport, modified: true };
+  }
+
+  onClickReset = () => {
+    // console.log("onclick");
+    // this.setState({ viewport: DEFAULT_VIEWPORT })
+  }
+
+  render() {
+    // const position = [this.default.lat, this.default.lng];
+    // const position = this.props.geoip || [this.default.lat, this.default.lng];
+    this.state = {
+      viewport: !this.state.modified && this.props.viewport && Array.isArray(this.props.viewport.center)? this.props.viewport: this.state.viewport,
+      modified: this.state.modified
+    }
+
+    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} />*/}
+
+      <FireList activefires={this.props.activefires} scale={this.state.viewport.zoom > 8} />
+
+      {/* <MyMarkersList markers={markers} /> */}
+      </Map>
+      </div>
+      /* : <Loading />*/
+    );
+  }
+}
+
+const geoip = new ReactiveVar('');
+const zoom = new ReactiveVar(8);
+const lat = new ReactiveVar(DEF_LAT);
+const lng = new ReactiveVar(DEF_LNG);
+
+FiresMap.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  activefires: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+export default withTracker(() => {
+  var subscription;
+  Meteor.autorun(function() {
+    // Subscribe for the current templateId (only if one is selected). Note this
+    // will automatically clean up any previously subscribed data and it will
+    // also stop all subscriptions when this template is destroyed.
+    if (zoom.get())
+      // TODO select position
+      subscription = Meteor.subscribe('activefiresmyloc', zoom.get(), lat.get(), lng.get());
+  });
+
+  // const subscription = Meteor.subscribe('activefiresmyloc', zoom.get());
+  Meteor.call("geo", function (error, response) {
+    if (error) {
+      console.warn(error);
+    } else {
+      geoip.set([response.location.latitude, response.location.longitude] );
+    }
+  });
+
+  return {
+    loading: !subscription.ready(),
+    activefires: ActiveFiresCollection.find().fetch(),
+    geoip: geoip.get(),
+    zoom: zoom.get(),
+    viewport: {
+      center: geoip.get(), // a point in the sea
+      zoom: zoom.get(),
+    }
+  };
+})(FiresMap);
--- a/imports/ui/pages/Index/Index-custom.scss
+++ b/imports/ui/pages/Index/Index-custom.scss
@ -140,3 +140,11 @@
  color: white;
  text-transform: uppercase;
 }
+
+
+/* https://github.com/PaulLeCam/react-leaflet/issues/108 */
+.leaflet-container {
+  height: 500px;
+  width: 85%;
+  margin: 0 auto;
+}
--- a/imports/ui/pages/Index/Index.js
+++ b/imports/ui/pages/Index/Index.js
@ -3,17 +3,22 @@ import { Button } from 'react-bootstrap';
 import { translate } from 'react-i18next';
 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';

+
 class Index extends Component {
  // Debounce by David Walsch
  // https://davidwalsh.name/javascript-debounce-function

+  constructor(props) {
+    super(props);
+  }
+
  debounce = (func, wait, immediate) => {
    var timeout;
    return function() {
@ -51,72 +56,77 @@ class Index extends Component {
  render() {
    return (
      <div className="IndexDisabled full-width">
-      {/* https://v4-alpha.getbootstrap.com/components/carousel/  */}
-      <header>
-        <ReactResizeDetector handleWidth handleHeight onResize={this._onResize} />
-        <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
-          <ol className="carousel-indicators">
-            <li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
-            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
-            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
-            <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
-          </ol>
-          <div className="carousel-inner" role="listbox">
+        {/* https://v4-alpha.getbootstrap.com/components/carousel/  */}
+        <header>
+          <ReactResizeDetector handleWidth handleHeight onResize={this._onResize} />
+          <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
+            <ol className="carousel-indicators">
+              <li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
+              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+              <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
+            </ol>
+            <div className="carousel-inner" role="listbox">

-            <div className="carousel-item carousel-item-1 active">
-              <div className="slide-1-icon"></div>
-              <div className="carousel-caption">
-                <h3><i className="fa fa-map-pointer" aria-hidden="true"></i>Elige un lugar</h3>
-                <p></p>
-              </div>
-            </div>
-
-            <div className="carousel-item carousel-item-2">
-              <div className="slide-2-icon"></div>
-              <div className="carousel-caption">
-                <h3><i className="fa fa-dot-circle-o" aria-hidden="true"></i>Elige un radio de vigilancia</h3>
-                <p></p>
-              </div>
-            </div>
-
-            <div className="carousel-item carousel-item-3">
-              <div className="slide-3-icon"></div>
-              <div className="carousel-caption">
-                <h3><i className="fa fa-podcast" aria-hidden="true"></i>Recibe alertas de fuegos en esa zona</h3>
-                <p></p>
-              </div>
-            </div>
-
-            <div className="carousel-item carousel-item-4">
-              <div className="slide-4-icon"></div>
-              <div className="carousel-caption">
-                <h3><i className="fa fa-bell-o" aria-hidden="true"></i>Alerta cuando hay un fuego</h3>
-                <p></p>
+              <div className="carousel-item carousel-item-1 active">
+                <div className="slide-1-icon"></div>
+                <div className="carousel-caption">
+                  <h3><i className="fa fa-map-pointer" aria-hidden="true"></i>Elige un lugar</h3>
+                  <p></p>
+                </div>
+              </div>
+
+              <div className="carousel-item carousel-item-2">
+                <div className="slide-2-icon"></div>
+                <div className="carousel-caption">
+                  <h3><i className="fa fa-dot-circle-o" aria-hidden="true"></i>Elige un radio de vigilancia</h3>
+                  <p></p>
+                </div>
+              </div>
+
+              <div className="carousel-item carousel-item-3">
+                <div className="slide-3-icon"></div>
+                <div className="carousel-caption">
+                  <h3><i className="fa fa-podcast" aria-hidden="true"></i>Recibe alertas de fuegos en esa zona</h3>
+                  <p></p>
+                </div>
+              </div>
+
+              <div className="carousel-item carousel-item-4">
+                <div className="slide-4-icon"></div>
+                <div className="carousel-caption">
+                  <h3><i className="fa fa-bell-o" aria-hidden="true"></i>Alerta cuando hay un fuego</h3>
+                  <p></p>
+                </div>
              </div>
            </div>
+            <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+              <span className="carousel-control-prev-icon" aria-hidden="true"></span>
+              <span className="sr-only">Previous</span>
+            </a>
+            <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+              <span className="carousel-control-next-icon" aria-hidden="true"></span>
+              <span className="sr-only">Next</span>
+            </a>
          </div>
-          <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
-            <span className="carousel-control-prev-icon" aria-hidden="true"></span>
-            <span className="sr-only">Previous</span>
-          </a>
-          <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
-            <span className="carousel-control-next-icon" aria-hidden="true"></span>
-            <span className="sr-only">Next</span>
-          </a>
-        </div>
-      </header>
+        </header>

-      <section className="py-5">
-        <div className="container">
-          <div className="scale__container--js">
-            <h1 id="tcefh1" className="scale--js">{this.props.t('AppName')}</h1>
+        <section className="py-5">
+          <div className="container">
+            <div className="scale__container--js">
+              <h1 id="tcefh1" className="scale--js">{this.props.t('AppName')}</h1>
+            </div>
+            <p>Siempre alerta a los fuegos en nuestro vecindario</p>
+            <Link className="participe-btn btn btn-lg btn-warning" role="button" to="/signup">{this.props.t('Participa')}</Link>
          </div>
-          <p>Siempre alerta a los fuegos en nuestro vecindario</p>
-          <Link className="participe-btn btn btn-lg btn-warning" role="button" to="/signup">{this.props.t('Participa')}</Link>
-        </div>
-      </section>
-    </div>
-  );
+        </section>
+
+        <section className="py-5">
+          <a id="fires" name="fires"></a>
+          <FiresMap />
+        </section>
+      </div>
+    );
  };
 }