Added industries collection

imports/ui/components/Maps/FireCircleMark.js

@@ -1,22 +1,40 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { Circle } from 'react-leaflet';
 import PropTypes from 'prop-types';
+import { onMarkClick } from './MarkListeners';
 import FirePopup from './FirePopup';
 
-const FireCircleMark = ({
-  lat,
-  lon,
-  nasa,
-  scan,
-  id,
-  when,
-  history,
-  t
-}) => (
-  <Circle center={[lat, lon]} color="red" stroke={false} fillOpacity="1" fill radius={scan * 1000}>
-    <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
-  </Circle>
-);
+
+class FireCircleMark extends Component {
+  constructor(props) {
+    super(props);
+    this.t = props.t;
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick() {
+    const { history, nasa, id } = this.props;
+    onMarkClick(history, nasa, id);
+  }
+
+  render() {
+    const {
+      lat,
+      lon,
+      scan,
+      nasa,
+      id,
+      history,
+      when,
+      t
+    } = this.props;
+    return (
+      <Circle center={[lat, lon]} color="red" stroke={false} fillOpacity="1" fill radius={scan * 500} onClick={this.onClick}>
+        <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
+      </Circle>
+    );
+  }
+}
 
 FireCircleMark.propTypes = {
   scan: PropTypes.number.isRequired,

imports/ui/components/Maps/FireIconMark.js

@@ -2,7 +2,8 @@
 import React, { Component, Fragment } from 'react';
 import { CircleMarker, Marker, Tooltip } from 'react-leaflet';
 import PropTypes from 'prop-types';
-import { fireIconS, fireIconM, fireIconL, nFireIcon, industryIcon } from '/imports/ui/components/Maps/Icons';
+import { fireIconS, fireIconM, fireIconL, nFireIcon, industryIcon, regIndustryIcon } from '/imports/ui/components/Maps/Icons';
+import { onMarkClick } from './MarkListeners';
 import { translate } from 'react-i18next';
 import FirePopup from './FirePopup';
 
@@ -14,8 +15,8 @@ class FireIconMark extends Component {
   }
 
   onClick() {
-    // console.log('onClick fired');
-    this.props.history.push(`/fire/${this.props.nasa ? 'active' : 'alert'}/${this.props.id}`);
+    const { history, nasa, id } = this.props;
+    onMarkClick(history, nasa, id);
   }
 
   // Some docs:
@@ -36,22 +37,34 @@ class FireIconMark extends Component {
       id,
       history,
       falsePositives,
+      industries,
       when,
       t
     } = this.props;
     return (
       <div>
-        { !falsePositives &&
+        { !falsePositives && !industries &&
           <Marker position={[lat, lon]} icon={nasa ? this.getIcon(scan) : nFireIcon} onClick={this.onClick} >
             <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
           </Marker> }
-        { falsePositives &&
+        { industries && <Marker position={[lat, lon]} icon={regIndustryIcon}>
+          <Tooltip><Fragment>{t('Es una industria (fuente: registro oficial)')}</Fragment></Tooltip>
+                        </Marker> }
+        { /* disabled */ industries && false && <CircleMarker
+          center={[lat, lon]}
+          color="violet"
+          stroke={false}
+          fillOpacity="1"
+          fill
+          radius={1}
+        />}
+        { falsePositives && !industries &&
         <Marker position={[lat, lon]} icon={industryIcon} onClick={this.onClick}>
           <Tooltip><Fragment>{t('Es una industria')}</Fragment></Tooltip>
           { /* disabled because was a past fire (and can be marked multiple times) */ false && <FirePopup t={t} history={history} id={id} lat={lat} lon={lon} /> }
         </Marker>
           }
-        { !falsePositives &&
+        { !falsePositives && !industries &&
         <CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={1} onClick={this.onClick}>
           <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
         </CircleMarker> }
@@ -67,6 +80,7 @@ FireIconMark.propTypes = {
   scan: PropTypes.number,
   nasa: PropTypes.bool,
   falsePositives: PropTypes.bool.isRequired,
+  industries: PropTypes.bool.isRequired,
   id: PropTypes.object.isRequired,
   history: PropTypes.object.isRequired,
   when: PropTypes.instanceOf(Date),

imports/ui/components/Maps/FireList.js

@@ -9,17 +9,17 @@ import FirePixel from '/imports/ui/components/Maps/FirePixel';
 
 export default function FireList(props) {
   const {
-    fires, scale, useMarkers, nasa, t, history, falsePositives
+    fires, scale, useMarkers, nasa, t, history, falsePositives, industries
   } = props;
   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 t={t} history={history} id={_id} key={_id} nasa={nasa} falsePositives={falsePositives} {...otherProps} />));
-  } else if (usePixel && !falsePositives) {
+    items = fires.map(({ _id, ...otherProps }) => (<FireIconMark t={t} history={history} id={_id} key={_id} nasa={nasa} falsePositives={falsePositives} industries={industries} {...otherProps} />));
+  } else if (usePixel && !falsePositives && !industries) {
     items = fires.map(({ _id, ...otherProps }) => (<FirePixel t={t} key={_id} id={_id} history={history} nasa={nasa} {...otherProps} />));
-  } else if (!falsePositives) {
+  } else if (!falsePositives && !industries) {
     items = fires.map(({ _id, ...otherProps }) => (<FireCircleMark t={t} history={history} id={_id} key={_id} nasa={nasa} {...otherProps} />));
   }
   return (<div style={{ display: 'none' }}>{items}</div>);
@@ -31,6 +31,7 @@ FireList.propTypes = {
   useMarkers: PropTypes.bool.isRequired,
   nasa: PropTypes.bool.isRequired,
   falsePositives: PropTypes.bool.isRequired,
+  industries: PropTypes.bool.isRequired,
   history: PropTypes.object.isRequired,
   t: PropTypes.func.isRequired
 };

imports/ui/components/Maps/Icons.js

@@ -36,6 +36,12 @@ export const industryIcon = new Leaflet.Icon({
   iconAnchor: [16, 20]
 });
 
+export const regIndustryIcon = new Leaflet.Icon({
+  iconUrl: '/industry-marker-reg.png',
+  iconSize: [32, 37],
+  iconAnchor: [16, 20]
+});
+
 export const nFireIcon = new Leaflet.Icon({
   iconUrl: '/n-fire-marker.png',
   iconSize: [16, 24], // size of the icon

imports/ui/components/Maps/MarkListeners.js

@@ -0,0 +1,4 @@
+export const onMarkClick = (history, nasa, id) => {
+  // console.log('onClick fired');
+  history.push(`/fire/${nasa ? 'active' : 'alert'}/${id}`);
+};