Map features, About page changes

package.json

@@ -32,6 +32,7 @@
     "react-dom": "^16.8.6",
     "react-leaflet": "^2.4.0",
     "react-leaflet-choropleth": "^2.0.0",
+    "react-leaflet-control": "^2.1.2",
     "react-leaflet-easyprint": "^2.0.0",
     "react-leaflet-heatmap-layer": "^2.0.0",
     "react-leaflet-markercluster": "^2.0.0-rc3",

src/components/PinMap/ExportLegend.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'proptypes';
+import Control from 'react-leaflet-control';
+import Icon from '@components/common/Icon';
+
+import { REQUEST_TYPES } from '@components/common/CONSTANTS';
+
+const ExportLegend = ({
+  requestTypes,
+  visible,
+  position,
+}) => {
+  const getRequestTypeFilters = Object.keys(requestTypes).filter(type => type !== 'All' && requestTypes[type]);
+  const renderLegendTypes = getRequestTypeFilters.map(req => {
+    const { color, displayName, abbrev } = REQUEST_TYPES[req];
+    return (
+      <div key={`export-legend-${abbrev}`}>
+        <Icon
+          id={`request-icon-${abbrev}`}
+          icon="circle"
+          size="small"
+          style={{ color }}
+        />
+        {`${displayName} [${abbrev}]`}
+      </div>
+    );
+  });
+
+  if (visible) {
+    return (
+      <Control position={position}>
+        <div className="export-legend-wrapper">
+          <div className="export-legend-title">Request Type Legend:</div>
+          <div className="leaflet-control-layers-separator" />
+          {
+            renderLegendTypes.length ? renderLegendTypes : 'No request types selected'
+          }
+        </div>
+      </Control>
+    );
+  }
+  return null;
+};
+
+const mapStateToProps = state => ({
+  requestTypes: state.filters.requestTypes,
+});
+
+ExportLegend.propTypes = {
+  requestTypes: PropTypes.shape({}).isRequired,
+  visible: PropTypes.bool.isRequired,
+  position: PropTypes.oneOf(['topright', 'topleft', 'bottomright', 'bottomleft']),
+};
+
+ExportLegend.defaultProps = {
+  position: 'bottomright',
+};
+
+export default connect(mapStateToProps, null)(ExportLegend);

src/components/PinMap/HeatmapLegend.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import Control from 'react-leaflet-control';
+
+const HeatmapLegend = ({
+  visible,
+  position,
+}) => {
+  if (visible) {
+    return (
+      <Control position={position}>
+        <div className="heatmap-legend-wrapper has-text-centered">
+          <div className="has-text-centered">
+            Concentration of Reports
+          </div>
+          <div id="heatmap-gradient-legend" className="level columns">
+            <span className="column has-text-left level-item">
+              Low
+            </span>
+            <span className="column has-text-right level-item">
+              High
+            </span>
+          </div>
+        </div>
+      </Control>
+    );
+  }
+  return null;
+};
+
+HeatmapLegend.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  position: PropTypes.oneOf(['topright', 'topleft', 'bottomright', 'bottomleft']),
+};
+
+HeatmapLegend.defaultProps = {
+  position: 'bottomright',
+};
+
+export default HeatmapLegend;