In transportation planning, crash data is a vital resource for identifying crash trends and needed safety improvements. DVRPC is consistent with state and local partners by employing a Vision Zero approach to crash data analysis: no loss of life in our region's roadways is acceptable. Roadway owners and policymakers should focus on preventing crashes that result in fatalities or serious injuries - the most severe crashes on the road.
\r\n Injury severity from crashes is divided into seven possible categories:\r\nFollowing FHWA guidance, in 2016 most counties in Pennsylvania (except Philadelphia) adopted the term \"Suspected Serious Injury\" in place of \"Major Injury,\" \"Suspected Minor Injury\" in place of \"Moderate Injury,\" and \"Possible Injury\" in place of \"Minor Injury”. Philadelphia and DVRPC’s New Jersey counties adopted these changes in 2019. Although these new terms did not result in a significant change in the definition of these injury types, it did redistribute the crashes within injury categories resulting in an increase in crashes labeled \"Suspected Serious Injury\" and corresponding decreases in injuries labeled as lesser severity. More information on FHWA’s guidance can be found here and here (see P.5 Injury Status on page 34).
\r\nRaw crash data tables for this tool were downloaded from the PennDOT Crash Download Map and the NJDOT Crash Tables webpage, for Pennsylvania and New Jersey data, respectively.
\r\nContact: Kevin Murphy kmurphy@dvrpc.org
\r\n `,\r\n how: `\r\nThis web page is a public resource of general information. The Delaware Valley Regional Planning Commission (DVRPC) makes no warranty, representation, or guarantee as to the content, sequence, accuracy, timeliness, or completeness of any of the spatial data or database information provided herein. DVRPC and partner state, local, and other agencies shall assume no liability for errors, omissions, or inaccuracies in the information provided regardless of how caused; or any decision made or action taken or not taken by any person relying on any information or data furnished within.
\r\n `\r\n }","import React, { Component } from 'react';\r\n\r\nimport { modalContent } from './modalContent.js'\r\nimport './infoModal.css';\r\n\r\nclass Modal extends Component {\r\n componentDidMount() {\r\n document.onkeydown = e => this.keyDownModal(e)\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener('keydown', this.keyDownModal, false)\r\n }\r\n\r\n showModal = () => {\r\n this.modal.style.display = 'flex'\r\n this.modal.style.justifyContent = 'center'\r\n this.modal.style.alignItems = 'center'\r\n this.modal.setAttribute('aria-hidden', 'false')\r\n }\r\n\r\n hideModal = () => {\r\n this.modal.style.display = 'none'\r\n this.modal.setAttribute('aria-hidden', 'true')\r\n }\r\n\r\n clickModal = e => {\r\n if (e.target === this.modal) this.hideModal()\r\n }\r\n\r\n keyDownModal = e => {\r\n if( e.code === 'Escape' && this.modal.style.display === 'flex') this.hideModal()\r\n }\r\n\r\n handleTabs = e => {\r\n const target = e.target\r\n const selectedTab = target.id.split('-')[1]\r\n const tabsDiv = target.parentElement\r\n const contentDiv = tabsDiv.nextElementSibling\r\n const allTabs = tabsDiv.children\r\n const length = allTabs.length\r\n \r\n // reset all tabs to default\r\n for(var i=0; iIn transportation planning, crash data is a vital resource for identifying crash trends and needed safety improvements. DVRPC is consistent with state and local partners by employing a Vision Zero approach to crash data analysis: no loss of life in our region's roadways is acceptable. Roadway owners and policymakers should focus on preventing crashes that result in fatalities or serious injuries - the most severe crashes on the road.
\r\n \r\n Injury severity from crashes is divided into seven possible categories:\r\n \r\nFollowing FHWA guidance, in 2016 most counties in Pennsylvania (except Philadelphia) adopted the term \"Suspected Serious Injury\" in place of \"Major Injury,\" \"Suspected Minor Injury\" in place of \"Moderate Injury,\" and \"Possible Injury\" in place of \"Minor Injury”. Philadelphia and DVRPC’s New Jersey counties adopted these changes in 2019. Although these new terms did not result in a significant change in the definition of these injury types, it did redistribute the crashes within injury categories resulting in an increase in crashes labeled \"Suspected Serious Injury\" and corresponding decreases in injuries labeled as lesser severity. More information on FHWA’s guidance can be found here and here (see P.5 Injury Status on page 34).
\r\nRaw crash data tables for this tool were downloaded from the PennDOT Crash Download Map and the NJDOT Crash Tables webpage, for Pennsylvania and New Jersey data, respectively. The DVRPC Crash Data Viewer is updated annually when all crash data is available for the region; more recent crash data may be available for a particular state at the linked DOT websites.
\r\n \r\nContact: Kevin Murphy kmurphy@dvrpc.org
\r\nThis tool's default setting is limited to five years of killed and severe injury crashes (abbreviated as \"KSI\") for {defaultRange.from} to {defaultRange.to}. Five years of data is typically used by local, state, and federal partners in safety analyses.
\r\nThe following charts and map are showing results for {crashType} crash types from {from} to {to} in {area}. You can adjust the range and severity type using the forms below:
\r\n\r\n \r\n\r\n \r\n\r\nThis chart shows {crashType} crashes in {area} by crash severity from {from} to {to}. Crash trends can be useful for identifying if the frequency of crashes is increasing or decreasing over time, but it is important not to infer patterns from single-year spikes or drops in crashes or in datasets with limited data points.
\r\nThis chart shows people involved in {crashType} crashes in {area} by crash severity from {from} to {to}. Injury severity is divided into seven possible categories, as defined in the \"about\" section of the information modal. You can access it by clicking on \"about\" next to the DVRPC logo on the navbar.
\r\nThis chart shows people involved in {crashType} crashes in {area} by mode from {from} to {to}. Pedestrians and bicyclists are often a focus of transportation safety planning efforts because they are the road users most vulnerable to severe injuries in the event of a crash. This is reflected in data that consistently shows pedestrians account for a disproportionate number of the injuries sustained on the road.
\r\nThis chart shows {crashType} crashes in {area} by collision type from {from} to {to}. Collision type data can be especially useful for identifying trends at specific locations or along specific routes.
\r\n${index} of ${length}
\r\n \r\nSomething went wrong and the data was unable to be fetched, please try again.
\r\nIf the issue persists, please contact kmurphy@dvrpc.org and let him know the data for crash number ${crn} is not available. Thank you.
\r\n `\r\n}\r\n\r\nexport { getPopupInfo, setPopup, catchPopupFail }","const createBoundaryHighlight = boundingObj => {\r\n let { type, id } = {...boundingObj}\r\n \r\n // handle PPA (add 100 because reasons...)\r\n if(type === 'philly') id = (parseInt(id) + 100)\r\n \r\n id = id.toString()\r\n\r\n const paintProps = { \r\n layer: `${type}-outline`,\r\n width: [\r\n 'match', ['get', 'geoid'],\r\n id, 4,\r\n 0.5\r\n ],\r\n color: [\r\n 'match', ['get', 'geoid'],\r\n id, '#FAA82D',\r\n '#969696'\r\n ]\r\n }\r\n\r\n return paintProps\r\n}\r\n\r\nconst removeBoundaryFilter = () => {\r\n return {\r\n county: {\r\n layer: 'county-outline',\r\n filter: ['==', 'dvrpc', 'Yes'],\r\n paint: {\r\n width: 1.5,\r\n color: '#969696'\r\n }\r\n },\r\n muni: {\r\n layer: 'municipality-outline',\r\n filter: null,\r\n paint: {\r\n width: 0.5,\r\n color: '#969696'\r\n }\r\n },\r\n philly: {\r\n layer: 'philly-outline',\r\n filter: null,\r\n paint: {\r\n width: 0.5,\r\n color: '#969696'\r\n }\r\n }\r\n }\r\n}\r\n\r\nexport { createBoundaryHighlight, removeBoundaryFilter }","import React, { Component } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { connect } from 'react-redux'\r\nimport mapboxgl from \"mapbox-gl\";\r\nimport MapboxDraw from '@mapbox/mapbox-gl-draw';\r\n\r\nimport * as layers from './layers.js'\r\nimport * as popups from './popups.js';\r\nimport { createBoundaryHighlight, removeBoundaryFilter } from './boundaryFilters.js';\r\nimport { getDataFromKeyword, setSidebarHeaderContext, getBoundingBox, setMapBounding, setMapFilter, getPolygonCrashes, setPolygonBbox, removePolyCRNS, urlRoute, defaultRange } from '../../redux/reducers/mapReducer.js'\r\n\r\nimport './map.css';\r\n\r\nclass Map extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n boundary: null,\r\n polygon: false,\r\n popup: false,\r\n // draw is on local state so that removeBoundary() can access the instance of MapboxDraw to call draw.deleteAll()\r\n draw: new MapboxDraw({\r\n displayControlsDefault: false,\r\n controls: {\r\n polygon: true,\r\n // disable trash because we want the polygons and muni/county boundaries to follow the same flow (i.e. use the 'remove boundary' overlay for both)\r\n trash: false\r\n }\r\n }),\r\n zoom: window.innerWidth <= 420 ? 7.3 : 8.3,\r\n route: urlRoute\r\n }\r\n }\r\n \r\n\r\n /**********************/\r\n // Lifecycle Methods //\r\n /**********************/\r\n componentDidMount() {\r\n // mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN\r\n mapboxgl.accessToken = 'pk.eyJ1IjoiY3J2YW5wb2xsYXJkIiwiYSI6Ii00ZklVS28ifQ.Ht4KwAM3ZUjo1dT2Erskgg'\r\n \r\n // @NOTE: do not delete this comment:\r\n // eslint-disable-next-line import/no-webpack-loader-syntax\r\n mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default //fix bable transpiling issues\r\n \r\n const longitudeOffset = window.innerWidth > 800 ? -75.80 : -75.2273\r\n \r\n // initialize the map\r\n this.map = new mapboxgl.Map({\r\n container: this.crashMap,\r\n style: 'mapbox://styles/mapbox/dark-v11',\r\n center: [longitudeOffset, 40.071],\r\n zoom: this.state.zoom,\r\n //@Note: this is a performance hit but necessary to export the map canvas for printing\r\n preserveDrawingBuffer: true\r\n })\r\n\r\n // add navigation, draw tool, extent and filter buttons\r\n const navControl = new mapboxgl.NavigationControl()\r\n this.map.addControl(navControl)\r\n this.map.addControl(this.state.draw, 'top-right')\r\n\r\n // add DVRPC regional outlines + crash data heat map\r\n this.map.on('load', () => {\r\n this.map.addSource(\"Boundaries\" , {\r\n type: 'vector',\r\n url: 'https://tiles.dvrpc.org/data/dvrpc-municipal.json',\r\n promoteId: 'geoid'\r\n })\r\n\r\n this.map.addSource(\"Crashes\", {\r\n type: 'vector',\r\n url: 'https://tiles.dvrpc.org/data/crash.json',\r\n promoteId: 'id'\r\n })\r\n\r\n this.map.addSource(\"PPA\", {\r\n type: 'geojson',\r\n data: 'https://arcgis.dvrpc.org/portal/rest/services/Boundaries/DVRPC_MCD_PhiCPA/FeatureServer/0/query?where=co_name%3D%27Philadelphia%27&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&distance=&units=esriSRUnit_Foot&relationParam=&outFields=geoid&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&gdbVersion=&historicMoment=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=xyFootprint&resultOffset=&resultRecordCount=&returnTrueCurves=false&returnExceededLimitFeatures=false&quantizationParameters=&returnCentroid=false&sqlFormat=none&resultType=&featureEncoding=esriDefault&datumTransformation=&f=geojson'\r\n })\r\n\r\n // Find the index of the first symbol layer in the map style. (from mapbox docs)\r\n const mapLayers = this.map.getStyle().layers;\r\n let firstSymbolId;\r\n\r\n for (const layer of mapLayers) {\r\n if (layer.type === 'symbol') {\r\n firstSymbolId = layer.id;\r\n break;\r\n }\r\n }\r\n\r\n // add county boundaries beneath road labels in streets v-12 spec\r\n this.map.addLayer(layers.countyOutline, 'settlement-subdivision-label')\r\n this.map.addLayer(layers.countyFill, firstSymbolId)\r\n\r\n // add municipal boundaries beneath road labels in streets-v12 spec\r\n this.map.addLayer(layers.municipalityOutline, 'settlement-subdivision-label')\r\n this.map.addLayer(layers.municipalityFill, firstSymbolId)\r\n\r\n // add PPA's\r\n this.map.addLayer(layers.phillyOutline, 'settlement-subdivision-label')\r\n\r\n // add crash data layers beneath relevant layers in streets-v12 spec\r\n this.map.addLayer(layers.crashHeat, 'settlement-subdivision-label')\r\n this.map.addLayer(layers.crashCircles, 'settlement-subdivision-label')\r\n\r\n // listen for routing on load\r\n const geoParams = this.state.route.searchParams.get('geom')\r\n const filterParams = this.state.route.searchParams.get('filter')\r\n\r\n if(geoParams) this.handleRoute({geoParams, filterParams})\r\n })\r\n\r\n // variables for hover state\r\n let hoveredCircle = null\r\n \r\n // add hover effect to geographies\r\n this.map.on('mousemove', 'municipality-fill', e => this.hoverGeographyFill(e))\r\n this.map.on('mouseleave', 'municipality-fill', () => this.removeGeographyFill())\r\n this.map.on('mousemove', 'county-fill', e => this.hoverGeographyFill(e))\r\n this.map.on('mouseleave', 'county-fill', () => this.removeGeographyFill())\r\n\r\n // handle click events\r\n this.map.on('click', 'municipality-fill', e => this.clickGeography(e))\r\n this.map.on('click', 'county-fill', e => this.clickGeography(e))\r\n this.map.on('click', 'crash-circles', e => {\r\n const features = e.features\r\n\r\n // extract array of crn and severity for all crashes at that clicked point\r\n const crnArray = features.map(crash => { return {crn: crash.properties.id, severity: crash.properties.max_sever} })\r\n let index = 0\r\n\r\n // initialize the mapbox popup object\r\n const popup = new mapboxgl.Popup({\r\n closebutton: true,\r\n closeOnClick: true\r\n }).setLngLat(e.lngLat)\r\n\r\n // create popup and handle pagination if necessary\r\n this.handlePopup(crnArray, index, popup)\r\n\r\n // put popup state on local state\r\n this.setState({popup: popup})\r\n })\r\n \r\n // update legend depending on zoom level (heatmap vs crash circles)\r\n this.map.on('zoomend', () => this.updateLegend())\r\n\r\n this.map.on('mousemove', 'crash-circles', e => {\r\n this.map.getCanvas().style.cursor = 'pointer'\r\n\r\n if(hoveredCircle){\r\n this.map.removeFeatureState({\r\n source: 'Crashes',\r\n sourceLayer: 'crash',\r\n id: hoveredCircle\r\n })\r\n }\r\n \r\n hoveredCircle = e.features[0].id\r\n \r\n this.map.setFeatureState(\r\n {\r\n source: 'Crashes',\r\n sourceLayer: 'crash',\r\n id: hoveredCircle\r\n },\r\n {\r\n hover: true\r\n }\r\n )\r\n })\r\n\r\n this.map.on('mouseleave', 'crash-circles', () => {\r\n if (hoveredCircle) {\r\n this.map.removeFeatureState({\r\n source: 'Crashes',\r\n sourceLayer: 'crash',\r\n id: hoveredCircle\r\n })\r\n }\r\n \r\n hoveredCircle = null;\r\n\r\n this.map.getCanvas().style.cursor = ''\r\n })\r\n\r\n // mutes other map other event listeners when the polygon draw tool is selected (shorts out when user finishes drawing b/c that also calls this function)\r\n this.map.on('draw.modechange', e => e.mode !== 'draw_polygon' ? null : this.setState({polygon: true}))\r\n\r\n // this fires after the polygon is done (i.e. double click to close polygon)\r\n this.map.on('draw.create', e => {\r\n const bbox = e.features[0].geometry.coordinates[0]\r\n this.props.setSidebarHeaderContext('Selected Area')\r\n this.handleBbox(bbox)\r\n this.showBoundaryOverlay()\r\n })\r\n\r\n // this fires when the polygon updates (for our use case, if it's moved via dragging)\r\n this.map.on('draw.update', e => {\r\n const bbox = e.features[0].geometry.coordinates[0]\r\n this.props.setSidebarHeaderContext('Selected Area')\r\n this.handleBbox(bbox)\r\n })\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n // set form filters (crash type and range) to prevProps or default value to hold on to state if a recalculation doesn't occur\r\n const prevType = prevProps.crashType || 'KSI'\r\n const prevRange = prevProps.range || defaultRange\r\n let makeNewFilter = false\r\n\r\n const filterObj = {\r\n filterType: prevType,\r\n boundary: false,\r\n tileType: '',\r\n id: 0,\r\n range: prevRange\r\n }\r\n\r\n // add crashType filters & update legend\r\n if(this.props.crashType !== prevProps.crashType) {\r\n const crashType = this.props.crashType\r\n filterObj.filterType = crashType\r\n makeNewFilter = true\r\n this.updateLegend()\r\n }\r\n\r\n // add range filters\r\n if(this.props.range){\r\n const {to, from} = this.props.range\r\n\r\n // set range if first time or new range\r\n if(prevProps.range){\r\n const prevRange = prevProps.range\r\n const prevFrom = prevRange.from\r\n const prevTo = prevRange.to\r\n\r\n if(prevTo !== to || prevFrom !== from) {\r\n filterObj.range = {to, from}\r\n makeNewFilter = true\r\n }\r\n } else{\r\n filterObj.range = {to, from}\r\n makeNewFilter = true\r\n }\r\n }\r\n\r\n // update store filters\r\n if(makeNewFilter) {\r\n if(this.state.boundary) {\r\n const boundary = this.state.boundary\r\n filterObj.id = boundary.id\r\n filterObj.tileType = boundary.tileType\r\n filterObj.boundary = true\r\n }\r\n this.props.setMapFilter(filterObj)\r\n }\r\n\r\n // apply filters\r\n if(this.props.filter){\r\n let filter = this.props.filter === 'none' ? null : this.props.filter\r\n\r\n this.map.setFilter('crash-circles', filter)\r\n this.map.setFilter('crash-heat', filter)\r\n }\r\n\r\n // add boundaries and their corresponding filters/styles/sidebar stats\r\n if(this.props.bounding !== prevProps.bounding) {\r\n const { county, muni, philly } = removeBoundaryFilter()\r\n\r\n this.map.setFilter(county.layer, county.filter)\r\n this.map.setFilter(muni.layer, muni.filter)\r\n this.map.setFilter(philly.layer, philly.filter)\r\n\r\n this.map.setPaintProperty(county.layer, 'line-width', county.paint.width)\r\n this.map.setPaintProperty(county.layer, 'line-color', county.paint.color)\r\n this.map.setPaintProperty(muni.layer, 'line-width', muni.paint.width)\r\n this.map.setPaintProperty(muni.layer, 'line-color', muni.paint.color)\r\n this.map.setPaintProperty(philly.layer, 'line-width', philly.paint.width)\r\n this.map.setPaintProperty(philly.layer, 'line-color', philly.paint.color)\r\n\r\n // create new filter\r\n const boundingObj = this.props.bounding\r\n\r\n this.setBoundary(boundingObj)\r\n this.showBoundaryOverlay()\r\n\r\n // update map filter & circle toggle state when coming from search\r\n if(boundingObj.filter) {\r\n const toggleFilter = boundingObj.filter\r\n this.props.setMapFilter(toggleFilter)\r\n this.setState({boundary: toggleFilter})\r\n }\r\n }\r\n\r\n // apply polygon filter (special case)\r\n if(this.props.polyCRNS) {\r\n const fail = this.props.polyCRNS.message\r\n let crashType = this.props.crashType || 'KSI'\r\n let range = this.props.range || defaultRange\r\n let polygonFilter = fail ? ['all', ['in', 'id', '' ]] : ['all', ['in', 'id', ...this.props.polyCRNS]]\r\n\r\n // add range\r\n if(range) {\r\n const {from, to} = range\r\n const rangeFilter = [\r\n ['>=', 'year', parseInt(from)],\r\n ['<=', 'year', parseInt(to)] \r\n ]\r\n polygonFilter = polygonFilter.concat(rangeFilter)\r\n }\r\n\r\n // add crashtype\r\n if(crashType === 'KSI') {\r\n const ksiFilter = [\r\n ['>', 'max_sever', -1],\r\n ['<', 'max_sever', 2],\r\n ]\r\n polygonFilter = polygonFilter.concat(ksiFilter)\r\n }\r\n \r\n this.map.setFilter('crash-circles', polygonFilter)\r\n this.map.setFilter('crash-heat', polygonFilter)\r\n }\r\n\r\n // zoom to a new center when appropriate (address searches)\r\n if(prevProps.center !== this.props.center) {\r\n this.map.flyTo({\r\n center: this.props.center,\r\n zoom: 12,\r\n speed: 0.9,\r\n curve: 1.7\r\n })\r\n }\r\n\r\n // zoom to a bounding box when appropriate (all non-address searches)\r\n if(this.props.bbox && prevProps.bbox !== this.props.bbox) {\r\n if( window.innerWidth > 800 ) {\r\n // handle desktop offset\r\n const leftPad = (window.innerWidth * 0.33 + 30)\r\n const padding = {top: 30, bottom: 30, left: leftPad, right: 30}\r\n\r\n this.map.fitBounds(this.props.bbox, {padding})\r\n } else {\r\n this.map.fitBounds(this.props.bbox)\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.map.remove()\r\n }\r\n\r\n \r\n /*****************/\r\n // Class Methods //\r\n /*****************/\r\n // reset map to default view\r\n resetControl = () => {\r\n const longitudeOffset = window.innerWidth > 800 ? -75.80 : -75.2273\r\n this.map.flyTo({center: [longitudeOffset, 40.071], zoom: this.state.zoom, pitch: 0})\r\n }\r\n\r\n // reveal the boundary overlay when a boundary is established\r\n showBoundaryOverlay = () => this.boundaryOverlay.classList.remove('hidden')\r\n\r\n // apply boundary filters and map styles\r\n setBoundary = boundaryObj => {\r\n \r\n // derive layer styles from boundaryObj\r\n const highlight = createBoundaryHighlight(boundaryObj)\r\n \r\n // make the appropraite paint changes\r\n this.map.setPaintProperty(highlight.layer, 'line-width', highlight.width)\r\n this.map.setPaintProperty(highlight.layer, 'line-color', highlight.color)\r\n\r\n // remove any existing polygons\r\n if(this.state.polygon){\r\n this.state.draw.deleteAll()\r\n this.props.removePolyCRNS()\r\n this.setState( { polygon: false })\r\n }\r\n }\r\n\r\n // hide the boundary overlay and reset map filters, styles and sidebar info to default\r\n removeBoundary = () => {\r\n // toggle overlay visibility\r\n this.boundaryOverlay.classList.add('hidden')\r\n\r\n // remove any existing polygons & empty polyCRNS state object\r\n if(this.state.polygon){\r\n this.state.draw.deleteAll()\r\n this.props.removePolyCRNS()\r\n }\r\n\r\n // update sidebar information\r\n let newFilterType;\r\n \r\n if(this.state.polygon) {\r\n newFilterType = this.props.crashType || 'KSI'\r\n } else {\r\n newFilterType = this.state.route.searchParams.get('filter')\r\n }\r\n\r\n let isKSI = newFilterType === 'KSI' ? 'yes' : 'no'\r\n\r\n const regionalStats = {geoID: '', isKSI}\r\n\r\n this.props.setDefaultState(regionalStats)\r\n this.props.setSidebarHeaderContext('the DVRPC region')\r\n\r\n // get default map filters and paint properties\r\n const { county, muni, philly } = removeBoundaryFilter()\r\n\r\n // remove filter while maintaining crash type filter (all or ksi)\r\n const range = this.props.range || defaultRange\r\n const filterObj = {filterType: newFilterType, range}\r\n\r\n // set store filter state\r\n // @UPDATe DONT touch this\r\n this.props.setMapFilter(filterObj)\r\n\r\n // update map\r\n this.map.setPaintProperty(county.layer, 'line-width', county.paint.width)\r\n this.map.setPaintProperty(county.layer, 'line-color', county.paint.color)\r\n this.map.setPaintProperty(muni.layer, 'line-width', muni.paint.width)\r\n this.map.setPaintProperty(muni.layer, 'line-color', muni.paint.color)\r\n this.map.setPaintProperty(philly.layer, 'line-width', philly.paint.width)\r\n this.map.setPaintProperty(philly.layer, 'line-color', philly.paint.color)\r\n \r\n // update boundary state to allow hover effects now that boundaries are removed & update polygon state to enable normal event listener interaction\r\n this.setState({\r\n boundary: null,\r\n polygon: false\r\n })\r\n\r\n // remove route\r\n this.state.route.searchParams.delete('geom')\r\n window.history.replaceState(null, null, window.location.pathname)\r\n }\r\n\r\n // add fill effect when hovering over a geography type (county or municipality)\r\n hoverGeographyFill = (e) => {\r\n // escape if a boundary is set or if the user is drawing a polygon\r\n if(this.state.boundary || this.state.polygon) return\r\n \r\n let features = e.features\r\n \r\n if(features.length > 0 ) {\r\n features = features[0]\r\n const sourceLayer = this.map.getZoom() < 8.4 ? 'county' : 'municipalities'\r\n const name = sourceLayer === 'county' ? features.properties.name + ' County' : features.properties.name\r\n\r\n // clear hover state\r\n this.map.removeFeatureState({\r\n source: 'Boundaries',\r\n sourceLayer\r\n })\r\n \r\n // update hover state\r\n this.map.setFeatureState(\r\n {source: 'Boundaries', sourceLayer, id: features.id},\r\n {hover: true}\r\n )\r\n\r\n // update the overlay text\r\n this.hoveredArea.style.visibility = 'visible'\r\n this.hoveredArea.children[0].textContent = name\r\n }\r\n }\r\n\r\n // remove fill effect when exiting the layer\r\n removeGeographyFill = () => {\r\n let sourceLayer = this.map.getZoom() < 8.4 ? 'county' : 'municipalities'\r\n\r\n this.map.removeFeatureState({\r\n source: 'Boundaries',\r\n sourceLayer\r\n })\r\n \r\n this.hoveredArea.style.visibility = 'hidden'\r\n }\r\n\r\n // draw a boundary, zoom to, filter crash data and update sidebar on muni click\r\n clickGeography = e => { \r\n // exit if an active geom exists\r\n if(this.state.polygon || this.state.boundary) return\r\n\r\n // exit & update state if popup exists b/c this will also close the popup\r\n if(this.state.popup) {\r\n this.setState({popup: false})\r\n return\r\n }\r\n \r\n // short out if a user clicks on a crash circle \r\n const circleTest = this.map.queryRenderedFeatures(e.point)[0]\r\n if(circleTest.source === 'Crashes') return\r\n \r\n // get source layer and exit if the wrong one is triggered\r\n let sourceLayer = this.map.getZoom() < 8.4 ? 'county' : 'municipality'\r\n const features = e.features[0]\r\n if(sourceLayer[0] !== features.sourceLayer[0]) return\r\n \r\n // get feature properties\r\n const props = features.properties\r\n const name = props.name\r\n const featureID = features.id\r\n let geoID = features.properties.geoid\r\n\r\n // get KSI and range state from store\r\n const range = this.props.range || defaultRange\r\n const newFilterType = this.props.crashType || 'KSI'\r\n let isKSI = newFilterType === 'KSI' ? 'yes' : 'no'\r\n\r\n // set layer-dependent variables\r\n let tileType;\r\n let countyName;\r\n if(sourceLayer === 'county'){\r\n tileType = 'c'\r\n countyName = `${name} County`\r\n }else {\r\n tileType = 'm'\r\n }\r\n\r\n // handle philly edge case\r\n const phillyTest = name.substring(0, 5)\r\n if(phillyTest === 'Phila') {\r\n geoID = 42101\r\n tileType = 'c'\r\n sourceLayer = 'county'\r\n }\r\n \r\n // create data, filter and boundary objects\r\n const dataObj = { geoID, isKSI }\r\n const boundaryObj = { type: sourceLayer, id: geoID }\r\n const filterObj = {filterType: newFilterType, tileType, id: geoID, range, boundary: true}\r\n\r\n // dispatch actions to: set sidebar header, fetch the data and create a bounding box for the selected area\r\n this.props.setSidebarHeaderContext(countyName || name)\r\n this.props.getData(dataObj)\r\n this.props.setMapBounding(boundaryObj)\r\n this.props.getBoundingBox(geoID)\r\n this.props.setMapFilter(filterObj)\r\n\r\n // use featureID to remove the muni fill that hovering created\r\n this.removeGeographyFill(featureID)\r\n\r\n // hide the hover boundary\r\n this.hoveredArea.style.visibility = 'hidden'\r\n\r\n // update boundary state to prevent hover effects when boundaries are present & so the ksi/all toggle can stay within the set bounds\r\n this.setState({boundary: filterObj})\r\n\r\n // set URL state\r\n this.state.route.searchParams.set('filter', newFilterType)\r\n this.state.route.searchParams.set('geom', `${geoID},${sourceLayer},${encodeURI(name)}`)\r\n\r\n window.history.replaceState(null, null, `?geom=${geoID},${sourceLayer},${encodeURI(name)}&filter=${newFilterType}`)\r\n }\r\n\r\n // create bbox object from polygon & hit endpoints w/it\r\n handleBbox = bbox => {\r\n const bboxFormatted = encodeURIComponent(JSON.stringify(\r\n {\r\n \"type\":\"Polygon\",\r\n \"coordinates\": [bbox],\r\n \"crs\": {\r\n \"type\": \"name\",\r\n \"properties\": {\r\n \"name\": \"EPSG:4326\"\r\n }\r\n }\r\n }\r\n ))\r\n \r\n let typeCheck = this.props.crashType || 'KSI'\r\n let isKSI = typeCheck === 'KSI' ? 'yes' : 'no'\r\n\r\n // create data object for API call\r\n const dataObj = {\r\n geojson: bboxFormatted,\r\n isKSI\r\n }\r\n\r\n // update store w/bbox info\r\n this.props.getPolygonCrashes(bboxFormatted)\r\n this.props.getData(dataObj)\r\n this.props.setPolygonBbox(bboxFormatted)\r\n }\r\n\r\n // handle popup creation and pagination\r\n handlePopup = async (crnArray, index, popup) => {\r\n const length = crnArray.length\r\n const popupInfo = popups.getPopupInfo(crnArray[index])\r\n\r\n const html = await popupInfo.then(result => {\r\n const current = index + 1\r\n\r\n // create popup content (success or fail)\r\n if(result.fail){\r\n // remove the state code from the CRN for printing\r\n const crnOutput = result.crn.substring(2)\r\n return popups.catchPopupFail(crnOutput)\r\n }else{\r\n return popups.setPopup(result, current, length)\r\n }\r\n })\r\n\r\n // set popup\r\n popup.setHTML(html).addTo(this.map)\r\n\r\n // handle pagination if necessary\r\n if (length > 1) {\r\n let nextPopup, previousPopup\r\n\r\n // get a handle on the buttons\r\n const node = ReactDOM.findDOMNode(this)\r\n if (node instanceof HTMLElement) {\r\n const wrapper = node.querySelector('.mapboxgl-popup')\r\n nextPopup = wrapper.querySelector('#crash-next-popup')\r\n previousPopup = wrapper.querySelector('#crash-previous-popup')\r\n } else{\r\n console.log('pagination function failed to find map node')\r\n return\r\n }\r\n\r\n // add next click handler\r\n nextPopup.onclick = () => {\r\n index + 1 >= length ? index = 0 : index += 1\r\n this.handlePopup(crnArray, index, popup)\r\n }\r\n\r\n // add previous click handler\r\n previousPopup.onclick = () => {\r\n index - 1 < 0 ? index = length - 1 : index -= 1\r\n this.handlePopup(crnArray, index, popup)\r\n }\r\n }\r\n }\r\n\r\n updateLegend = () => {\r\n const zoom = this.map.getZoom()\r\n\r\n if(zoom >= 11) {\r\n this.legendTitle.textContent = 'Crash Severity'\r\n\r\n if(!this.props.crashType || this.props.crashType === 'KSI') {\r\n this.legendGradient.style.background = 'linear-gradient(to right, #e67e88, #de5260, #c12433)'\r\n this.legendLabel.innerHTML = 'Severe InjuryFatal'\r\n\r\n }else {\r\n this.legendGradient.style.background = 'linear-gradient(to right, #f7f7f7, #93c7db, #6eb5cf, #4ba3c3, #e67e88, #de5260, #c12433)'\r\n this.legendLabel.innerHTML = 'No InjuryFatal'\r\n }\r\n\r\n } else {\r\n let crashType = this.props.crashType || 'KSI'\r\n this.legendTitle.textContent = `Number of Crashes (${crashType})`\r\n this.legendGradient.style.background = 'linear-gradient(to right, #feebe2, #fcc5c0, #c51b8a, #7a0177)'\r\n this.legendLabel.innerHTML = '148+'\r\n }\r\n }\r\n\r\n handleRoute = params => {\r\n /* @params:\r\n {\r\n geoParams: geoid,sourceLayer,name,\r\n filterParams: filter\r\n }\r\n */\r\n const geo = params.geoParams.split(',')\r\n \r\n // get feature properties\r\n let tileType;\r\n let countyName;\r\n let geoID = geo[0]\r\n let sourceLayer = geo[1]\r\n\r\n const name = decodeURIComponent(geo[2])\r\n const newFilterType = params.filterParams\r\n const range = defaultRange\r\n let isKSI = newFilterType === 'KSI' ? 'yes' : 'no'\r\n\r\n if(sourceLayer === 'county'){\r\n tileType = 'c'\r\n countyName = `${name} County`\r\n }else {\r\n tileType = 'm'\r\n }\r\n\r\n // handle philly edge case\r\n const phillyTest = name.substring(0, 5)\r\n if(phillyTest === 'Phila') {\r\n geoID = 42101\r\n tileType = 'c'\r\n sourceLayer = 'county'\r\n }\r\n \r\n // create data, filter and boundary objects\r\n const dataObj = { geoID, isKSI }\r\n const boundaryObj = { type: sourceLayer, id: geoID }\r\n const filterObj = {filterType: newFilterType, tileType, id: geoID, range, boundary: true}\r\n\r\n // dispatch actions to: set sidebar header, fetch the data and create a bounding box for the selected area\r\n this.props.setSidebarHeaderContext(countyName || name)\r\n this.props.getData(dataObj)\r\n this.props.setMapBounding(boundaryObj)\r\n this.props.getBoundingBox(geoID)\r\n this.props.setMapFilter(filterObj)\r\n\r\n // update boundary state to prevent hover effects when boundaries are present & so the ksi/all toggle can stay within the set bounds\r\n this.setState({boundary: filterObj})\r\n }\r\n\r\n render() {\r\n let crashType = this.props.crashType || 'KSI'\r\n \r\n return (\r\n
\r\n 
\r\n This tool's default setting is limited to five years of killed and severe injury crashes (abbreviated as \"KSI\") for {defaultFrom} to {defaultTo}. Five years of data is typically used by local, state, and federal partners in safety analyses.
\r\nThe following tables are showing results for {crashType} crash types from {from} to {to}.
\r\nRaw crash data tables for this tool were downloaded from the PennDOT Crash Download Map and the NJDOT Crash Tables webpage, for Pennsylvania and New Jersey data, respectively.
\r\n \r\n| Year | \r\nNumber of Crashes | \r\n
|---|---|
| {trendLabels[index]} | \r\n{data.toLocaleString()} | \r\n
This table shows {crashType} crashes in {area} by crash severity from {from} to {to}. Crash trends can be useful for identifying if the frequency of crashes is increasing or decreasing over time, but it is important not to infer patterns from single-year spikes or drops in crashes or in datasets with limited data points.
\r\n\r\n| {data} | ))}\r\n
|---|
| {data.toLocaleString()} | ))}\r\n
This table shows people involved in {crashType} crashes in {area} by crash severity from {from} to {to}. Injury severity is divided into seven possible categories, as defined in the \"About\" section of the information modal.
\r\n\r\n| {data} | ))}\r\n
|---|
| {data.toLocaleString()} | ))}\r\n
This table shows people involved in {crashType} crashes in the {area} by mode from {from} to {to}. Pedestrians and bicyclists are often a focus of transportation safety planning efforts because they are the road users most vulnerable to sever injuries in the event of a crash. This is reflected in data that consistently shows pedestrians account for a disproportionate number of the injuries sustained on the road.
\r\n \r\n| {data} | ))}\r\n
|---|
| {data.toLocaleString()} | ))}\r\n
This table shows {crashType} crashes in {area} by collision type from {from} to {to}. Collision type data can be especially useful for identifying trends at specific locations or along specific routes.
\r\n