diff --git a/i18n/en-US.yml b/i18n/en-US.yml index 9e10186bc..03d623807 100644 --- a/i18n/en-US.yml +++ b/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: diff --git a/lib/components/map/map.js b/lib/components/map/map.js index 4b8ca41e2..ecc71de0f 100644 --- a/lib/components/map/map.js +++ b/lib/components/map/map.js @@ -93,8 +93,8 @@ class Map extends Component { {showDiagram && } {showMapillary && ( setMapillaryId(null)} + url={activeMapillaryImage} /> )} diff --git a/lib/components/map/mapillary-frame.tsx b/lib/components/map/mapillary-frame.tsx index 795f8d48a..a0670af4c 100644 --- a/lib/components/map/mapillary-frame.tsx +++ b/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 (
@@ -31,16 +33,23 @@ const MapillaryFrame = ({ >
-