Add crash type icons to map markers (scrapd#135)

The marker now use an icon to represent the type of crash. Each type
also has a color.

* Use FontAwesome for the icons
* Use better colors

Fixes scrapd/acrapdviz#128

components/scrapd-map/component.js

@@ -3,6 +3,8 @@ import React from 'react';
 import ReactMapboxGl from 'react-mapbox-gl';
 import styled from '@emotion/styled';
 import { Cluster, Marker } from 'react-mapbox-gl';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBiking, faCarCrash, faMotorcycle, faWalking } from '@fortawesome/free-solid-svg-icons';
 
 const Map = ReactMapboxGl({
   accessToken: 'pk.eyJ1IjoicmdyZWluaG9mZXIiLCJhIjoiY2pwMWt1aGxwMDI0czNrbGJmN2JxaDdsdSJ9.B84ADcgppQIggUtHv4C3UQ',
@@ -75,6 +77,30 @@ const markerStyle = {
   border: '2px solid #A70308'
 };
 
+const markerStyleMotorcycle = {
+  ...markerStyle,
+  backgroundColor: '#0066CC',
+  borderColor: '#0066CC'
+};
+
+const markerStylePedestrian = {
+  ...markerStyle,
+  backgroundColor: '#CCCC00',
+  borderColor: '#CCCC00'
+};
+
+const markerStyleBicycle = {
+  ...markerStyle,
+  backgroundColor: 'orange',
+  borderColor: 'orange'
+};
+
+const markerStyleMotor = {
+  ...markerStyle,
+  backgroundColor: 'brown',
+  borderColor: 'brown'
+};
+
 function clusterMarker(coordinates, count) {
   let clusterStyle;
   if (count >= 2 && count <= 4) {
@@ -95,6 +121,31 @@ function clusterMarker(coordinates, count) {
   );
 }
 
+function SingleMarker(fatality) {
+  let Icon;
+  let markerStyle = markerStyle;
+  if (fatality.Type == 'motorcycle') {
+    markerStyle = markerStyleMotorcycle;
+    Icon = <FontAwesomeIcon icon={faMotorcycle} />;
+  } else if (fatality.Type == 'pedestrian') {
+    markerStyle = markerStylePedestrian;
+    Icon = <FontAwesomeIcon icon={faWalking} />;
+  } else if (fatality.Type == 'bicycle') {
+    markerStyle = markerStyleBicycle;
+    Icon = <FontAwesomeIcon icon={faBiking} />;
+  } else if (fatality.Type == 'motor vehicle') {
+    markerStyle = markerStyleMotor;
+    Icon = <FontAwesomeIcon icon={faCarCrash} />;
+  }
+
+  return (
+    <Marker key={fatality.Case} style={markerStyle} coordinates={[fatality.Longitude, fatality.Latitude]}>
+      {/* <Icon /> */}
+      {Icon}
+    </Marker>
+  );
+}
+
 class ScrapdMap extends React.Component {
   render() {
     return (
@@ -108,13 +159,7 @@ class ScrapdMap extends React.Component {
           center={[-97.740313, 30.274687]}
           zoom={[10]}
         >
-          <Cluster ClusterMarkerFactory={clusterMarker}>
-            {this.props.fatalities.map(fatality => (
-              <Marker key={fatality.Case} style={markerStyle} coordinates={[fatality.Longitude, fatality.Latitude]}>
-                1
-              </Marker>
-            ))}
-          </Cluster>
+          <Cluster ClusterMarkerFactory={clusterMarker}>{this.props.fatalities.map(SingleMarker)}</Cluster>
         </Map>
       </MapDiv>
     );

package.json

@@ -37,6 +37,9 @@
   "dependencies": {
     "@emotion/core": "^10.0.7",
     "@emotion/styled": "^10.0.7",
+    "@fortawesome/fontawesome-svg-core": "^1.2.19",
+    "@fortawesome/free-solid-svg-icons": "^5.9.0",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "@zeit/next-css": "^1.0.1",
     "antd": "^3.13.6",
     "babel-plugin-import": "^1.11.0",