Fire icon sizes

designs/icons-tcef.svg

@@ -338,9 +338,9 @@
     <g
        id="g22554"
        transform="translate(103.16604,61.471991)"
-       inkscape:export-filename="/mnt/md1/proyectos/dev/todos-contra-el-fuego-web/public/fire-marker.png"
+       inkscape:export-filename="/mnt/md1/proyectos/dev/todos-contra-el-fuego-web/public/fire-marker-s.png"
-       inkscape:export-xdpi="4.0856881"
+       inkscape:export-xdpi="2"
-       inkscape:export-ydpi="4.0856881">
+       inkscape:export-ydpi="2">
       <path
          style="fill:#d41300;fill-opacity:1;stroke:none;stroke-width:10.58333302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m -25.638382,38.048346 c 11.566313,13.887908 17.1215844,22.244854 13.751242,33.868326 -2.465387,8.50265 -8.895424,18.626534 -18.100172,25.532106 -9.204776,6.905572 -20.549951,13.517692 -24.263404,17.728802 -3.71348,4.21108 -9.835779,11.6046 -10.976769,21.82688 -2.725208,24.7073 15.038044,45.63926 39.702238,48.35952 11.289242,1.2311 26.6324564,-5.2645 34.2331684,-10.31973 C 16.308659,169.98901 28.520768,152.76263 31.570884,138.81099 35.854436,119.21732 35.065926,96.385127 23.626002,79.16853 12.946123,63.095807 3.8673424,50.775037 -25.638382,38.048346 Z"

imports/ui/components/Maps/FireIconMark.js

@@ -2,7 +2,7 @@
 import React, { Component, Fragment } from 'react';
 import { CircleMarker, Marker, Tooltip } from 'react-leaflet';
 import PropTypes from 'prop-types';
-import { fireIcon, nFireIcon, industryIcon } from '/imports/ui/components/Maps/Icons';
+import { fireIconS, fireIconM, fireIconL, nFireIcon, industryIcon } from '/imports/ui/components/Maps/Icons';
 import { translate } from 'react-i18next';
 import FirePopup from './FirePopup';
 
@@ -18,10 +18,20 @@ class FireIconMark extends Component {
     this.props.history.push(`/fire/${this.props.nasa ? 'active' : 'alert'}/${this.props.id}`);
   }
 
+  // Some docs:
+  // https://earthdata.nasa.gov/what-is-new-collection-6-modis-active-fire-data
+  // https://cdn.earthdata.nasa.gov/conduit/upload/3865/MODIS_C6_Fire_User_Guide_A.pdf
+  getIcon(scan) {
+    if (scan <= 1) return fireIconS;
+    if (scan <= 2) return fireIconM;
+    return fireIconL;
+  }
+
   render() {
     const {
       lat,
       lon,
+      scan,
       nasa,
       id,
       history,
@@ -32,7 +42,7 @@ class FireIconMark extends Component {
     return (
       <div>
         { !falsePositives &&
-          <Marker position={[lat, lon]} icon={nasa ? fireIcon : nFireIcon} onClick={this.onClick} >
+          <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 &&
@@ -54,6 +64,7 @@ FireIconMark.propTypes = {
   // https://github.com/PaulLeCam/react-leaflet/tree/master/src/propTypes
   lat: PropTypes.number.isRequired,
   lon: PropTypes.number.isRequired,
+  scan: PropTypes.number,
   nasa: PropTypes.bool,
   falsePositives: PropTypes.bool.isRequired,
   id: PropTypes.object.isRequired,

imports/ui/components/Maps/Icons.js

@@ -12,6 +12,24 @@ export const fireIcon = new Leaflet.Icon({
    * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor */
 });
 
+export const fireIconL = new Leaflet.Icon({
+  iconUrl: '/fire-marker-l.png',
+  iconSize: [16, 24],
+  iconAnchor: [8, 26]
+});
+
+export const fireIconM = new Leaflet.Icon({
+  iconUrl: '/fire-marker-m.png',
+  iconSize: [12, 17],
+  iconAnchor: [6, 19]
+});
+
+export const fireIconS = new Leaflet.Icon({
+  iconUrl: '/fire-marker-s.png',
+  iconSize: [8, 12],
+  iconAnchor: [4, 14]
+});
+
 export const industryIcon = new Leaflet.Icon({
   iconUrl: '/industry-marker.png',
   iconSize: [32, 37],