add hybrid view to local map

quickresolve · May 16, 2016 · 362c9c1 · 362c9c1
1 parent 04bb8d6
commit 362c9c1
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 6 deletions.
diff --git a/App/Components/Local.js b/App/Components/Local.js
@@ -6,21 +6,106 @@ import {
   MapView,
   ScrollView,
   TabBarIOS,
+  TouchableOpacity,
   View
 } from 'react-native';
 
 
-class Local extends Component {
+var Local = React.createClass ({
+  // watchID: (null: ?number),
+
+  getInitialState: function() {
+    return {
+      // initialPosition: 'unknown',
+      // lastPosition: 'unknown',
+      pin: {
+        latitude: 37,
+        longitude: -122
+      },
+      // isFirstLoad: true,
+      // mapRegion: undefined,
+      // mapRegionInput: undefined,
+      region: {
+        latitude: 37,
+        longitude: -122,
+        latitudeDelta: 2,
+        longitudeDelta: 2
+      }
+    };
+  },
+
+  componentDidMount: function() {
+    // navigator.geolocation.getCurrentPosition(
+    //   (position) => {
+    //     var initialPosition = JSON.stringify(position);
+    //     this.setState({initialPosition});
+    //   },
+    //   (error) => alert(error.message),
+    //   {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
+    // );
+    // this.watchID = navigator.geolocation.watchPosition((position) => {
+    //   var lastPosition = JSON.stringify(position);
+    //   this.setState({lastPosition});
+    // });
+    // this.setState({
+    //   pin: {
+    //     longitude: this.state.region.latitude,
+    //     latitude: this.state.region.longitude
+    //   }
+    // });
+  },
+
+
+
   render() {
     return(
       <View style={styles.container}>
-        <MapView style={styles.map}>
-
+        <MapView style={styles.map}
+          // annotations={this.state.pin}
+          showsUserLocation={true}
+          region={this.state.region}
+          mapType={'hybrid'}
+          followUserLocation={true}>
         </MapView>
       </View>
     )
   }
-};
+
+  // _getAnnotations(region) {
+  //   return [{
+  //     longitude: region.longitude,
+  //     latitude: region.latitude
+  //   }]
+  // },
+  //
+  // _onRegionChange(region) {
+  //   this.setState({
+  //     mapRegionInput: region
+  //   });
+  // },
+  //
+  // _onRegionChangeComplete(region) {
+  //   if (this.state.isFirstLoad) {
+  //     this.setState({
+  //       mapRegionInput: region,
+  //       annotations: this._getAnnotations(region),
+  //       isFirstLoad: false,
+  //     });
+  //   }
+  // },
+  //
+  // _onRegionInputChanged(region) {
+  //   this.setState({
+  //     mapRegion: region,
+  //     mapRegionInput: region,
+  //     annotations: this._getAnnotations(region)
+  //   });
+  // }
+
+});
+
+
+
 
 var styles = StyleSheet.create({
   container: {

diff --git a/ios/CycleTheBay/Info.plist b/ios/CycleTheBay/Info.plist
@@ -53,6 +53,7 @@
       <string>MaterialIcons.ttf</string>
       <string>Octicons.ttf</string>
       <string>Zocial.ttf</string>
+      <string>WeatherIcons-Regular.ttf</string>
     </array>
   </dict>
-</plist>
+</plist>
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "react": "^0.14.8",
-    "react-native": "^0.25.1"
+    "react-native": "^0.25.1",
+    "react-native-maps": "^0.4.0"
   }
 }