comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixing lint issues

Browse source
This commit is contained in:
vjrj 2017-12-12 13:12:15 +01:00
parent 5bed310153
commit 77b56e4169
2 changed files with 196 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

36
imports/ui/components/CenterInMyPosition/CenterInMyPosition.js
View file

@ -1,27 +1,28 @@
/* global Geolocation */
import React from 'react'; import React from 'react';
import './CenterInMyPosition.scss'; import PropTypes from 'prop-types';
import { Tracker } from 'meteor/tracker';
import { ReactiveVar } from 'meteor/reactive-var';
import { Button } from 'react-bootstrap'; import { Button } from 'react-bootstrap';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import './CenterInMyPosition.scss';
class CenterInMyPosition extends React.Component { class CenterInMyPosition extends React.Component {
constructor(props) { onClick() {
super(props);
}
onClick = (event) => {
// this.props.onClick(event); // this.props.onClick(event);
// https://atmospherejs.com/mdg/geolocation // https://atmospherejs.com/mdg/geolocation
// only with SSL: // only with SSL:
// https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition // https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
console.log('Center');
// https://stackoverflow.com/questions/31608579/somethings-wrong-with-my-meteor-geolocation-functions // https://stackoverflow.com/questions/31608579/somethings-wrong-with-my-meteor-geolocation-functions
var userGeoLocation = new ReactiveVar(null); const userGeoLocation = new ReactiveVar(null);
var self = this; const self = this;
Tracker.autorun(function (computation) { Tracker.autorun((computation) => {
userGeoLocation.set(Geolocation.latLng()); userGeoLocation.set(Geolocation.latLng());
if (userGeoLocation.get()) { if (userGeoLocation.get()) {
//stop the tracker if we got something // stop the tracker if we got something
var viewport = { const viewport = {
center: [userGeoLocation.get().lat, userGeoLocation.get().lng], center: [userGeoLocation.get().lat, userGeoLocation.get().lng],
zoom: 11 zoom: 11
}; };
@ -35,11 +36,14 @@ class CenterInMyPosition extends React.Component {
render() { render() {
return ( return (
<Button bsStyle="default" onClick={(event) => this.onClick(event)}> <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 el mapa en tu ubicación')}
</Button> </Button>);
)
} }
} }
export default translate([], { wait: true }) (CenterInMyPosition); CenterInMyPosition.propTypes = {
t: PropTypes.func.isRequired
};
export default translate([], { wait: true })(CenterInMyPosition);

331
imports/ui/pages/FiresMap/FiresMap.js
View file

@ -1,97 +1,123 @@
import React, {Component} from 'react'; /* global L Counter */
import { Row, Col, Checkbox } from 'react-bootstrap'; /* eslint-disable import/no-absolute-path */
/* eslint-disable react/jsx-indent-props */
/* eslint-disable react/jsx-indent */
import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Row, Col, Checkbox } from 'react-bootstrap';
import { Meteor } from 'meteor/meteor'; import { Meteor } from 'meteor/meteor';
import { Trans, translate } from 'react-i18next'; import { ReactiveVar } from 'meteor/reactive-var';
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 FireAlertsCollection from '../../../api/FireAlerts/FireAlerts';
import UserSubsToFiresCollection from '../../../api/Subscriptions/Subscriptions';
import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
import { withTracker } from 'meteor/react-meteor-data'; import { withTracker } from 'meteor/react-meteor-data';
import 'leaflet-sleep/Leaflet.Sleep.js'; import { Trans, translate } from 'react-i18next';
import Loading from '../../components/Loading/Loading'; import { Circle, CircleMarker, Map, Marker, TileLayer, PropTypes as MapPropTypes } from 'react-leaflet';
import './FiresMap.scss';
import Leaflet from 'leaflet'; import Leaflet from 'leaflet';
import LGeo from 'leaflet-geodesy'; import LGeo from 'leaflet-geodesy';
import union from '@turf/union'; import union from '@turf/union';
import _ from 'lodash';
import 'leaflet/dist/leaflet.css';
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css'; import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js'; import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
import _ from 'lodash'; import 'leaflet-sleep/Leaflet.Sleep.js';
import geolocation from '/imports/startup/client/geolocation';
import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
import ActiveFiresCollection from '../../../api/ActiveFires/ActiveFires';
import FireAlertsCollection from '../../../api/FireAlerts/FireAlerts';
import UserSubsToFiresCollection from '../../../api/Subscriptions/Subscriptions';
import Loading from '../../components/Loading/Loading';
import './FiresMap.scss';
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
};
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);
// https://stackoverflow.com/questions/35394577/leaflet-js-union-merge-circles // https://stackoverflow.com/questions/35394577/leaflet-js-union-merge-circles
function unify(polyList) { function unify(polyList) {
for (var i = 0; i < polyList.length; ++i) { let unionTemp;
if (i == 0) { for (let i = 0; i < polyList.length; i += 1) {
var unionTemp = polyList[i].toGeoJSON(); if (i === 0) {
unionTemp = polyList[i].toGeoJSON();
} else { } else {
unionTemp =union(unionTemp, polyList[i].toGeoJSON()); unionTemp = union(unionTemp, polyList[i].toGeoJSON());
} }
} }
return L.geoJson(unionTemp); return L.geoJson(unionTemp);
} }
const fireIcon = new Leaflet.Icon({ const fireIcon = new Leaflet.Icon({
iconUrl: "/fire-marker.png", iconUrl: '/fire-marker.png',
/* shadowUrl: require('../public/marker-shadow.png'), */ /* shadowUrl: require('../public/marker-shadow.png'), */
iconSize: [16, 24], // size of the icon iconSize: [16, 24], // size of the icon
/* shadowSize: [50, 64], // size of the shadow */ /* shadowSize: [50, 64], // size of the shadow */
iconAnchor: [8, 26] // point of the icon which will correspond to marker's location iconAnchor: [8, 26] // point of the icon which will correspond to marker's location
/* shadowAnchor: [4, 62], // the same for the shadow /* shadowAnchor: [4, 62], // the same for the shadow
* popupAnchor: [-3, -76]// point from which the popup should open relative to the iconAnchor*/ * popupAnchor: [-3, -76]// point from which the popup should open relative to the iconAnchor */
}); });
const nFireIcon = new Leaflet.Icon({ const nFireIcon = new Leaflet.Icon({
iconUrl: "/n-fire-marker.png", iconUrl: '/n-fire-marker.png',
/* shadowUrl: require('../public/marker-shadow.png'), */ /* shadowUrl: require('../public/marker-shadow.png'), */
iconSize: [16, 24], // size of the icon iconSize: [16, 24], // size of the icon
/* shadowSize: [50, 64], // size of the shadow */ /* shadowSize: [50, 64], // size of the shadow */
iconAnchor: [8, 26] // point of the icon which will correspond to marker's location iconAnchor: [8, 26] // point of the icon which will correspond to marker's location
/* shadowAnchor: [4, 62], // the same for the shadow /* shadowAnchor: [4, 62], // the same for the shadow
* popupAnchor: [-3, -76]// point from which the popup should open relative to the iconAnchor*/ * popupAnchor: [-3, -76]// point from which the popup should open relative to the iconAnchor */
}); });
// http://leafletjs.com/reference-1.2.0.html#icon // http://leafletjs.com/reference-1.2.0.html#icon
const MyPopupMarker = ({ children, lat, lon, nasa}) => ( const MyPopupMarker = ({
<div><Marker position={[lat, lon]} icon={nasa? fireIcon: nFireIcon} > lat,
{/* <Popup> lon,
<span>{children}</span> nasa
</Popup> */} }) => (
</Marker> <div>
<CircleMarker center={[lat, lon]} color={nasa? "red": "#D35400"} stroke={false} fillOpacity="1" fill={true} radius={1} /> <Marker position={[lat, lon]} icon={nasa ? fireIcon : nFireIcon} >
{/* <Popup>
<span>{children}</span>
</Popup> */}
</Marker>
<CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={1} />
</div> </div>
); );
const FireMark = ({ lat, lon, scan, nasa }) => ( const FireMark = ({
<Circle center={[lat, lon]} color="red" stroke={false} fillOpacity="1" fill={true} radius={scan*1000} /> lat,
lon,
scan
}) => (
<Circle center={[lat, lon]} color="red" stroke={false} fillOpacity="1" fill radius={scan * 1000} />
); );
/* Less acurate (1 pixel per fire) but faster */ /* Less acurate (1 pixel per fire) but faster */
const FirePixel = ({ lat, lon, nasa }) => ( const FirePixel = ({ lat, lon, nasa }) => (
<CircleMarker center={[lat, lon]} color={nasa? "red": "#D35400"} <CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={2} />
stroke={false} fillOpacity="1" fill={true} radius={2} />
); );
MyPopupMarker.propTypes = { MyPopupMarker.propTypes = {
// https://github.com/PaulLeCam/react-leaflet/tree/master/src/propTypes // https://github.com/PaulLeCam/react-leaflet/tree/master/src/propTypes
children: MapPropTypes.children, children: MapPropTypes.children,
lat: PropTypes.number.isRequired, lat: PropTypes.number.isRequired,
lon: PropTypes.number.isRequired, lon: PropTypes.number.isRequired,
nasa: PropTypes.bool.isRequired nasa: PropTypes.bool.isRequired
}; };
FirePixel.propTypes = { FirePixel.propTypes = {
lat: PropTypes.number.isRequired, lat: PropTypes.number.isRequired,
lon: PropTypes.number.isRequired, lon: PropTypes.number.isRequired,
nasa: PropTypes.bool.isRequired nasa: PropTypes.bool.isRequired
}; };
FireMark.propTypes = { FireMark.propTypes = {
scan: PropTypes.number.isRequired, scan: PropTypes.number.isRequired,
lat: PropTypes.number.isRequired, lat: PropTypes.number.isRequired,
lon: PropTypes.number.isRequired, lon: PropTypes.number.isRequired
nasa: PropTypes.bool.isRequired
}; };
// Below this use only pixels // Below this use only pixels
@ -104,32 +130,25 @@ const MyMarkersList = ({ markers }) => {
return <div style={{ display: 'none' }}>{items}</div>; return <div style={{ display: 'none' }}>{items}</div>;
}; };
const FireList = ({ fires, scale, useMarkers, nasa }) => { const FireList = ({
/* if (nasa) { fires,
* console.log(`Scale: ${scale}`); scale,
* for (var i = 0; i < fires.length; i ++) { useMarkers,
* console.log(fires[i].scan); nasa }) => {
* } const items = fires.map(({ _id, ...props }) => (
* }*/ (useMarkers && scale) ?
const items = fires.map(({ _id, ...props }) => ( <MyPopupMarker key={_id} nasa={nasa} {...props} /> :
useMarkers && scale? <MyPopupMarker key={_id} nasa={nasa} {...props} />: (!nasa && !scale) ?
(!nasa && !scale)? <FirePixel key={_id} nasa={nasa} {...props} />:<FireMark key={_id} nasa={nasa} {...props} />)); <FirePixel key={_id} nasa={nasa} {...props} /> :
return <div style={{ display: 'none' }}>{items}</div>; <FireMark key={_id} nasa={nasa} {...props} />));
}; return <div style={{ display: 'none' }}>{items}</div>;
};
MyMarkersList.propTypes = { MyMarkersList.propTypes = {
markers: PropTypes.array.isRequired markers: 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 { class FiresMap extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
@ -139,57 +158,63 @@ class FiresMap extends React.Component {
showSubsUnion: true showSubsUnion: true
}; };
this.unionGroup = new L.LayerGroup(); this.unionGroup = new L.LayerGroup();
} const self = this;
// viewportchange
centerOnUserLocation = (viewport) => { // https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js
this.handleViewportChange(viewport); this.debounceView = _.debounce((viewport) => {
}; self.handleViewportChange(viewport);
}, 2000);
handleViewportChange = function (viewport) { this.onViewportChanged = this.onViewportChanged.bind(this);
console.log(`Viewport changed: ${JSON.stringify(viewport)}`);
zoom.set(viewport.zoom);
lat.set(viewport.center[0]);
lng.set(viewport.center[1]);
this.state.viewport = viewport;
this.state.modified = true;
if (this.props.subsready && this.refs.fireMap) {
this.showSubsUnion(this.state.showSubsUnion);
}
} }
componentDidMount() { componentDidMount() {
height.set(this.divElement.clientHeight); height.set(this.divElement.clientHeight);
width.set(this.divElement.clientWidth); width.set(this.divElement.clientWidth);
this.addScale(); this.addScale();
const self = this;
// viewportchange
this.debounceView = _.debounce(function(viewport) {this.handleViewportChange(viewport); }.bind(this), 2000);
} }
// https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js onViewportChanged(viewport) {
onViewportChanged = (viewport) => {
this.debounceView(viewport); this.debounceView(viewport);
}; }
onClickReset = () => { onClickReset() {
// console.log("onclick"); // console.log("onclick");
// this.setState({ viewport: DEFAULT_VIEWPORT }) // this.setState({ viewport: DEFAULT_VIEWPORT })
} }
useMarkers = (use) => { getMap() {
return this.fireMap.leafletElement;
}
handleViewportChange(viewport) {
console.log(`Viewport changed: ${JSON.stringify(viewport)}`);
zoom.set(viewport.zoom);
lat.set(viewport.center[0]);
lng.set(viewport.center[1]);
this.setState({ viewport, modified: true });
/* this.state.viewport = viewport;
* this.state.modified = true; */
if (this.props.subsready && this.fireMap) {
this.showSubsUnion(this.state.showSubsUnion);
}
}
centerOnUserLocation(viewport) {
this.handleViewportChange(viewport);
}
useMarkers(use) {
/* this.setState({ userMarkers: use });*/
this.state.useMarkers = use; this.state.useMarkers = use;
this.forceUpdate(); // this.forceUpdate();
} }
getMap = () => { showSubsUnion(show) {
return this.refs['fireMap'].leafletElement; // this.setState({ showSubsUnion: show });
}
showSubsUnion = (show) => {
this.state.showSubsUnion = show; this.state.showSubsUnion = show;
const map = this.getMap(); const map = this.getMap();
// http://leafletjs.com/reference-1.2.0.html#layergroup // http://leafletjs.com/reference-1.2.0.html#layergroup
var unionGroup = this.unionGroup; const self = this;
if (this.union) { if (this.union) {
map.removeLayer(this.union); map.removeLayer(this.union);
@ -197,88 +222,92 @@ class FiresMap extends React.Component {
if (show) { if (show) {
// http://leafletjs.com/reference-1.2.0.html#path // http://leafletjs.com/reference-1.2.0.html#path
var copts = { const copts = {
parts: 144 parts: 144
}; };
UserSubsToFiresCollection.find().forEach( function(subs){ UserSubsToFiresCollection.find().forEach((subs) => {
var circle = LGeo.circle([subs.lat, subs.lon], subs.distance * 1000, copts); const circle = LGeo.circle([subs.lat, subs.lon], subs.distance * 1000, copts);
circle.addTo(unionGroup); circle.addTo(self.unionGroup);
}); });
this.union = unify(unionGroup.getLayers()); this.union = unify(self.unionGroup.getLayers());
this.union.setStyle({ this.union.setStyle({
color: "#145A32", color: '#145A32',
fillColor: "green", fillColor: 'green',
fillOpacity: .1 fillOpacity: 0.1
}); });
this.union.addTo(map); this.union.addTo(map);
} }
} }
addScale = () => { addScale() {
// https://www.npmjs.com/package/leaflet-graphicscale // https://www.npmjs.com/package/leaflet-graphicscale
const map = this.getMap(); const map = this.getMap();
var options = { const options = {
fill: 'fill', fill: 'fill',
showSubunits: true showSubunits: true
}; };
var graphicScale = L.control.graphicScale([options]).addTo(map); L.control.graphicScale([options]).addTo(map);
} }
render() { render() {
this.state.viewport = !this.state.modified && this.props.viewport && Array.isArray(this.props.viewport.center)? this.props.viewport: this.state.viewport; this.state.viewport = !this.state.modified && this.props.viewport && Array.isArray(this.props.viewport.center)? this.props.viewport: this.state.viewport;
if (this.props.subsready && this.refs.fireMap) { if (this.props.subsready && this.fireMap) {
// Show union of users // Show union of users
this.showSubsUnion(this.state.showSubsUnion); this.showSubsUnion(this.state.showSubsUnion);
}; }
return ( return (
/* Large number of markers: /* Large number of markers:
https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 */ https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 */
<div <div
ref={ (divElement) => this.divElement = divElement} ref={(divElement) => { this.divElement = divElement; }}
> >
{this.props.loading ? {this.props.loading ?
<Row className="align-items-center justify-content-center"> <Row className="align-items-center justify-content-center">
<Loading /> <Loading />
</Row> </Row>
:""} : ''}
<h4 className="page-header"><Trans parent="span">Fuegos activos</Trans></h4> <h4 className="page-header"><Trans parent="span">Fuegos activos</Trans></h4>
<Row> <Row>
<Col xs={12} sm={6} md={6} lg={6} > <Col xs={12} sm={6} md={6} lg={6} >
<p> <p>
{this.props.activefires.length === 0? { 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> <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>
<p><Trans parent="span" i18nKey="activeNeigFireInMapCount">En naranja, los fuegos notificados por nuestros usuarios/as recientemente.</Trans></p> <p><Trans parent="span" i18nKey="activeNeigFireInMapCount">En naranja, los fuegos notificados por nuestros usuarios/as recientemente.</Trans></p>
</Col> </Col>
<Col xs={12} sm={6} md={6} lg={6} > <Col xs={12} sm={6} md={6} lg={6}>
<Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.showSubsUnion(e.target.checked)}> <Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.showSubsUnion(e.target.checked)}>
<Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*) <Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)
</Checkbox> </Checkbox>
{(this.state.viewport.zoom >= MAXZOOM) && <Checkbox inline={false} onClick={e => this.useMarkers(e.target.checked)}> {(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>} </Checkbox>}
<CenterInMyPosition onClick={(viewport) => this.centerOnUserLocation(viewport)} /> <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} />
</Col> </Col>
</Row> </Row>
<Row> <Row>
{/* https://github.com/CliffCloud/Leaflet.Sleep */} {/* https://github.com/CliffCloud/Leaflet.Sleep */}
<Map ref="fireMap" <Map
animate={true} ref={(map) => { this.fireMap = map; }}
minZoom={5} animate
preferCanvas={true} minZoom={5}
onClick={this.onClickReset} preferCanvas
viewport={this.state.viewport} onClick={this.onClickReset}
onViewportChanged={this.onViewportChanged} viewport={this.state.viewport}
sleep={window.location.pathname === '/'} onViewportChanged={this.onViewportChanged}
sleepTime={750} sleep={window.location.pathname === '/'}
wakeTime={750} sleepTime={750}
sleepNote={true} wakeTime={750}
hoverToWake={true} sleepNote
wakeMessage={this.props.t('Pulsa para activar')} hoverToWake
sleepOpacity={.6}> wakeMessage={this.props.t('Pulsa para activar')}
sleepOpacity={0.6}
>
{/* http://wiki.openstreetmap.org/wiki/Tile_servers */} {/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
<TileLayer <TileLayer
attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors" attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
@ -288,7 +317,7 @@ class FiresMap extends React.Component {
fires={this.props.activefires} fires={this.props.activefires}
scale={this.state.viewport.zoom >= MAXZOOM} scale={this.state.viewport.zoom >= MAXZOOM}
useMarkers={this.state.useMarkers} useMarkers={this.state.useMarkers}
nasa={true} nasa
/> />
<FireList <FireList
fires={this.props.firealerts} fires={this.props.firealerts}
@ -299,42 +328,33 @@ class FiresMap extends React.Component {
</Map> </Map>
</Row> </Row>
<Row> <Row>
<p><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> <p><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>
</Row> </Row>
</div> </div>
); );
}; }
}; }
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 = { FiresMap.propTypes = {
loading: PropTypes.bool.isRequired, loading: PropTypes.bool.isRequired,
subsready: PropTypes.bool.isRequired, subsready: PropTypes.bool.isRequired,
activefires: PropTypes.arrayOf(PropTypes.object).isRequired, activefires: PropTypes.arrayOf(PropTypes.object).isRequired,
firealerts: PropTypes.arrayOf(PropTypes.object).isRequired,
activefirestotal: PropTypes.number.isRequired, activefirestotal: PropTypes.number.isRequired,
viewport: PropTypes.object.isRequired viewport: PropTypes.object.isRequired,
t: PropTypes.func.isRequired
}; };
Meteor.call("geo", function (error, response) { export default translate([], { wait: true })(withTracker(() => {
if (error) { let subscription;
console.warn(error); Meteor.autorun(() => {
} else {
lat.set(response.location.latitude);
lng.set(response.location.longitude);
}
});
export default translate([], { wait: true }) (withTracker(() => {
var subscription;
Meteor.autorun(function() {
// Subscribe for the current templateId (only if one is selected). Note this // Subscribe for the current templateId (only if one is selected). Note this
// will automatically clean up any previously subscribed data and it will // will automatically clean up any previously subscribed data and it will
// also stop all subscriptions when this template is destroyed. // also stop all subscriptions when this template is destroyed.
if (geolocation.get()) {
lat.set(geolocation.get()[0]);
lng.set(geolocation.get()[1]);
}
if (zoom.get() || lat.get() || lng.get()) { if (zoom.get() || lat.get() || lng.get()) {
subscription = Meteor.subscribe('activefiresmyloc', zoom.get(), lat.get(), lng.get(), height.get(), width.get()); subscription = Meteor.subscribe('activefiresmyloc', zoom.get(), lat.get(), lng.get(), height.get(), width.get());
} }
@ -343,7 +363,7 @@ export default translate([], { wait: true }) (withTracker(() => {
Meteor.subscribe('activefirestotal'); Meteor.subscribe('activefirestotal');
// Right now to all neighborhood alerts // Right now to all neighborhood alerts
Meteor.subscribe('fireAlerts'); Meteor.subscribe('fireAlerts');
var userSubs = Meteor.subscribe('userSubsToFires'); const userSubs = Meteor.subscribe('userSubsToFires');
// const subscription = Meteor.subscribe('activefiresmyloc', zoom.get()); // const subscription = Meteor.subscribe('activefiresmyloc', zoom.get());
// console.log(`Active fires ${ActiveFiresCollection.find().fetch().length} of ${Counter.get('countActiveFires')}`); // console.log(`Active fires ${ActiveFiresCollection.find().fetch().length} of ${Counter.get('countActiveFires')}`);
// console.log(`Active neighborhood fires ${FireAlertsCollection.find().fetch().length} and users subscribed ${UserSubsToFiresCollection.find().fetch().length}`); // console.log(`Active neighborhood fires ${FireAlertsCollection.find().fetch().length} and users subscribed ${UserSubsToFiresCollection.find().fetch().length}`);
@ -353,11 +373,12 @@ export default translate([], { wait: true }) (withTracker(() => {
subsready: userSubs.ready(), subsready: userSubs.ready(),
activefires: ActiveFiresCollection.find().fetch(), activefires: ActiveFiresCollection.find().fetch(),
activefirestotal: Counter.get('countActiveFires'), activefirestotal: Counter.get('countActiveFires'),
firealerts: FireAlertsCollection.find().fetch().map( firealerts: FireAlertsCollection.find().fetch().map(doc => (
doc => ( { _id: doc['_id'], lat: doc['location'].lat, lon: doc['location'].lon })), { _id: doc._id, lat: doc.location.lat, lon: doc.location.lon }
)),
userSubs: UserSubsToFiresCollection.find().fetch(), userSubs: UserSubsToFiresCollection.find().fetch(),
viewport: { viewport: {
center: [lat.get(), lng.get()], // a point in the sea center: geolocation.get(),
zoom: zoom.get() zoom: zoom.get()
} }
}; };