diff --git a/src/frontend/api.js b/src/frontend/api.js index 7790feed4..13c668c1b 100644 --- a/src/frontend/api.js +++ b/src/frontend/api.js @@ -53,6 +53,10 @@ export function getMediaUrl(attachmentId: string, size: ImageSize): string { return `${BASE_URL}media/${size}/${attachmentId}`; } +export function getMapStyleUrl(id: string): string { + return `${BASE_URL}styles/${id}/style.json`; +} + export function savePhoto({ fullUri, thumbnailUri diff --git a/src/frontend/screens/MapScreen.js b/src/frontend/screens/MapScreen.js index 8557cf4a5..952ea05f1 100644 --- a/src/frontend/screens/MapScreen.js +++ b/src/frontend/screens/MapScreen.js @@ -4,6 +4,7 @@ import { View } from "react-native"; import MapView from "../sharedComponents/MapView"; import ObservationsContext from "../context/ObservationsContext"; +import { getMapStyleUrl } from "../api"; type Props = { onAddPress: () => void @@ -13,7 +14,11 @@ const MapScreen = ({ onAddPress }: Props) => ( {({ observations }) => ( - + )} diff --git a/src/frontend/sharedComponents/MapView.js b/src/frontend/sharedComponents/MapView.js index 16fdb4732..fd424ac4a 100644 --- a/src/frontend/sharedComponents/MapView.js +++ b/src/frontend/sharedComponents/MapView.js @@ -83,17 +83,20 @@ class ObservationMapLayer extends React.PureComponent<{ type Props = { observations: ObservationsMap, - mapStyle?: MapStyle, + mapStyle?: string | MapStyle, onAddPress: () => void, onPressObservation: (observationId: string) => void }; -class MapView extends React.Component { +class MapView extends React.Component { static defaultProps = { onAddPress: () => {}, - onPressObservation: () => {} + onPressObservation: () => {}, + mapStyle: "mapbox://styles/mapbox/outdoors-v9" }; + state = {}; + constructor(props: Props) { super(props); MapboxGL.setAccessToken( @@ -134,7 +137,7 @@ class MapView extends React.Component { }; render() { - const { observations, onAddPress } = this.props; + const { observations, onAddPress, mapStyle } = this.props; return ( <> @@ -147,7 +150,10 @@ class MapView extends React.Component { rotateEnabled={false} onPress={this.handleObservationPress} compassEnabled={false} - styleURL="mapbox://styles/mapbox/outdoors-v9" + styleURL={ + this.state.loadError ? MapView.defaultProps.mapStyle : mapStyle + } + onDidFailLoadingMap={e => this.setState({ loadError: true })} >