feat: Basic offline map style functionality

digidem · May 1, 2019 · 8dbb308 · 8dbb308
1 parent ad4e848
commit 8dbb308
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git 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
@@ -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) => (
   <View style={{ flex: 1 }}>
     <ObservationsContext.Consumer>
       {({ observations }) => (
-        <MapView observations={observations} onAddPress={onAddPress} />
+        <MapView
+          observations={observations}
+          onAddPress={onAddPress}
+          mapStyle={getMapStyleUrl("default")}
+        />
       )}
     </ObservationsContext.Consumer>
   </View>

diff --git 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<Props> {
+class MapView extends React.Component<Props, { loadError: boolean }> {
   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<Props> {
   };
 
   render() {
-    const { observations, onAddPress } = this.props;
+    const { observations, onAddPress, mapStyle } = this.props;
 
     return (
       <>
@@ -147,7 +150,10 @@ class MapView extends React.Component<Props> {
           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 })}
         >
           <ObservationMapLayer
             onPress={this.handleObservationPress}