-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #328 from ibi-group/mapillary-in-itinerary-body
Add Mapillary Image Link to Walking Itineraries
- Loading branch information
Showing
9 changed files
with
207 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
116 changes: 116 additions & 0 deletions
116
packages/itinerary-body/src/AccessLegBody/mapillary-button.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import styled from "styled-components"; | ||
| import { StreetView } from "@styled-icons/fa-solid"; | ||
|
|
||
| /** | ||
| * Helper method to generate bounding box from a location. Adding the WINDOW to the coordinate | ||
| * creates a bounding box of approximately 1 meter around the coordinate, which is likely to | ||
| * encompass any imagery available. | ||
| * @param coord The coordinate to convert to a bounding box | ||
| * @returns A bounding box 1 meter around the passed coordinate | ||
| */ | ||
| const generateBoundingBoxFromCoordinate = ({ | ||
| lat, | ||
| lon | ||
| }: { | ||
| lat: number; | ||
| lon: number; | ||
| }) => { | ||
| const WINDOW = 0.000075; | ||
| const south = lat - WINDOW; | ||
| const north = lat + WINDOW; | ||
| const west = lon - WINDOW; | ||
| const east = lon + WINDOW; | ||
| return [west, south, east, north]; | ||
| }; | ||
|
|
||
| const Container = styled.a<{ padLeft?: boolean; padTop?: boolean }>` | ||
| display: inline-block; | ||
| margin-top: ${props => (props.padTop ? "10px" : "0")}; | ||
| &:hover { | ||
| cursor: pointer; | ||
| text-decoration: none; | ||
| } | ||
| &:active { | ||
| color: #111; | ||
| } | ||
| &::before { | ||
| content: "| "; | ||
| cursor: auto; | ||
| margin-left: ${props => (props.padLeft ? "1ch" : "0")}; | ||
| } | ||
| `; | ||
|
|
||
| const Icon = styled(StreetView)` | ||
| height: 16px; | ||
| padding-left: 2px; | ||
| `; | ||
|
|
||
| /** | ||
| * A component which shows a "street view" button if a Mapillary image is available for a | ||
| * passed coordinate | ||
| * | ||
| * @param coords The coordinates to find imagery for in the format [lat, lon] | ||
| * @param mapillaryKey A Mapillary api key used to check for imagery. | ||
| * @param padTop Whether to add padding to the top of the container. | ||
| * @param clickCallback A method to fire when the button is clicked, which accepts an ID. | ||
| * If it is not passsed, a popup window will be opened. */ | ||
| const MapillaryButton = ({ | ||
| clickCallback, | ||
| coords, | ||
| mapillaryKey, | ||
| padLeft, | ||
| padTop | ||
| }: { | ||
| clickCallback?: (id: string) => void; | ||
| coords: { lat: number; lon: number }; | ||
| mapillaryKey: string; | ||
| padLeft?: boolean; | ||
| padTop?: boolean; | ||
| }): JSX.Element => { | ||
| const [imageId, setImageId] = useState(null); | ||
|
|
||
| useEffect(() => { | ||
| // useEffect only supports async actions as a child function | ||
| const getMapillaryId = async () => { | ||
| const bounds = generateBoundingBoxFromCoordinate(coords).join(","); | ||
| const raw = await fetch( | ||
| `https://graph.mapillary.com/images?fields=id&limit=1&access_token=${mapillaryKey}&bbox=${bounds}` | ||
| ); | ||
| const json = await raw.json(); | ||
| if (json?.data?.length > 0) { | ||
| setImageId(json.data[0].id); | ||
| } | ||
| }; | ||
|
|
||
| if (!imageId && !!mapillaryKey) getMapillaryId(); | ||
| }, [coords]); | ||
|
|
||
| const handleClick = () => { | ||
| if (clickCallback) clickCallback(imageId); | ||
| else { | ||
| window.open( | ||
| `https://www.mapillary.com/embed?image_key=${imageId}`, | ||
| "_blank", | ||
| "location=no,height=600,width=600,scrollbars=no,status=no" | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| if (!imageId) return null; | ||
| return ( | ||
| <Container | ||
| onClick={handleClick} | ||
| padLeft={padLeft} | ||
| padTop={padTop} | ||
| title="Show street imagery at this location" | ||
| > | ||
| <Icon style={{ paddingBottom: 1 }} /> | ||
| </Container> | ||
| ); | ||
| }; | ||
|
|
||
| export default MapillaryButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { rest } from "msw"; | ||
|
|
||
| import mapillary from "./mapillary.json"; | ||
|
|
||
| // This faked endpoint will always return the same ID | ||
| export default [ | ||
| rest.get("https://graph.mapillary.com/images", (req, res, ctx) => { | ||
| return res(ctx.json(mapillary)); | ||
| }) | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "data": [ | ||
| { | ||
| "id": "769386473761940", | ||
| "geometry": { | ||
| "type": "Point", | ||
| "coordinates": [-7.2089327683333, 62.245706682778] | ||
| } | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters