Improved FiresMap (makers checkbox, better calcs, etc)

2017-12-03 16:54:24 +01:00 · 2017-12-03 16:54:24 +01:00 · 2e36c9cd17
commit 2e36c9cd17
parent fe7a314d92
13 changed files with 496 additions and 104 deletions
--- a/imports/api/ActiveFires/server/publications.js
+++ b/imports/api/ActiveFires/server/publications.js
@ -32,15 +32,25 @@ var NullOr = function (type) {
  });
 };

+// http://wiki.openstreetmap.org/wiki/Zoom_levels
+// http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Resolution_and_Scale
 const zoomMetersPerPixel = [156412, 78206, 39103, 19551, 9776, 4888, 2444, 1222, 610.984, 305.492, 152.746, 76.373, 38.187, 19.093, 9.547, 4.773, 2.387, 1.193, 0.596, 0.298];

-var activefires = function(zoom, lat, lng) {
+// http://cwestblog.com/2012/11/12/javascript-degree-and-radian-conversion/
+Math.radians = function(degrees) {
+  return degrees * Math.PI / 180;
+};
+
+var activefires = function(zoom, lat, lng, height, width) {
  // latitude -90 and 90 and the longitude between -180 and 180
  check(lat, NumberBetween(-90, 90));
  check(lng, NumberBetween(-180, 180));

  // console.log("Zoom: " + zoom + " lat: " + lat + " lng: " + lng);
-  // console.log("Meters per pixel: " + zoomMetersPerPixel[zoom]);
+  var resolution = 156543.03 * Math.cos(Math.radians(lat)) / Math.pow(2,zoom);
+  // console.log(`Meters per pixel ${zoomMetersPerPixel[zoom]}, resolution ${resolution} meters x pixel`);
+  var distance = Math.trunc(Math.max(resolution*height, resolution*width));
+  // console.log(`so ${height}x${width} gives ${Math.trunc(resolution*height/1000)} x ${Math.trunc(resolution*width/1000)} km, so looking in ${distance}`);

  // console.log(geoData);
  return ActiveFires.find({
@ -51,16 +61,19 @@ var activefires = function(zoom, lat, lng) {
          coordinates: [ lng, lat]
        },
        $minDistance: 0,
-        $maxDistance: zoomMetersPerPixel[zoom] * 1000
+        $maxDistance: distance
      }
    }
  });
 }

-Meteor.publish('activefiresmyloc', function(zoom, lat, lng) {
+Meteor.publish('activefiresmyloc', function(zoom, lat, lng, height, width) {
  check(zoom, validZoom);
  check(lat, NullOr(Number));
  check(lng, NullOr(Number));
+  check(height, NullOr(Number));
+  check(width, NullOr(Number));
+  console.log(`Check active fires in ${lat},${lng} with zoom ${zoom} pixels in ${height}x${width} map`)
  if (lat === null || lng === null) {
    var clientIP = this.connection.clientAddress;
    if (clientIP === '127.0.0.1') {
@ -71,5 +84,5 @@ Meteor.publish('activefiresmyloc', function(zoom, lat, lng) {
    lat = location.latitude;
    lng = location.longitude;
  }
-  return activefires(zoom, lat, lng);
+  return activefires(zoom, lat, lng, height, width);
 });
--- a/imports/startup/server/geolocation.js
+++ b/imports/startup/server/geolocation.js
@ -1,23 +1,43 @@
 import { Meteor } from 'meteor/meteor';

-// https://atmospherejs.com/thebakery/ipgeocoder
-Meteor.startup(function(){
-  // TODO, download from time to time in :public/GeoLite2-City.mmdb.gz
-  // http://geolite.maxmind.com/download/geoip/database/GeoLite2-City.mmdb.gz
-  IPGeocoder.load(Meteor.absoluteUrl() + 'GeoLite2-City.mmdb.gz');
-  // load() stored it in: /tmp/GeoLite2-City.mmdb
-});
+import maxmind from 'maxmind';
+
+// https://stackoverflow.com/questions/13969655/how-do-you-check-whether-the-given-ip-is-internal-or-not
+function isPrivateIP(ip) {
+   var parts = ip.split('.');
+  return parts[0] === '10' ||
+         parts[0] === '127' ||
+      (parts[0] === '172' && (parseInt(parts[1], 10) >= 16 && parseInt(parts[1], 10) <= 31)) ||
+      (parts[0] === '192' && parts[1] === '168');
+}

 Meteor.methods({
  geo: function() {
+
    // https://stackoverflow.com/questions/14843232/how-to-get-the-user-ip-address-in-meteor-server/22657421#22657421
    var clientIP = this.connection.clientAddress;

-    if (clientIP === '127.0.0.1') {
+    if (isPrivateIP(clientIP)) {
      clientIP = '80.58.61.250' // Some Spain IP address
    }
-    var geoData = IPGeocoder.geocode(clientIP);
-    // console.log(geoData);
-    return geoData;
+    console.log(`Geolocating ${clientIP}`);
+
+    // https://developers.google.com/web/fundamentals/primers/promises
+    var promise = new Promise(function(resolve, reject) {
+      // do a thing, possibly async, then…
+      // TODO: cron download GeoLite-City
+      // http://dev.maxmind.com/geoip/geoip2/geolite2/
+      maxmind.open(process.env.PWD + '/private/GeoLite2-City.mmdb', (err, cityLookup) => {
+        if (err) {
+          reject(console.error(`Failed to geolite ${clientIP}, ${err}`));
+        }
+        else {
+          var city = cityLookup.get(clientIP);
+          // console.log(city);
+          resolve(city);
+        }
+      });
+    })
+    return promise.await();
  }
 });
--- a/imports/ui/layouts/App/App.js
+++ b/imports/ui/layouts/App/App.js
@ -29,7 +29,7 @@ import Terms from '../../pages/Terms/Terms';
 import Privacy from '../../pages/Privacy/Privacy';
 import License from '../../pages/License/License';
 import ReSendEmail from '../../components/ReSendEmail/ReSendEmail';
-import Reconnect from '../../components/Reconnect/Reconnect';
+/* import Reconnect from '../../components/Reconnect/Reconnect';*/
 // i18n
 import { I18nextProvider } from 'react-i18next';
 import i18n from '/imports/startup/client/i18n';
@ -79,7 +79,7 @@ const App = props => (
      </Grid>
      <Footer />

-      <Reconnect />
+      {/* <Reconnect /> */}
      <Blaze template="cookieConsent" />
      {/* <Blaze template="cookieConsentImply" /> */}
    </div> : ''}
--- a/imports/ui/pages/FiresMap/FiresMap.js
+++ b/imports/ui/pages/FiresMap/FiresMap.js
@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import { Row, Button } from 'react-bootstrap';
+import { Row, Button, Checkbox } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { Trans, Interpolate, translate } from 'react-i18next';
@ -9,20 +9,27 @@ import ActiveFiresCollection from '../../../api/ActiveFires/ActiveFires';
 import { withTracker } from 'meteor/react-meteor-data';
 import Loading from '../../components/Loading/Loading';
 import './FiresMap.scss';
+import Leaflet from 'leaflet'

+const fireIcon = new Leaflet.Icon({
+  iconUrl: "/fire-marker.png",
+  /* shadowUrl: require('../public/marker-shadow.png'), */
+  iconSize:     [16, 24], // size of the icon
+  /* shadowSize:   [50, 64], // size of the shadow */
+  iconAnchor:   [8, 26], // point of the icon which will correspond to marker's location
+  /* shadowAnchor: [4, 62],  // the same for the shadow
+   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor*/
+})

-const MyPopupMarker = ({ children, position }) => (
-  <Marker position={position}>
-    <Popup>
-      <span>{children}</span>
-    </Popup>
+// http://leafletjs.com/reference-1.2.0.html#icon
+const MyPopupMarker = ({ children, lat, lon}) => (
+  <Marker position={[lat, lon]} icon={fireIcon} >
+    {/* <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} />
 )
@ -34,12 +41,8 @@ const Fire = ({ lat, lon, scan }) => (

 MyPopupMarker.propTypes = {
  children: MapPropTypes.children,
-  position: MapPropTypes.latlng,
-}
-
-MyCircle.propTypes = {
-  radius: PropTypes.number.isRequired,
-  position: MapPropTypes.latlng,
+  lat: PropTypes.number.isRequired,
+  lon:  PropTypes.number.isRequired,
 }

 Fire.propTypes = {
@ -61,19 +64,11 @@ const MyMarkersList = ({ markers }) => {
  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 }) => {
+const FireList = ({ activefires, scale, useMarkers }) => {
  // console.log("Scaling? :" +  scale);
  const items = activefires.map(({ _id, ...props }) => (
-    scale? <Fire key={_id} {...props} />:
-    <FireMark key={_id} {...props} />
-  ))
+    (useMarkers? <MyPopupMarker key={_id} {...props} />:"") +
+    scale? <Fire key={_id} {...props} />:<FireMark key={_id} {...props} />))
  return <div style={{ display: 'none' }}>{items}</div>
 }

@ -81,10 +76,6 @@ 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 = {
@ -92,44 +83,53 @@ const DEFAULT_VIEWPORT = {
  zoom: 8,
 }

-
-
 class FiresMap extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      viewport: DEFAULT_VIEWPORT,
-      modified: false
+      modified: false,
+      userMarkers: true
    }
  }

-
  centerOnUserLocation = () => {
    // https://atmospherejs.com/mdg/geolocation
+    // only with SSL:
+    // https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
+
    // https://stackoverflow.com/questions/31608579/somethings-wrong-with-my-meteor-geolocation-functions
    var userGeoLocation = new ReactiveVar(null);
    var state = this.state;
+    var self = this;
    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 = {
+        var viewport = {
          center: [userGeoLocation.get().lat, userGeoLocation.get().lng],
          zoom: 11
        }
+        self.onViewportChanged(viewport);
+        // console.log(userGeoLocation.get());
+        computation.stop();
      }
    });
  }

+  componentDidMount() {
+    height.set(this.divElement.clientHeight);
+    width.set(this.divElement.clientWidth);
+  }
+
  onViewportChanged = viewport => {
-    // console.log(this.state.viewport);
+    // console.log(`Viewport changed: ${JSON.stringify(this.state.viewport)}`);
    zoom.set(viewport.zoom);
    lat.set(viewport.center[0]);
    lng.set(viewport.center[1]);
-    this.state = { viewport: viewport, modified: true };
+    this.state.viewport = viewport;
+    this.state.modified = true
  }

  onClickReset = () => {
@ -137,24 +137,34 @@ class FiresMap extends React.Component {
    // this.setState({ viewport: DEFAULT_VIEWPORT })
  }

+  useMarkers = (use) => {
+    this.state.useMarkers = use;
+    this.forceUpdate();
+  }
+
  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
-    }
+    this.state.viewport = !this.state.modified && this.props.viewport && Array.isArray(this.props.viewport.center)? this.props.viewport: this.state.viewport;

    return (
      /* Large number of markers:
         https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 */
-      <div>
+      <div
+         ref={ (divElement) => this.divElement = divElement}
+      >
        {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>
+           {this.props.activefires.length === 0?
+            <Trans parent="p" 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="p" 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.</Trans>
+           }
+           <Checkbox onClick={e => this.useMarkers(e.target.checked)}>
+             <Trans parent="span">Resaltar los fuegos con un marcador</Trans></Checkbox>
+         </Row>
         <Row>
           <Map
               animate={true}
@ -164,39 +174,20 @@ class FiresMap extends React.Component {
               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"
+             <FireList
+                 activefires={this.props.activefires}
+                 scale={this.state.viewport.zoom > 8}
+                 useMarkers={this.state.useMarkers}
             />
-             <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>
         </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>
+             <em><Trans parent="span">Fuente NASA y alertas vecinales de nuestr@s usuari@s.</Trans></em>
           </p>
         </Row>
         <Row>
@ -214,6 +205,8 @@ const geoip = new ReactiveVar('');
 const zoom = new ReactiveVar(8);
 const lat = new ReactiveVar(DEF_LAT);
 const lng = new ReactiveVar(DEF_LNG);
+const height = new ReactiveVar(400);
+const width = new ReactiveVar(400);

 FiresMap.propTypes = {
  loading: PropTypes.bool.isRequired,
@ -222,6 +215,14 @@ FiresMap.propTypes = {
  viewport: PropTypes.object.isRequired
 };

+Meteor.call("geo", function (error, response) {
+  if (error) {
+    console.warn(error);
+  } else {
+    geoip.set([response.location.latitude, response.location.longitude] );
+  }
+});
+
 export default translate([], { wait: true }) (withTracker(() => {
  var subscription;
  Meteor.autorun(function() {
@ -230,17 +231,10 @@ export default translate([], { wait: true }) (withTracker(() => {
    // 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());
+      subscription = Meteor.subscribe('activefiresmyloc', zoom.get(), lat.get(), lng.get(), height.get(), width.get());
  });
  Meteor.subscribe('activefirestotal');
  // 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(),
--- a/imports/ui/pages/FiresMap/FiresMap.scss
+++ b/imports/ui/pages/FiresMap/FiresMap.scss
@ -23,10 +23,10 @@
 }

@media only screen and (max-width: 400px) {
-  /* .leaflet-container {
+  .leaflet-container {
     height: 500px;
     width: 85vw;
-     } */
+  }
 }

 i.location {
--- a/imports/ui/pages/Index/Index.js
+++ b/imports/ui/pages/Index/Index.js
@ -5,6 +5,7 @@ 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/FiresMap';

 import './Index.scss';
 import './Index-custom.scss';
@ -119,6 +120,13 @@ 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">
+          <div className="container">
+            <FiresMap />
+          </div>
+        </section>
+
      </div>
    );
  };