added button to add a new study space, and I am able to create polygo…

…ns on the map but not on user click
CS-UCR · Nov 8, 2019 · 5827687 · 5827687
1 parent 9cdede0
commit 5827687
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 26 deletions.
diff --git a/.expo/packager-info.json b/.expo/packager-info.json
@@ -2,9 +2,9 @@
   "devToolsPort": 19002,
   "expoServerPort": 19000,
   "packagerPort": 19001,
-  "packagerPid": 7316,
+  "packagerPid": 4639,
   "expoServerNgrokUrl": "https://eq-58q.anonymous.final-project-4-locos-1.exp.direct",
   "packagerNgrokUrl": "https://packager.eq-58q.anonymous.final-project-4-locos-1.exp.direct",
-  "ngrokPid": 7387,
+  "ngrokPid": 4704,
   "webpackServerPort": null
 }
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/package-install.sh b/package-install.sh
diff --git a/src/components/myMap.js b/src/components/myMap.js
@@ -1,24 +1,24 @@
 import React from 'react';
-import MapView, {Permissions, Marker} from 'react-native-maps';
-import { StyleSheet, Text, View, Dimensions } from 'react-native';
+import MapView, {Permissions, Marker, Polygon} from 'react-native-maps';
+import { StyleSheet, Text, View, TouchableOpacity, Dimensions } from 'react-native';
 import * as Location from 'expo-location';
 
 export default class myMap extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      latitude: 0,
-      longitude: 0,
+      latitude: 33.9737,
+      longitude: 117.3281,
+      polygons:[]    
     }
   }
-
-  async componentDidMount(){
-
-    const {status} = await Location.hasServicesEnabledAsync()
-    if(status != 'granted'){
-      const response = await Location.requestPermissionsAsync()
-    }
+  componentDidMount(){
+
+    // const {status} = await Location.hasServicesEnabledAsync()
+    // if(status != 'granted'){
+    //   const response = await Location.requestPermissionsAsync()
+    // }
 
     navigator.geolocation.getCurrentPosition(
       position =>{
@@ -32,29 +32,71 @@ export default class myMap extends React.Component {
     )
   }
 
+  // _onPress = () =>{
+  //   <Polygon 
+  //     coordinates={[
+  //       {name: '1', latitude: this.state.latitude + 0.01, longitude: this.state.longitude - 0.01},
+  //       {name: '2', latitude: this.state.latitude + 0.01, longitude: this.state.longitude + 0.01},
+  //       {name: '3', latitude: this.state.latitude - 0.01, longitude: this.state.longitude + 0.01},
+  //       {name: '4', latitude: this.state.latitude - 0.01, longitude: this.state.longitude - 0.01},
+  //     ]}
+  //     strokeWidth={2}
+  //     strokeColor={'red'}
+  //     fillColor={'hsla(360, 100%, 50%, 0.5)'}>
+  //   </Polygon> 
+  // }
+
   render() {
     return (
-      <View style={styles.container}>
+      <View style={styles.mapStyle}>
         <MapView
           style={styles.mapStyle}
           showsUserLocation={true}
+          showsMyLocationButton={true}
           region={{
             latitude: this.state.latitude,
             longitude: this.state.longitude,
-            latitudeDelta: 0.01,
-            longitudeDelta: 0.01 
-          }}/>
-      </View>                                                                                                                                                                                                                         
+            latitudeDelta: 0.09,
+            longitudeDelta: 0.09 }}>
+        </MapView>
+        <View style={styles.buttonContainerStyle}>
+          <TouchableOpacity 
+            style={styles.buttonBoxStyle}
+            onPress={this._onPress}>
+            <Text style={styles.buttonTextStyle}>
+              New Study Space
+            </Text>
+          </TouchableOpacity> 
+        </View> 
+      </View>                                                                                                                                                                                                    
     );
   }
 }
 
 const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',    
-  },
   mapStyle: {
-    width: Dimensions.get('window').width,
-    height: Dimensions.get('window').height - 80,
+    flex: 1
+    //  width: Dimensions.get('window').width,
+    //  height: Dimensions.get('window').height - 105,
+  },
+  buttonContainerStyle:{
+    position: 'absolute',
+    alignSelf: 'center',
+     bottom: 10,
+  },
+  buttonBoxStyle:{
+    alignSelf:'center',
+    alignItems: 'center',
+    backgroundColor: '#hsla(60, 100%, 50%, 0.5)',
+    borderColor: 'black',
+    borderWidth: 1,
+    borderRadius: 12,
+    width: 100,
+
+  },
+  buttonTextStyle:{
+    textAlign: 'center',
+    fontWeight: '900',
+    color: 'black'
   },
-});
+});