diff --git a/example-config.yml b/example-config.yml
index 123383bcd..ec5f97ae0 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -409,3 +409,8 @@ dateTime:
 #   # Whether to render routes within flex zones of a route's patterns. If set to true,
 #   # routes will not be rendered within flex zones.
 #   hideRouteShapesWithinFlexZones: true
+
+# API key to make Mapillary API calls. These are used to show street imagery.
+# Mapillary calls these "Client Tokens". They can be created at https://www.mapillary.com/dashboard/developers
+# mapillary:
+#   key: <Mapillary Key>
diff --git a/lib/actions/map.js b/lib/actions/map.js
index 5db88e68f..310d66233 100644
--- a/lib/actions/map.js
+++ b/lib/actions/map.js
@@ -131,6 +131,7 @@ export function switchLocations() {
 }
 
 export const setLegDiagram = createAction('SET_LEG_DIAGRAM')
+export const setMapillaryId = createAction('SET_MAPILLARY_ID')
 
 export const setElevationPoint = createAction('SET_ELEVATION_POINT')
 
diff --git a/lib/components/map/map.css b/lib/components/map/map.css
index 77652d126..2cb3349b7 100644
--- a/lib/components/map/map.css
+++ b/lib/components/map/map.css
@@ -15,7 +15,7 @@
 }
 
 .otp .link-button:focus {
-  outline:0;
+  outline: 0;
 }
 
 /* leg diagram */
@@ -29,8 +29,8 @@
   z-index: 1000;
   background-color: white;
   background-clip: padding-box;
-  border: 2px solid rgba(127, 127, 127, .5);
-  border-Radius: 4px;
+  border: 2px solid rgba(127, 127, 127, 0.5);
+  border-radius: 4px;
   cursor: crosshair;
 }
 
@@ -64,6 +64,22 @@
   background: none;
 }
 
+.otp .leg-diagram .mapillary-close-button {
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 0 0 1em;
+  display: block;
+  left: 0;
+  max-width: 40px;
+  padding: 0.5em;
+  position: absolute;
+  top: 0;
+  z-index: 10000;
+}
+.otp .leg-diagram .mapillary-close-button:hover {
+  background: rgba(200, 200, 200, 0.85);
+  color: #333;
+}
+
 /*** Car Rental Map Icons ***/
 
 .otp .car-rental-icon {
diff --git a/lib/components/map/map.js b/lib/components/map/map.js
index 12e01609e..4b8ca41e2 100644
--- a/lib/components/map/map.js
+++ b/lib/components/map/map.js
@@ -1,43 +1,56 @@
-import React, { Component } from 'react'
+/* eslint-disable react/prop-types */
+// TODO: Typescript (config object)
+import { Button, ButtonGroup } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import { ButtonGroup, Button } from 'react-bootstrap'
+import React, { Component } from 'react'
+
+import { setMapillaryId } from '../../actions/map'
 
 import DefaultMap from './default-map'
 import LegDiagram from './leg-diagram'
+import MapillaryFrame from './mapillary-frame'
 import StylizedMap from './stylized-map'
 
 class Map extends Component {
-  constructor () {
+  constructor() {
     super()
     this.state = {
       activeViewIndex: 0
     }
   }
 
-  getComponentForView (view) {
+  getComponentForView(view) {
     // TODO: allow a 'CUSTOM' type
     switch (view.type) {
-      case 'DEFAULT': return <DefaultMap />
-      case 'STYLIZED': return <StylizedMap />
+      case 'DEFAULT':
+        return <DefaultMap />
+      case 'STYLIZED':
+        return <StylizedMap />
     }
   }
 
-  render () {
-    const { diagramLeg, mapConfig } = this.props
+  render() {
+    const { activeMapillaryImage, diagramLeg, mapConfig, setMapillaryId } =
+      this.props
 
     const showDiagram = diagramLeg
+    const showMapillary = activeMapillaryImage
 
     // Use the views defined in the config; if none defined, just show the default map
     const views = mapConfig.views || [{ type: 'DEFAULT' }]
 
     return (
-      <div className='map-container'>
+      <div className="map-container">
         {/* The map views -- only one is visible at a time */}
         {views.map((view, i) => {
           return (
-            <div className='map-container'
+            <div
+              className="map-container"
               key={i}
-              style={{ visibility: i === this.state.activeViewIndex ? 'visible' : 'hidden' }}
+              style={{
+                visibility:
+                  i === this.state.activeViewIndex ? 'visible' : 'hidden'
+              }}
             >
               {this.getComponentForView(view)}
             </div>
@@ -46,15 +59,26 @@ class Map extends Component {
 
         {/* The toggle buttons -- only show if multiple views */}
         {views.length > 1 && (
-          <div style={{ bottom: 12 + (showDiagram ? 192 : 0), left: 12, position: 'absolute', zIndex: 100000 }}>
+          <div
+            style={{
+              bottom: 12 + (showDiagram ? 192 : 0),
+              left: 12,
+              position: 'absolute',
+              zIndex: 100000
+            }}
+          >
             <ButtonGroup>
               {views.map((view, i) => {
                 return (
                   <Button
-                    bsSize='xsmall'
-                    bsStyle={i === this.state.activeViewIndex ? 'success' : 'default'}
+                    bsSize="xsmall"
+                    bsStyle={
+                      i === this.state.activeViewIndex ? 'success' : 'default'
+                    }
                     key={i}
-                    onClick={() => { this.setState({ activeViewIndex: i }) }}
+                    onClick={() => {
+                      this.setState({ activeViewIndex: i })
+                    }}
                     style={{ padding: '3px 6px' }}
                   >
                     {view.text || view.type}
@@ -67,6 +91,12 @@ class Map extends Component {
 
         {/* The leg diagram overlay, if active */}
         {showDiagram && <LegDiagram leg={diagramLeg} />}
+        {showMapillary && (
+          <MapillaryFrame
+            id={activeMapillaryImage}
+            onClose={() => setMapillaryId(null)}
+          />
+        )}
       </div>
     )
   }
@@ -76,9 +106,14 @@ class Map extends Component {
 
 const mapStateToProps = (state, ownProps) => {
   return {
+    activeMapillaryImage: state.otp.ui.mapillaryId,
     diagramLeg: state.otp.ui.diagramLeg,
     mapConfig: state.otp.config.map
   }
 }
 
-export default connect(mapStateToProps)(Map)
+const mapDispatchToProps = {
+  setMapillaryId
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Map)
diff --git a/lib/components/map/mapillary-frame.tsx b/lib/components/map/mapillary-frame.tsx
new file mode 100644
index 000000000..795f8d48a
--- /dev/null
+++ b/lib/components/map/mapillary-frame.tsx
@@ -0,0 +1,55 @@
+import { Button } from 'react-bootstrap'
+import React, { useEffect, useState } from 'react'
+
+// eslint-disable-next-line sort-imports-es6-autofix/sort-imports-es6
+import Icon from '../util/icon'
+
+const MapillaryFrame = ({
+  id,
+  onClose
+}: {
+  id: string
+  onClose?: () => void
+}): React.ReactElement => {
+  const [fakeLoad, setFakeLoad] = useState(false)
+  useEffect(() => {
+    // If the ID changed, show a "fake" loading screen to indicate to the user
+    // something is happening
+    setFakeLoad(true)
+    setTimeout(() => setFakeLoad(false), 750)
+  }, [id])
+
+  return (
+    <div className="leg-diagram" style={{ height: '50vh', zIndex: 999 }}>
+      <div
+        style={{
+          alignItems: 'center',
+          display: fakeLoad ? 'flex' : 'none',
+          height: '100%',
+          justifyContent: 'center'
+        }}
+      >
+        <Icon className="fa-spin" type="spinner" />
+      </div>
+      <iframe
+        frameBorder="0"
+        src={`https://www.mapillary.com/embed?image_key=${id}&style=photo`}
+        style={{
+          display: fakeLoad ? 'none' : 'block',
+          height: '100%',
+          width: '100%'
+        }}
+        title="Imagery of the street"
+      />
+      <Button
+        aria-label="Close"
+        className="mapillary-close-button close-button clear-button-formatting"
+        onClick={onClose}
+      >
+        <i className="fa fa-close" />
+      </Button>
+    </div>
+  )
+}
+
+export default MapillaryFrame
diff --git a/lib/components/narrative/default/access-leg.js b/lib/components/narrative/default/access-leg.js
index 017edd06a..3837510f5 100644
--- a/lib/components/narrative/default/access-leg.js
+++ b/lib/components/narrative/default/access-leg.js
@@ -1,28 +1,30 @@
-import coreUtils from '@opentripplanner/core-utils'
+import { FormattedMessage } from 'react-intl'
 import { humanizeDistanceString } from '@opentripplanner/humanize-distance'
+import coreUtils from '@opentripplanner/core-utils'
 import PropTypes from 'prop-types'
-import React, {Component} from 'react'
-import { FormattedMessage } from 'react-intl'
+import React, { Component } from 'react'
 
-import Icon from '../../util/icon'
-import Strong from '../../util/strong-text'
-import FormattedMode from '../../util/formatted-mode'
 import FormattedDuration from '../../util/formatted-duration'
+import FormattedMode from '../../util/formatted-mode'
+import Icon from '../../util/icon'
 import LegDiagramPreview from '../leg-diagram-preview'
+import Strong from '../../util/strong-text'
 
 /**
  * Default access leg component for narrative itinerary.
  */
 export default class AccessLeg extends Component {
   static propTypes = {
+    active: PropTypes.bool,
     activeStep: PropTypes.number,
+    index: PropTypes.number,
     leg: PropTypes.object,
     setActiveLeg: PropTypes.func,
     setActiveStep: PropTypes.func
   }
 
   _onLegClick = (e) => {
-    const {active, index, leg, setActiveLeg} = this.props
+    const { active, index, leg, setActiveLeg } = this.props
     if (active) {
       setActiveLeg(null)
     } else {
@@ -30,7 +32,7 @@ export default class AccessLeg extends Component {
     }
   }
 
-  _onStepClick (e, step, index) {
+  _onStepClick(e, step, index) {
     if (index === this.props.activeStep) {
       this.props.setActiveStep(null)
     } else {
@@ -38,46 +40,53 @@ export default class AccessLeg extends Component {
     }
   }
 
-  render () {
+  render() {
     const { active, activeStep, index, leg } = this.props
     return (
-      <div
-        className={`leg${active ? ' active' : ''} access-leg`}
-        key={index}>
-        <button
-          className='header'
-          onClick={this._onLegClick}>
-          <span><Icon type={`caret-${active ? 'down' : 'right'}`} /></span>
+      <div className={`leg${active ? ' active' : ''} access-leg`} key={index}>
+        <button className="header" onClick={this._onLegClick}>
+          <span>
+            <Icon type={`caret-${active ? 'down' : 'right'}`} />
+          </span>
           <FormattedMessage
-            id='components.AccessLeg.summary'
+            id="components.AccessLeg.summary"
             values={{
               distance: humanizeDistanceString(leg.distance),
-              distanceSpan: contents => <span className='leg-distance'>{contents}</span>,
-              durationSpan: contents => <span className='leg-duration'>{contents}</span>,
+              distanceSpan: (contents) => (
+                <span className="leg-distance">{contents}</span>
+              ),
+              durationSpan: (contents) => (
+                <span className="leg-duration">{contents}</span>
+              ),
               formattedDuration: <FormattedDuration duration={leg.duration} />,
               mode: <FormattedMode mode={leg.mode.toLowerCase()} />,
               strong: Strong
             }}
           />
         </button>
-        {active &&
-          <div className='step-by-step'>
-            <div className='access-leg'>
+        {active && (
+          <div className="step-by-step">
+            <div className="access-leg">
               {leg.steps.map((step, stepIndex) => {
                 const stepIsActive = activeStep === stepIndex
                 return (
                   <button
                     className={`step ${stepIsActive ? 'active' : ''}`}
                     key={stepIndex}
-                    onClick={(e) => this._onStepClick(e, step, stepIndex)}>
-                    <span className='step-distance'>{humanizeDistanceString(step.distance)}</span>
-                    <span className='step-text'>{coreUtils.itinerary.getStepInstructions(step)}</span>
+                    onClick={(e) => this._onStepClick(e, step, stepIndex)}
+                  >
+                    <span className="step-distance">
+                      {humanizeDistanceString(step.distance)}
+                    </span>
+                    <span className="step-text">
+                      {coreUtils.itinerary.getStepInstructions(step)}
+                    </span>
                   </button>
                 )
               })}
             </div>
           </div>
-        }
+        )}
         <LegDiagramPreview leg={leg} />
       </div>
     )
diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index 79b8f167b..a935115b0 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -1,23 +1,29 @@
+/* eslint-disable react/prop-types */
+// TODO: Typescript (otp-rr config object)
+import { connect } from 'react-redux'
+import {
+  PlaceName as PlaceNameWrapper,
+  PlaceRowWrapper
+} from '@opentripplanner/itinerary-body/lib/styled'
 import isEqual from 'lodash.isequal'
-import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/transit-leg-summary'
 import ItineraryBody from '@opentripplanner/itinerary-body/lib/otp-react-redux/itinerary-body'
 import LineColumnContent from '@opentripplanner/itinerary-body/lib/otp-react-redux/line-column-content'
 import PlaceName from '@opentripplanner/itinerary-body/lib/otp-react-redux/place-name'
-import { PlaceName as PlaceNameWrapper, PlaceRowWrapper } from '@opentripplanner/itinerary-body/lib/styled'
-import RouteDescription from '@opentripplanner/itinerary-body/lib/otp-react-redux/route-description'
 import React, { Component } from 'react'
-import { connect } from 'react-redux'
+import RouteDescription from '@opentripplanner/itinerary-body/lib/otp-react-redux/route-description'
 import styled from 'styled-components'
+import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/transit-leg-summary'
 
-import { setLegDiagram } from '../../../actions/map'
+import { ComponentContext } from '../../../util/contexts'
+import { setLegDiagram, setMapillaryId } from '../../../actions/map'
 import { setViewedTrip } from '../../../actions/ui'
 import TripDetails from '../connected-trip-details'
 import TripTools from '../trip-tools'
-import { ComponentContext } from '../../../util/contexts'
 
 import RealtimeTimeColumn from './realtime-time-column'
 import TransitLegSubheader from './connected-transit-leg-subheader'
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {}
 
 const ItineraryBodyContainer = styled.div`
@@ -37,11 +43,11 @@ class ConnectedItineraryBody extends Component {
   static contextType = ComponentContext
 
   /** avoid rerendering if the itinerary to display hasn't changed */
-  shouldComponentUpdate (nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     return !isEqual(this.props.itinerary, nextProps.itinerary)
   }
 
-  render () {
+  render() {
     const {
       accessibilityScoreGradationMap,
       config,
@@ -49,6 +55,7 @@ class ConnectedItineraryBody extends Component {
       itinerary,
       setActiveLeg,
       setLegDiagram,
+      setMapillaryId,
       setViewedTrip,
       timeOptions
     } = this.props
@@ -63,6 +70,8 @@ class ConnectedItineraryBody extends Component {
           itinerary={itinerary}
           LegIcon={LegIcon}
           LineColumnContent={LineColumnContent}
+          mapillaryCallback={setMapillaryId}
+          mapillaryKey={config?.mapillary?.key}
           PlaceName={PlaceName}
           RouteDescription={RouteDescription}
           setActiveLeg={setActiveLeg}
@@ -96,9 +105,11 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = {
   setLegDiagram,
+  setMapillaryId,
   setViewedTrip
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  ConnectedItineraryBody
-)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ConnectedItineraryBody)
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index c2c1b58fa..ee8ba83f3 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -742,7 +742,15 @@ function createOtpReducer(config) {
       case 'SET_LEG_DIAGRAM':
         return update(state, {
           ui: {
-            diagramLeg: { $set: action.payload }
+            diagramLeg: { $set: action.payload },
+            mapillaryId: { $set: false }
+          }
+        })
+      case 'SET_MAPILLARY_ID':
+        return update(state, {
+          ui: {
+            diagramLeg: { $set: false },
+            mapillaryId: { $set: action.payload }
           }
         })
       case 'SET_ELEVATION_POINT':
diff --git a/package.json b/package.json
index 81a2998a0..d92a209f7 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@opentripplanner/geocoder": "^1.1.1",
     "@opentripplanner/humanize-distance": "^1.1.0",
     "@opentripplanner/icons": "^1.2.0",
-    "@opentripplanner/itinerary-body": "^2.7.0",
+    "@opentripplanner/itinerary-body": "^2.9.0",
     "@opentripplanner/location-field": "^1.11.1",
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
diff --git a/yarn.lock b/yarn.lock
index 7019c6546..37ddee735 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2532,10 +2532,10 @@
     "@opentripplanner/core-utils" "^4.1.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/itinerary-body@^2.7.0":
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-2.7.0.tgz#ba5ae119bc97deb30d68936d15fc683bbd15e865"
-  integrity sha512-9i3uXPTssyZPr+4a+2QX5QywF+8b11Km3RRDpZFcr4bwTDllfX21mvt36miqhZ/l6mYmloMzybQM+XIJWlQHtA==
+"@opentripplanner/itinerary-body@^2.9.0":
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-2.9.0.tgz#85623aa9e3605ba425b929d3eb949b5bcf36935a"
+  integrity sha512-aCwRwiq32uhWMBS0uMp5C3vEyNEkA/5C7sPBWgJRhytAR5HsSfdbGkUeM6EUbY+9Ki3QldWR4BHpNd7wqWvF9Q==
   dependencies:
     "@opentripplanner/core-utils" "^4.5.0"
     "@opentripplanner/humanize-distance" "^1.1.0"