332, 412 Map - custom markers, pin popup data fetching, clustering tweak

public/index.html

@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
           integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
           crossorigin=""/>
-    <link rel="stylesheet" href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css" />
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:700|Roboto&display=swap" rel="stylesheet">
     <title>311 Data</title>
   </head>

src/components/PinMap/CustomMarker.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import { renderToString } from 'react-dom/server';
+import { Marker } from 'react-leaflet';
+import { divIcon } from 'leaflet';
+import Icon from '@components/common/Icon';
+
+const CustomMarker = ({
+  position,
+  onClick,
+  color,
+  style,
+  icon,
+  size,
+  children,
+}) => {
+  const markerIcon = divIcon({
+    className: 'custom-marker-icon',
+    html: renderToString(<Icon id="marker-icon" icon={icon} iconSize={size} style={{ color, ...style }} />),
+  });
+
+  return (
+    <Marker position={position} onClick={onClick} icon={markerIcon}>
+      {children}
+    </Marker>
+  );
+};
+
+export default CustomMarker;
+
+CustomMarker.propTypes = {
+  position: PropTypes.node.isRequired,
+  onClick: PropTypes.func.isRequired,
+  color: PropTypes.string,
+  style: PropTypes.shape({}),
+  icon: PropTypes.string,
+  size: PropTypes.string,
+  children: PropTypes.node,
+};
+
+CustomMarker.defaultProps = {
+  color: 'blue',
+  style: {},
+  icon: 'map-marker-alt',
+  size: '3x',
+  children: null,
+};

src/components/PinMap/PinMap.jsx

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { getPinInfoRequest } from '@reducers/data';
+import PinPopup from '@components/PinMap/PinPopup';
+import CustomMarker from '@components/PinMap/CustomMarker';
 import {
   Map,
-  Marker,
-  Popup,
   TileLayer,
   Rectangle,
   Tooltip,
@@ -16,8 +17,10 @@ import MarkerClusterGroup from 'react-leaflet-markercluster';
 import HeatmapLayer from 'react-leaflet-heatmap-layer';
 import PropTypes from 'proptypes';
 import COLORS from '@styles/COLORS';
+import { REQUEST_TYPES } from '@components/common/CONSTANTS';
 import PrintControlDefault from 'react-leaflet-easyprint';
 
+
 // import neighborhoodOverlay from '../../data/la-county-neighborhoods-v6.json';
 // import municipalOverlay from '../../data/la-county-municipal-regions-current.json';
 // import councilDistrictsOverlay from '../../data/la-city-council-districts-2012.json';
@@ -109,24 +112,63 @@ class PinMap extends Component {
   }
 
   renderMarkers = () => {
-    const { data, showMarkers } = this.props;
+    const {
+      data,
+      getPinInfo,
+      pinsInfo,
+    } = this.props;
 
-    if (showMarkers && data) {
+    if (data) {
       return data.map(d => {
         if (d.latitude && d.longitude) {
-          const position = [d.latitude, d.longitude];
+          const {
+            latitude,
+            longitude,
+            srnumber,
+            requesttype,
+          } = d;
+          const position = [latitude, longitude];
+          const {
+            status,
+            createddate,
+            updateddate,
+            closeddate,
+            address,
+            ncname,
+          } = pinsInfo[srnumber] || {};
+          const { color, abbrev } = REQUEST_TYPES.find(req => req.type === requesttype
+            || req.fullType === requesttype);
+
+          const popup = (
+            <PinPopup
+              requestType={requesttype}
+              color={color}
+              abbrev={abbrev}
+              address={address}
+              createdDate={createddate}
+              updatedDate={updateddate}
+              closedDate={closeddate}
+              status={status}
+              ncName={ncname}
+            />
+          );
 
           return (
-            <Marker key={d.srnumber} position={position}>
-              {/* Fetching request details on marker click will be implemented in another PR */}
-              <Popup>
-                Type:
-                {d.requesttype}
-                <br />
-                Address:
-                {d.address}
-              </Popup>
-            </Marker>
+            <CustomMarker
+              key={srnumber}
+              position={position}
+              onClick={() => {
+                if (!pinsInfo[srnumber]) {
+                  getPinInfo(srnumber);
+                }
+              }}
+              color={color}
+              icon="map-marker-alt"
+              size="3x"
+              style={{ textShadow: '1px 0px 3px rgba(0,0,0,1.0), -1px 0px 3px rgba(0,0,0,1.0)' }}
+            >
+              {popup}
+            </CustomMarker>
           );
         }
 
@@ -218,10 +260,7 @@ class PinMap extends Component {
             }
             <Overlay checked name="Markers">
               <MarkerClusterGroup
-                showCoverageOnHover
-                zoomToBoundsOnClick
-                removeOutsideVisibleBounds
-                maxClusterRadius={65}
+                maxClusterRadius={40}
               >
                 {this.renderMarkers()}
               </MarkerClusterGroup>
@@ -274,18 +313,24 @@ class PinMap extends Component {
   }
 }
 
+const mapDispatchToProps = dispatch => ({
+  getPinInfo: srnumber => dispatch(getPinInfoRequest(srnumber)),
+});
+
 const mapStateToProps = state => ({
   data: state.data.pins,
+  pinsInfo: state.data.pinsInfo,
 });
 
 PinMap.propTypes = {
   data: PropTypes.arrayOf(PropTypes.shape({})),
-  showMarkers: PropTypes.bool,
+  pinsInfo: PropTypes.shape({}),
+  getPinInfo: PropTypes.func.isRequired,
 };
 
 PinMap.defaultProps = {
   data: undefined,
-  showMarkers: true,
+  pinsInfo: {},
 };
 
-export default connect(mapStateToProps, null)(PinMap);
+export default connect(mapStateToProps, mapDispatchToProps)(PinMap);

src/components/PinMap/PinPopup.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import moment from 'moment';
+
+import { Popup } from 'react-leaflet';
+
+const PinPopup = ({
+  requestType,
+  color,
+  abbrev,
+  address,
+  createdDate,
+  updatedDate,
+  closedDate,
+  status,
+  ncName,
+}) => {
+  // Converts unix timestamp to MM/DD/YYYY
+  // 1558945500 -> 5/27/2019
+  const created = moment.unix(createdDate).format('l');
+  const updated = moment.unix(updatedDate).format('l');
+  // Converts date/time string to MM/DD/YYYY
+  // "2019-12-13 19:31:00" -> 12/13/2019
+  const closed = moment(closedDate).format('l');
+
+  return (
+    <Popup className="pin-popup">
+      { createdDate ? (
+        <>
+          <p className="pin-popup-type has-text-weight-bold">
+            {requestType}
+            &nbsp;
+            [
+            <span className="pin-popup-type-abbrev" style={{ color }}>
+              {abbrev}
+            </span>
+            ]
+          </p>
+          <p className="pin-popup-ncname">{ncName}</p>
+          <p className="pin-popup-address has-text-weight-bold">{address}</p>
+          <div className="pin-popup-status">
+            <p>
+              Reported on&nbsp;
+              {created}
+            </p>
+            {
+              closedDate ? (
+                <p>
+                  Closed on&nbsp;
+                  {closed}
+                </p>
+              ) : (
+                <>
+                  <p>
+                    Last updated on&nbsp;
+                    {updated}
+                  </p>
+                  <p>
+                    Status:&nbsp;
+                    {status}
+                  </p>
+                </>
+              )
+            }
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="loader" />
+          <p>Loading...</p>
+        </>
+      )}
+    </Popup>
+  );
+};
+
+export default PinPopup;
+
+PinPopup.propTypes = {
+  requestType: PropTypes.string,
+  color: PropTypes.string,
+  abbrev: PropTypes.string,
+  address: PropTypes.string,
+  createdDate: PropTypes.number,
+  updatedDate: PropTypes.number,
+  closedDate: PropTypes.string,
+  status: PropTypes.string,
+  ncName: PropTypes.string,
+};
+
+PinPopup.defaultProps = {
+  requestType: undefined,
+  color: 'black',
+  abbrev: undefined,
+  address: undefined,
+  createdDate: undefined,
+  updatedDate: undefined,
+  closedDate: undefined,
+  status: undefined,
+  ncName: undefined,
+};

src/components/common/CONSTANTS.js

@@ -26,6 +26,7 @@ export const MONTHS = [
 export const REQUEST_TYPES = [
   {
     type: 'Dead Animal',
+    fullType: 'Dead Animal Removal',
     abbrev: 'DAN',
     color: '#4FEFEF',
   },
@@ -36,11 +37,13 @@ export const REQUEST_TYPES = [
   },
   {
     type: 'Single Streetlight',
+    fullType: 'Single Streetlight Issue',
     abbrev: 'SSL',
     color: '#AD7B56',
   },
   {
     type: 'Multiple Streetlight',
+    fullType: 'Multiple Streetlight Issue',
     abbrev: 'MSL',
     color: '#F7ADAD',
   },
@@ -56,6 +59,7 @@ export const REQUEST_TYPES = [
   },
   {
     type: 'E-Waste',
+    fullType: 'Electronic Waste',
     abbrev: 'EWT',
     color: '#DDEC9F',
   },
@@ -66,11 +70,13 @@ export const REQUEST_TYPES = [
   },
   {
     type: 'Graffiti',
+    fullType: 'Graffiti Removal',
     abbrev: 'GFT',
     color: '#2368D0',
   },
   {
     type: 'Illegal Dumping',
+    fullType: 'Illegal Dumping Pickup',
     abbrev: 'ILD',
     color: '#6A8011',
   },
@@ -79,11 +85,6 @@ export const REQUEST_TYPES = [
     abbrev: 'OTH',
     color: '#6D7C93',
   },
-
-  /*
-   * Is 'Report Water Waste' still a valid request type?
-   * If so, we're missing it on the front end mockups.
-   */
 ];
 
 export const REQUEST_SOURCES = [