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 })}
>