DIsplay a map full of stations and let a user select a station to view data at that station.

.gitignore

@@ -35,7 +35,7 @@ local.properties
 node_modules/
 npm-debug.log
 yarn-error.log
-.env
+.env*
 
 # BUCK
 buck-out/

app/components/map-callout.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react'
+import {
+  Image,
+  Text,
+  View,
+  StyleSheet,
+} from 'react-native'
+
+import BaseStyle from '../base-styles'
+import callout from '../assets/images/map/callout.png'
+
+export default class MapCallout extends Component {
+  get formatStationLocation() {
+    const { station } = this.props
+    const latitude = station.location[1]
+    const longitude = station.location[0]
+
+    return `${latitude} N ${longitude} W`
+  }
+
+  render() {
+    const { station } = this.props
+
+    return (
+      <View style={styles.container}>
+        <Image source={callout} style={styles.callout} />
+        <View style={styles.textContainer}>
+          <Text
+            style={styles.stationName}
+            numberOfLines={1}
+            ellipsizeMode={'tail'}
+          >
+            {station.name}
+          </Text>
+          <Text style={styles.stationLocation}>{this.formatStationLocation}</Text>
+        </View>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: 258,
+    height: 98,
+  },
+  textContainer: {
+    zIndex: 1,
+    marginTop: 31,
+    marginLeft: 40,
+  },
+  callout: {
+    position: 'absolute',
+  },
+  stationName: {
+    fontSize: BaseStyle.smallFontSize,
+    marginBottom: 1,
+    width: 170,
+  },
+  stationLocation: {
+    fontFamily: BaseStyle.numericFontFamily,
+    fontSize: 10,
+    color: BaseStyle.subtleColor,
+  },
+})

app/components/map.js

@@ -2,27 +2,35 @@ import React, { Component } from 'react'
 import {
   StyleSheet,
 } from 'react-native'
-
 import MapView from 'react-native-maps'
 
+import { Actions } from 'react-native-router-flux'
+import Config from '../lib/config'
+import MapCallout from './map-callout'
+import stationMarker from '../assets/images/map/station-marker.png'
+
 export default class Map extends Component {
   constructor(props) {
     super(props)
 
-    this.state = { stations: null }
+    this.state = {
+      stations: null,
+      userLocation: null,
+    }
   }
 
   componentDidMount() {
     navigator.geolocation.getCurrentPosition((position) => {
-      const { latitude, longitude } = position.coords
-
       this.setState({
-        userLocation: { latitude, longitude },
+        userLocation: {
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        },
       })
     })
 
-    fetch('http://localhost:8000/api/get-stations').then(res => res.json()).then((json) => {
-      this.setState({ stations: json.formattedStations })
+    fetch(`${Config.HOST}/get-stations`).then(res => res.json()).then((json) => {
+      this.setState({ stations: json.stations })
     })
   }
 
@@ -41,17 +49,34 @@ export default class Map extends Component {
           longitude: userLocation.longitude,
           latitudeDelta: 0.315,
           longitudeDelta: 0.321,
-          showPointsOfInterest: false,
-          showBuildings: false,
         }}
       >
-        {stations.map(station => (
+        {stations.map((station, index) => (
           <MapView.Marker
+            key={index}
+            image={stationMarker}
             coordinate={{
               latitude: station.location[0],
               longitude: station.location[1],
             }}
-          />
+            calloutOffset={{ x: 0, y: 30 }}
+          >
+            <MapView.Callout
+              tooltip
+              width={258}
+              height={98}
+              onPress={() => {
+                Actions.stationDetail({
+                  location: {
+                    latitude: station.location[0],
+                    longitude: station.location[1],
+                  },
+                })
+              }}
+            >
+              <MapCallout station={station} />
+            </MapView.Callout>
+          </MapView.Marker>
         ))}
       </MapView>
     )

app/components/station-detail/index.js

@@ -28,7 +28,7 @@ const StationDetail = class extends Component {
   }
 
   componentDidMount() {
-    this.findCurrentLocation()
+    this.requestLoctionInformation()
     AppState.addEventListener('change', this.handleAppStateChange)
   }
 
@@ -44,15 +44,22 @@ const StationDetail = class extends Component {
     }
 
     if (appState === 'active' && this.state.previousState !== 'active') {
-      this.findCurrentLocation()
+      this.requestLoctionInformation()
     }
   }
 
-  findCurrentLocation() {
-    fetchLocation().then((location) => {
-      this.props.fetchTideData(location)
-      this.props.findCityName(location)
-    })
+  requestLoctionInformation() {
+    const { location, fetchTideData, findCityName } = this.props
+
+    if (location) {
+      fetchTideData(location)
+      findCityName(location)
+    } else {
+      fetchLocation().then((location) => {
+        fetchTideData(location)
+        findCityName(location)
+      })
+    }
   }
 
   render() {

app/components/station-detail/tide-phrase.js

@@ -41,7 +41,6 @@ export default class TidePhrase extends Component {
             ellipsizeMode="tail"
             style={[
               BaseStyle.tidePhraseStyle,
-              styles.fadedPhraseText,
               styles.cityText,
             ]}
           >
@@ -57,7 +56,7 @@ export default class TidePhrase extends Component {
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    marginBottom: BaseStyle.largeSpacing,
+    marginVertical: BaseStyle.largeSpacing,
   },
   arrow: {
     marginTop: 10,