Refactorization of FiresMap

imports/ui/components/Maps/FireCircleMark.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Circle } from 'react-leaflet';
+import PropTypes from 'prop-types';
+
+const FireCircleMark = ({
+  lat,
+  lon,
+  scan
+}) => (
+  <Circle center={[lat, lon]} color="red" stroke={false} fillOpacity="1" fill radius={scan * 1000} />
+);
+
+FireCircleMark.propTypes = {
+  scan: PropTypes.number.isRequired,
+  lat: PropTypes.number.isRequired,
+  lon: PropTypes.number.isRequired
+};
+
+export default FireCircleMark;

imports/ui/components/Maps/FireIconMark.js

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-absolute-path */
+import React from 'react';
+import { CircleMarker, Marker } from 'react-leaflet';
+import PropTypes from 'prop-types';
+import { fireIcon, nFireIcon } from '/imports/ui/components/Maps/Icons';
+
+const FireIconMark = ({
+  lat,
+  lon,
+  nasa
+}) => (
+  <div>
+    <Marker position={[lat, lon]} icon={nasa ? fireIcon : nFireIcon} />
+    <CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={1} />
+  </div>
+);
+
+FireIconMark.propTypes = {
+  // https://github.com/PaulLeCam/react-leaflet/tree/master/src/propTypes
+  lat: PropTypes.number.isRequired,
+  lon: PropTypes.number.isRequired,
+  nasa: PropTypes.bool.isRequired
+};
+
+export default FireIconMark;

imports/ui/components/Maps/FireList.js

@@ -0,0 +1,31 @@
+/* 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 FireCircleMark from '/imports/ui/components/Maps/FireCircleMark';
+import FireIconMark from '/imports/ui/components/Maps/FireIconMark';
+import FirePixel from '/imports/ui/components/Maps/FirePixel';
+
+const FireList = ({
+  fires,
+  scale,
+  useMarkers,
+  nasa }) => {
+    const items = fires.map(({ _id, ...props }) => (
+      (useMarkers && scale) ?
+        <FireIconMark key={_id} nasa={nasa} {...props} /> :
+      (!nasa && !scale) ?
+      <FirePixel key={_id} nasa={nasa} {...props} /> :
+      <FireCircleMark key={_id} nasa={nasa} {...props} />));
+    return <div style={{ display: 'none' }}>{items}</div>;
+  };
+
+FireList.propTypes = {
+  fires: PropTypes.array.isRequired,
+  scale: PropTypes.bool.isRequired,
+  useMarkers: PropTypes.bool.isRequired,
+  nasa: PropTypes.bool.isRequired
+};
+
+export default FireList;

imports/ui/components/Maps/FirePixel.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CircleMarker } from 'react-leaflet';
+import PropTypes from 'prop-types';
+
+/* Less acurate (1 pixel per fire) but faster */
+const FirePixel = ({ lat, lon, nasa }) => (
+  <CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={2} />
+);
+
+
+FirePixel.propTypes = {
+  lat: PropTypes.number.isRequired,
+  lon: PropTypes.number.isRequired,
+  nasa: PropTypes.bool.isRequired
+};
+
+export default FirePixel;

imports/ui/components/Maps/Icons.js

@@ -0,0 +1,33 @@
+import Leaflet from 'leaflet';
+
+// http://leafletjs.com/reference-1.2.0.html#icon
+
+export const fireIcon = new Leaflet.Icon({
+  iconUrl: '/fire-marker.png',
+  iconSize: [16, 24], // size of the icon
+  iconAnchor: [8, 26] // point of the icon which will correspond to marker's location
+  /* shadowUrl: require('../public/marker-shadow.png'), */
+  /* shadowSize:   [50, 64], // size of the shadow */
+  /* shadowAnchor: [4, 62],  // the same for the shadow
+   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor */
+});
+
+export const nFireIcon = new Leaflet.Icon({
+  iconUrl: '/n-fire-marker.png',
+  iconSize: [16, 24], // size of the icon
+  iconAnchor: [8, 26] // point of the icon which will correspond to marker's location
+  /* shadowUrl: require('../public/marker-shadow.png'), */
+  /* shadowSize:   [50, 64], // size of the shadow */
+  /* shadowAnchor: [4, 62],  // the same for the shadow
+   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor */
+});
+
+export const positionIcon = new Leaflet.Icon({
+  iconUrl: '/your-position.png',
+  iconSize: [50, 77], // size of the icon
+  iconAnchor: [25, 82] // point of the icon which will correspond to marker's location
+  /* shadowSize:   [50, 64], // size of the shadow */
+  /* shadowUrl: require('../public/marker-shadow.png'), */
+  /* shadowAnchor: [4, 62],  // the same for the shadow
+   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor */
+});

imports/ui/components/Maps/Utils.js

@@ -0,0 +1,15 @@
+/* global L */
+// https://stackoverflow.com/questions/35394577/leaflet-js-union-merge-circles
+import union from '@turf/union';
+
+export function unify(polyList) {
+  let unionTemp;
+  for (let i = 0; i < polyList.length; i += 1) {
+    if (i === 0) {
+      unionTemp = polyList[i].toGeoJSON();
+    } else {
+      unionTemp = union(unionTemp, polyList[i].toGeoJSON());
+    }
+  }
+  return L.geoJson(unionTemp);
+}