Added fires union (wip)

imports/ui/components/Maps/FireCircleMark.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
-import { Circle } from 'react-leaflet';
+import { GeoJSON } from 'react-leaflet';
 import PropTypes from 'prop-types';
+import { rectangleAround } from 'map-common-utils';
 import { onMarkClick } from './MarkListeners';
 import FirePopup from './FirePopup';
 
-
 class FireCircleMark extends Component {
   constructor(props) {
     super(props);
@@ -22,22 +22,26 @@ class FireCircleMark extends Component {
       lat,
       lon,
       scan,
+      track,
       nasa,
       id,
       history,
       when,
       t
     } = this.props;
+    const rect = rectangleAround({ lat, lon }, track, track);
     return (
-      <Circle center={[lat, lon]} color="red" stroke={false} fillOpacity="1" fill radius={scan * 500} onClick={this.onClick}>
+      <GeoJSON data={rect} color="red" stroke width="1" opacity=".4" fillOpacity=".3">
         <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
-      </Circle>
+      </GeoJSON>
     );
+    /* <Circle center={[lat, lon]} color="red" stroke={false} fillOpacity="1" fill radius={scan * 500} onClick={this.onClick}> */
   }
 }
 
 FireCircleMark.propTypes = {
   scan: PropTypes.number.isRequired,
+  track: PropTypes.number.isRequired,
   lat: PropTypes.number.isRequired,
   lon: PropTypes.number.isRequired,
   nasa: PropTypes.bool.isRequired,

imports/ui/components/Maps/FireIconMark.js

@@ -3,8 +3,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, regIndustryIcon } from '/imports/ui/components/Maps/Icons';
-import { onMarkClick } from './MarkListeners';
 import { translate } from 'react-i18next';
+import { onMarkClick } from './MarkListeners';
 import FirePopup from './FirePopup';
 
 class FireIconMark extends Component {
@@ -30,17 +30,7 @@ class FireIconMark extends Component {
 
   render() {
     const {
-      lat,
-      lon,
-      scan,
-      nasa,
-      id,
-      history,
-      falsePositives,
-      industries,
-      neighbour,
-      when,
-      t
+      lat, lon, scan, track, nasa, id, history, falsePositives, industries, neighbour, when, t
     } = this.props;
     return (
       <div>
@@ -79,6 +69,7 @@ FireIconMark.propTypes = {
   lat: PropTypes.number.isRequired,
   lon: PropTypes.number.isRequired,
   scan: PropTypes.number,
+  track: PropTypes.number,
   nasa: PropTypes.bool,
   falsePositives: PropTypes.bool.isRequired,
   industries: PropTypes.bool.isRequired,

imports/ui/components/Maps/FireListUnion.js

@@ -0,0 +1,22 @@
+/* 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 FirePolygonMark from '/imports/ui/components/Maps/FirePolygonMark';
+
+export default function FireListUnion(props) {
+  const {
+    firesUnion, nasa, t, history
+  } = props;
+  /* console.log(`Using marks: ${useMarks}, using pixels: ${usePixel}`); */
+  const items = firesUnion.map(({ _id, ...otherProps }) => (<FirePolygonMark t={t} history={history} id={_id} key={_id} nasa={nasa} {...otherProps} />));
+  return (<div style={{ display: 'none' }}>{items}</div>);
+}
+
+FireListUnion.propTypes = {
+  firesUnion: PropTypes.array.isRequired,
+  nasa: PropTypes.bool.isRequired,
+  history: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired
+};

imports/ui/components/Maps/FirePixel.js

@@ -3,31 +3,32 @@
 import React from 'react';
 import { CircleMarker } from 'react-leaflet';
 import PropTypes from 'prop-types';
-import FirePopup from './FirePopup';
 import { translate } from 'react-i18next';
+import FirePopup from './FirePopup';
 
 /* Less acurate (1 pixel per fire) but faster */
 const FirePixel = ({
-  lat, lon, nasa, id, when, t, history
+  lat, lon, nasa, id, when, t, history, track
 }) => (
   <CircleMarker
-      center={[lat, lon]}
-      color={nasa ? 'red' : '#D35400'}
-      stroke={false}
-      fillOpacity="1"
-      fill
-      radius={nasa ? 1 : 2}
+        center={[lat, lon]}
+        color={nasa ? 'red' : '#D35400'}
+        stroke={false}
+        fillOpacity="1"
+        fill
+        radius={nasa ? 1 : 2}
   >
     <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
   </CircleMarker>
 );
 
-
 FirePixel.propTypes = {
   lat: PropTypes.number.isRequired,
   lon: PropTypes.number.isRequired,
   id: PropTypes.object.isRequired,
   history: PropTypes.object.isRequired,
+  scan: PropTypes.number,
+  track: PropTypes.number,
   when: PropTypes.instanceOf(Date),
   nasa: PropTypes.bool.isRequired,
   t: PropTypes.func.isRequired

imports/ui/components/Maps/FirePolygonMark.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { GeoJSON } from 'react-leaflet';
+import PropTypes from 'prop-types';
+import { onMarkClick } from './MarkListeners';
+import FirePopup from './FirePopup';
+
+class FirePolygonMark 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 {
+      nasa,
+      id,
+      shape,
+      centerid,
+      history,
+      when,
+      t
+    } = this.props;
+    const lon = centerid.coordinates[0];
+    const lat = centerid.coordinates[1];
+    return (
+      <GeoJSON data={shape} color="orange" stroke width="1" opacity=".2" fillOpacity=".0" />
+    );
+    /* <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} /> */
+  }
+}
+
+FirePolygonMark.propTypes = {
+  id: PropTypes.object.isRequired,
+  nasa: PropTypes.bool.isRequired,
+  shape: PropTypes.object.isRequired,
+  centerid: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+  when: PropTypes.instanceOf(Date).isRequired,
+  t: PropTypes.func.isRequired
+};
+
+export default FirePolygonMark;