From 5235bd384d42b3ea2e54a027698453b156a87e57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Greinhofer?= Date: Sun, 23 Jun 2019 22:53:45 -0500 Subject: [PATCH] Add crash type icons to map markers (#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 | 59 ++++++++++++++++++++++++++---- package-lock.json | 35 ++++++++++++++++++ package.json | 3 ++ 3 files changed, 90 insertions(+), 7 deletions(-) diff --git a/components/scrapd-map/component.js b/components/scrapd-map/component.js index 710631c..17ce4cc 100644 --- a/components/scrapd-map/component.js +++ b/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 = ; + } else if (fatality.Type == 'pedestrian') { + markerStyle = markerStylePedestrian; + Icon = ; + } else if (fatality.Type == 'bicycle') { + markerStyle = markerStyleBicycle; + Icon = ; + } else if (fatality.Type == 'motor vehicle') { + markerStyle = markerStyleMotor; + Icon = ; + } + + return ( + + {/* */} + {Icon} + + ); +} + class ScrapdMap extends React.Component { render() { return ( @@ -108,13 +159,7 @@ class ScrapdMap extends React.Component { center={[-97.740313, 30.274687]} zoom={[10]} > - - {this.props.fatalities.map(fatality => ( - - 1 - - ))} - + {this.props.fatalities.map(SingleMarker)} ); diff --git a/package-lock.json b/package-lock.json index ec13afa..d874820 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1213,6 +1213,36 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz", "integrity": "sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA==" }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.19", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.19.tgz", + "integrity": "sha512-nd2Ul/CUs8U9sjofQYAALzOGpgkVJQgEhIJnOHaoyVR/LeC3x2mVg4eB910a4kS6WgLPebAY0M2fApEI497raQ==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.19", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.19.tgz", + "integrity": "sha512-D4ICXg9oU08eF9o7Or392gPpjmwwgJu8ecCFusthbID95CLVXOgIyd4mOKD9Nud5Ckz+Ty59pqkNtThDKR0erA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.19" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.9.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.9.0.tgz", + "integrity": "sha512-U8YXPfWcSozsCW0psCtlRGKjjRs5+Am5JJwLOUmVHFZbIEWzaz4YbP84EoPwUsVmSAKrisu3QeNcVOtmGml0Xw==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.19" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.4.tgz", + "integrity": "sha512-GwmxQ+TK7PEdfSwvxtGnMCqrfEm0/HbRHArbUudsYiy9KzVCwndxa2KMcfyTQ8El0vROrq8gOOff09RF1oQe8g==", + "requires": { + "humps": "^2.0.1", + "prop-types": "^15.5.10" + } + }, "@jest/console": { "version": "24.7.1", "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz", @@ -6623,6 +6653,11 @@ "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" }, + "humps": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz", + "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", diff --git a/package.json b/package.json index ee47fd3..bd408ee 100644 --- a/package.json +++ b/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",