No Description

Map.js 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import * as React from 'react';
  2. import { useState } from 'react';
  3. import MapView, { Marker } from 'react-native-maps';
  4. import { Button, StyleSheet, Text, View, Dimensions, Pressable } from 'react-native';
  5. import { Confirm } from './Confirm';
  6. export default function Map({route, navigation} ) {
  7. console.log('In map params')
  8. console.log(route.params)
  9. const {
  10. Day = route.params.Day ,
  11. Month = route.params.Month,
  12. int_id = route.params.int_id,
  13. mapflag = route.params.Flag,
  14. i_token = route.params.I_Token,
  15. u_token = route.params.U_Token,
  16. username = route.params.Username,
  17. I_username = route.params.I_Username,
  18. Confirm_Flag = route.params.Confirm_Flag,
  19. View_Only = route.params.View_Only
  20. } = route.params
  21. if(View_Only == true){
  22. const Retrive_pin = route.params.Pin;
  23. console.log("Retrieve lat", Retrive_pin)
  24. if(Confirm_Flag == true){
  25. const [pin2, setPin2] = React.useState({
  26. latitude: Retrive_pin[0].Pin[0],
  27. longitude: Retrive_pin[0].Pin[1],
  28. })
  29. console.log("Pin2", pin2)
  30. return (
  31. <View style={styles.container}>
  32. <MapView style={styles.map}
  33. initialRegion={{
  34. latitude: pin2.latitude,
  35. longitude: pin2.longitude,
  36. latitudeDelta: 0.0922,
  37. longitudeDelta: 0.0421,
  38. }}
  39. provider="google"
  40. >
  41. <Marker coordinate={pin2} />
  42. </MapView>
  43. </View>
  44. );
  45. }
  46. else{
  47. const [pin2, setPin2] = React.useState({
  48. latitude: Retrive_pin.Pin[0],
  49. longitude: Retrive_pin.Pin[1],
  50. })
  51. console.log("Pin2", pin2)
  52. return (
  53. <View style={styles.container}>
  54. <MapView style={styles.map}
  55. initialRegion={{
  56. latitude: pin2.latitude,
  57. longitude: pin2.longitude,
  58. latitudeDelta: 0.0922,
  59. longitudeDelta: 0.0421,
  60. }}
  61. provider="google"
  62. >
  63. <Marker coordinate={pin2} />
  64. </MapView>
  65. </View>
  66. );
  67. }
  68. }
  69. else{
  70. const [pin1, setPin1] = React.useState({
  71. latitude: 18.4655,
  72. longitude: -66.1057,
  73. })
  74. return (
  75. <View style={styles.container}>
  76. <MapView style={styles.map}
  77. initialRegion={{
  78. latitude: 18.4655,
  79. longitude: -66.1057,
  80. latitudeDelta: 0.0922,
  81. longitudeDelta: 0.0421,
  82. }}
  83. onPress={(e) => {
  84. setPin1({
  85. latitude: e.nativeEvent.coordinate.latitude,
  86. longitude: e.nativeEvent.coordinate.longitude
  87. })
  88. }}
  89. provider="google"
  90. >
  91. <Marker coordinate={pin1} />
  92. </MapView>
  93. <View style = {{position: 'absolute', bottom: '5%'}}>
  94. <Button title= 'Confirm Location' color = "#000000" onPress = {() => navigation.navigate('StateTime' , {Pin : pin1 ,
  95. Day : Day, Month: Month, int_id : int_id,
  96. mapflag : mapflag, I_Token: i_token, U_Token: u_token
  97. ,Username: username, I_Username: I_username})}/>
  98. </View>
  99. </View>
  100. );
  101. }
  102. }
  103. const styles = StyleSheet.create({
  104. container: {
  105. flex: 1,
  106. backgroundColor: '#fff',
  107. alignItems: 'center',
  108. justifyContent: 'center',
  109. },
  110. map: {
  111. width: Dimensions.get('window').width,
  112. height: Dimensions.get('window').height,
  113. },
  114. container2: {
  115. flex: 1,
  116. alignItems: 'center',
  117. justifyContent: 'center',
  118. backgroundColor: '#307ecc',
  119. padding: 16,
  120. },
  121. });