Mapillary Tweaks and Cleanup

i18n/en-US.yml

@@ -219,6 +219,8 @@ components:
     setOrigin: Set Origin
   MainMobile:
     invalidScreen: Invalid mobile screen
+  Mapillary:
+    altText: Imagery of the street
   MobileOptions:
     header: Set Search Options
   ModeDropdown:

lib/components/map/map.js

@@ -93,8 +93,8 @@ class Map extends Component {
         {showDiagram && <LegDiagram leg={diagramLeg} />}
         {showMapillary && (
           <MapillaryFrame
-            id={activeMapillaryImage}
             onClose={() => setMapillaryId(null)}
+            url={activeMapillaryImage}
           />
         )}
       </div>

lib/components/map/mapillary-frame.tsx

@@ -1,23 +1,25 @@
 import { Button } from 'react-bootstrap'
+// eslint-disable-next-line sort-imports-es6-autofix/sort-imports-es6
+import { useIntl } from 'react-intl'
 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
+  onClose,
+  url
 }: {
-  id: string
   onClose?: () => void
+  url: string
 }): React.ReactElement => {
+  const intl = useIntl()
   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])
+    setTimeout(() => setFakeLoad(false), 500)
+  }, [url])
 
   return (
     <div className="leg-diagram" style={{ height: '50vh', zIndex: 999 }}>
@@ -31,16 +33,23 @@ const MapillaryFrame = ({
       >
         <Icon className="fa-spin" type="spinner" />
       </div>
-      <iframe
-        frameBorder="0"
-        src={`https://www.mapillary.com/embed?image_key=${id}&style=photo`}
+      <div
         style={{
-          display: fakeLoad ? 'none' : 'block',
+          alignItems: 'center',
+          display: 'flex',
           height: '100%',
-          width: '100%'
+          justifyContent: 'center'
         }}
-        title="Imagery of the street"
-      />
+      >
+        <img
+          alt={intl.formatMessage({ id: 'components.Mapillary.altText' })}
+          src={`${url}`}
+          style={{
+            height: '100%',
+            visibility: fakeLoad ? 'hidden' : 'visible'
+          }}
+        />
+      </div>
       <Button
         aria-label="Close"
         className="mapillary-close-button close-button clear-button-formatting"