Update Map View

src/component/mapCollectLineScreen.tsx

@@ -1,9 +1,10 @@
 import React, {useState, useEffect} from "react";
-import { View, Text, StyleSheet, Alert, TouchableOpacity, Image, StatusBar } from "react-native";
+import { View, Text, StyleSheet, Alert, TouchableOpacity, Image, StatusBar, Pressable } from "react-native";
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
 import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
 import Geolocation from "@react-native-community/geolocation";
+import Modal from "react-native-modal";
 
 type MapCollectLineProps = {route: any,navigation: any}
 function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.Element{
@@ -37,6 +38,9 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
     const [lat,setLat] = useState(0);
     const [accuracy,setAccuracy] = useState(0);
     const [timeStamp,setTimeStamp] = useState(0);
+    const [modalBasemap,setmodalBasemap] = useState(false);
+    const [modalLayerList,setmodalLayerList] = useState(false);
+    
 
     useEffect(() => {
         const intervalID = setInterval(() => {
@@ -180,25 +184,55 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
 
             </MapView>
             
-            <TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}>
+            <TouchableOpacity onPress={()=>setmodalLayerList(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}>
                 <Image
                       source={require('../../assets/icon/layerList.png')}
                     //   style={styles.buttonImageIconStyle}
                   />
             </TouchableOpacity>
-            <TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}>
+            <TouchableOpacity onPress={()=>setmodalBasemap(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}>
                 <Image
                       source={require('../../assets/icon/mapOutline.png')}
                     //   style={styles.buttonImageIconStyle}
                   />
             </TouchableOpacity>
-            <TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}>
+            {/* <TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}>
                 <Image
                       source={require('../../assets/icon/findmylock.png')}
                     //   style={styles.buttonImageIconStyle}
                   />
-            </TouchableOpacity>
+            </TouchableOpacity> */}
+            
+
+            <Modal isVisible={modalBasemap} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setmodalBasemap(false)} style={{top:'18%',alignSelf:'center'}}>
+                <View key={"modal container"} style={{width:330,height:333,backgroundColor:'#FFFFFF',borderRadius:25}}>
+                    <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}>
+                        <Text style={{fontSize:20,fontWeight:'semibold'}}>
+                            Basemap Gallery
+                        </Text>
+                        <Pressable onPress={()=>setmodalBasemap(false)} style={{alignSelf:'flex-end',padding:10}}>
+                            <Image
+                                source={require('../../assets/icon/x.png')}
+                            />
+                        </Pressable>
+                    </View>
+                </View>
+            </Modal>
 
+            <Modal isVisible={modalLayerList} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setmodalLayerList(false)} style={{top:'18%',alignSelf:'center'}}>
+                <View key={"modal container"} style={{width:330,height:333,backgroundColor:'#FFFFFF',borderRadius:25}}>
+                    <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}>
+                        <Text style={{fontSize:20,fontWeight:'semibold'}}>
+                            Layer List
+                        </Text>
+                        <Pressable onPress={()=>setmodalLayerList(false)} style={{alignSelf:'flex-end',padding:10}}>
+                            <Image
+                                source={require('../../assets/icon/x.png')}
+                            />
+                        </Pressable>
+                    </View>
+                </View>
+            </Modal>
 
             {/* <View style={styles.gotoLocate}>
                 <TouchableOpacity onPress={() => handleZoom(true)}>

src/component/mapCollectPolygonScreen.tsx

@@ -1,9 +1,10 @@
 import React, {useState, useEffect, useRef} from "react";
-import { View, Text, StyleSheet, Alert, TouchableOpacity, Image, StatusBar } from "react-native";
+import { View, Text, StyleSheet, Alert, TouchableOpacity, Image, StatusBar, Pressable } from "react-native";
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
 import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
 import Geolocation from "@react-native-community/geolocation";
+import Modal from "react-native-modal";
 type MapCollectPolygonProps = {route: any,navigation: any}
 
 
@@ -21,6 +22,8 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
     const [startPoint, setStartPoint] = useState<any>([]);
     const [manyPick, setManyPick] = useState(0);
     const [drawingComplete,setDrawingComplete] = useState(false);
+    const [modalBasemap,setmodalBasemap] = useState(false);
+    const [modalLayerList,setmodalLayerList] = useState(false);
 
     const morePoint = async () => {
         setManyPick(manyPick+1);
@@ -132,6 +135,7 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
                 onRegionDidChange={(region)=>
                     setZoom(region.properties.zoomLevel)
                 }
+                compassEnabled={false}
             >
                 <Camera
                     key={"camera"}
@@ -200,13 +204,13 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
                 }
             </MapView>
 
-            <TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}>
+            <TouchableOpacity onPress={()=>setmodalLayerList(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}>
                 <Image
                     source={require('../../assets/icon/layerList.png')}
                 //   style={styles.buttonImageIconStyle}
                 />
             </TouchableOpacity>
-            <TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}>
+            <TouchableOpacity onPress={()=>setmodalBasemap(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}>
                 <Image
                         source={require('../../assets/icon/mapOutline.png')}
                     //   style={styles.buttonImageIconStyle}
@@ -218,8 +222,39 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
                     //   style={styles.buttonImageIconStyle}
                     />
             </TouchableOpacity>
+
+            <Modal isVisible={modalBasemap} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setmodalBasemap(false)} style={{top:'18%',alignSelf:'center'}}>
+                <View key={"modal container"} style={{width:330,height:333,backgroundColor:'#FFFFFF',borderRadius:25}}>
+                    <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}>
+                        <Text style={{fontSize:20,fontWeight:'semibold'}}>
+                            Basemap Gallery
+                        </Text>
+                        <Pressable onPress={()=>setmodalBasemap(false)} style={{alignSelf:'flex-end',padding:10}}>
+                            <Image
+                                source={require('../../assets/icon/x.png')}
+                            />
+                        </Pressable>
+                    </View>
+                </View>
+            </Modal>
+
+            <Modal isVisible={modalLayerList} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setmodalLayerList(false)} style={{top:'18%',alignSelf:'center'}}>
+                <View key={"modal container"} style={{width:330,height:333,backgroundColor:'#FFFFFF',borderRadius:25}}>
+                    <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}>
+                        <Text style={{fontSize:20,fontWeight:'semibold'}}>
+                            Layer List
+                        </Text>
+                        <Pressable onPress={()=>setmodalLayerList(false)} style={{alignSelf:'flex-end',padding:10}}>
+                            <Image
+                                source={require('../../assets/icon/x.png')}
+                            />
+                        </Pressable>
+                    </View>
+                </View>
+            </Modal>
+
             {/* Widget Map */}
-            <View style={styles.gotoLocate}>
+            {/* <View style={styles.gotoLocate}>
                 <TouchableOpacity onPress={() => handleZoom(true)}>
                   <Image
                       source={require('../../assets/icon/plus.png')}
@@ -238,7 +273,7 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
                         style={styles.buttonImageIconStyle}
                     />
                 </TouchableOpacity>
-            </View>
+            </View> */}
             {
                 startPoint.length === 0 ?
                     currentPosition.length > 0 ?

src/component/mapCollectScreen.tsx

@@ -1,12 +1,13 @@
 import React, {useState, useEffect, useRef} from "react";
-import { View, Text, StyleSheet, Alert, TouchableOpacity, Image, Modal, Pressable, FlatList, LogBox } from "react-native";
+import { View, Text, StyleSheet, Alert, TouchableOpacity, Image, Pressable, FlatList, LogBox, StatusBar, TextInput } from "react-native";
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
 import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
 import Geolocation from "@react-native-community/geolocation";
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { TextInput } from "react-native-paper";
+// import { TextInput } from "react-native-paper";
 import adminCountry from '../../assets/geojson/admKabKota.json';
+import Modal from "react-native-modal";
 
 // MapLibreGL.setAccessToken(null);
 type MapCollectProps = {route: any,navigation: any}
@@ -21,7 +22,9 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
     const [delayRender, setDelayRender] = useState(true);
     const [long,setLong] = useState(0);
     const [lat,setLat] = useState(0);
-    
+    const [modalInputLocation, setmodalInputLocation] = useState(false);
+    const [modalBasemap, setmodalBasemap] = useState(false);
+    const [modalLayerList, setmodalLayerList] = useState(false);
     const getLocation = () => {
         Geolocation.getCurrentPosition(
             position => {
@@ -55,7 +58,6 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
     };
 
     const [zoom, setZoom] = useState(15);
-    console.log('zoomLevel',zoom);
     const MAX_ZOOM_LEVEL = 20;
     const MIN_ZOOM_LEVEL = 5;
 
@@ -81,10 +83,13 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
         setCurrentPosition([long,lat])
         setFixCoor({long:long,lat:lat})
     }
+    
 
     return (
         <View style={{flex:1}}>
-            <View style={{flexDirection:'row',backgroundColor:'#34A6F8'}}>
+            <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
+            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'100%'}} />
+            {/* <View style={{flexDirection:'row',backgroundColor:'#34A6F8'}}>
                 <View style={{flexDirection:'column',width:'80%',paddingLeft:5,paddingBottom:10,paddingEnd:5,paddingTop:5}}>
                     <Text style={{color:'white',fontSize:16,fontWeight:'bold'}}>Longitude</Text>
                     <TextInput style={{height:20, borderRadius:5, backgroundColor:'white'}} 
@@ -112,11 +117,12 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
                         />
                     </View>
                 </TouchableOpacity>
-            </View>
+            </View> */}
             <MapView
-                style={{alignSelf:'stretch',flex:1}} 
+                style={{width:'100%',height:'100%',position:'absolute',marginTop:10,borderTopRightRadius:50,borderTopLeftRadius:35,overflow:'hidden'}}
                 mapStyle={styleURL}
                 zoomEnabled={true}
+                compassEnabled={false}
             >
                 {/* <ShapeSource
                     id="nyc"
@@ -186,23 +192,155 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
                         maxZoomLevel={20}
                     />
                 }
-                
             </MapView>
+
+            <TouchableOpacity onPress={()=>setmodalBasemap(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}>
+                <Image
+                        source={require('../../assets/icon/layerList.png')}
+                    //   style={styles.buttonImageIconStyle}
+                    />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={()=>setmodalLayerList(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}>
+                <Image
+                        source={require('../../assets/icon/mapOutline.png')}
+                    //   style={styles.buttonImageIconStyle}
+                    />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={()=>getLocation()} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}>
+                <Image
+                        source={require('../../assets/icon/findmylock.png')}
+                    //   style={styles.buttonImageIconStyle}
+                    />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={()=>{
+                setmodalInputLocation(true)
+            }} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',right:'4%'}}>
+                <Image
+                        source={require('../../assets/icon/map_16.png')}
+                    //   style={styles.buttonImageIconStyle}
+                    />
+            </TouchableOpacity>
+
+
             {!delayRender ?
                 <TouchableOpacity style={{position:'absolute',alignSelf:'center',bottom:20}} onPress={SelectPosition}>
-                    <View style={{backgroundColor:'#217dd3',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center'}}>
+                    <View style={{backgroundColor:'#0386D0',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center'}}>
                         <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:20,color:'white'}}>Select Position</Text>
                     </View>
                 </TouchableOpacity> 
             :
                 <TouchableOpacity disabled={true} style={{position:'absolute',alignSelf:'center',bottom:20}}>
-                    <View style={{backgroundColor:'#217dd3',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center',opacity:0.5}}>
+                    <View style={{backgroundColor:'#0386D0',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center',opacity:0.5}}>
                         <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:20,color:'white'}}>Waiting Get Position</Text>
                     </View>
                 </TouchableOpacity>
             }
+
+            <Modal isVisible={modalInputLocation} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setmodalInputLocation(false)} style={{top:'18%',alignSelf:'center'}}>
+                <View key={"modal container"} style={{width:330,height:333,backgroundColor:'#FFFFFF',borderRadius:25}}>
+                    <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}>
+                        <Text style={{fontSize:20,fontWeight:'semibold'}}>
+                            Input Point
+                        </Text>
+                        <Pressable onPress={()=>setmodalInputLocation(false)} style={{alignSelf:'flex-end',padding:10}}>
+                            <Image
+                                source={require('../../assets/icon/x.png')}
+                            />
+                        </Pressable>
+                    </View>
+                    <View style={{alignItems:'flex-start',paddingLeft:30,paddingTop:20,paddingRight:30}}>
+                        <Text style={{fontSize:14,fontWeight:'semibold',marginBottom:10}}>Longitude</Text>
+                        <TextInput
+                            inputMode="decimal"
+                            value={long.toString()}
+                            onChangeText={setLong}
+                            selectionHandleColor={'white'}
+                            style={{
+                                    backgroundColor:'white',
+                                    color:'black',
+                                    height : 50,
+                                    paddingHorizontal : 20,
+                                    borderWidth: 1,
+                                    borderColor: "#A6A6A6",
+                                    borderRadius: 10,
+                                    width:'100%'
+                                }}
+                            placeholderTextColor={'grey'} 
+                            placeholder='Longitude'
+                        />
+                        <Text style={{fontSize:14,fontWeight:'semibold',marginBottom:10,marginTop:20}}>Latitude</Text>
+                        <TextInput
+                            inputMode="decimal"
+                            value={lat.toString()}
+                            onChangeText={setLat}
+                            selectionHandleColor={'white'}
+                            style={{
+                                    backgroundColor:'white',
+                                    color:'black',
+                                    height : 50,
+                                    paddingHorizontal : 20,
+                                    borderWidth: 1,
+                                    borderColor: "#A6A6A6",
+                                    borderRadius: 10,
+                                    width:'100%'
+                                }}
+                            placeholderTextColor={'grey'} 
+                            placeholder='Latitude'
+                        />
+                        <TouchableOpacity
+                            onPress={gotoCoordinate}
+                            style={{
+                                flexDirection:'row',
+                                width:'100%',
+                                marginTop:20,
+                                backgroundColor:'#0386D0',
+                                borderRadius: 10,
+                                height : 50,
+                                alignItems:'center',
+                                justifyContent:'center'
+                            }}
+                        >
+                            <Text style={{color:'#F5F5F5',fontSize:16,fontWeight:600}}>Ok</Text>
+                            <Image
+                                source={require('../../assets/icon/ceklis.png')}
+                            />
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </Modal>
+
+            <Modal isVisible={modalBasemap} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setmodalBasemap(false)} style={{top:'18%',alignSelf:'center'}}>
+                <View key={"modal container"} style={{width:330,height:333,backgroundColor:'#FFFFFF',borderRadius:25}}>
+                    <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}>
+                        <Text style={{fontSize:20,fontWeight:'semibold'}}>
+                            Basemap Gallery
+                        </Text>
+                        <Pressable onPress={()=>setmodalBasemap(false)} style={{alignSelf:'flex-end',padding:10}}>
+                            <Image
+                                source={require('../../assets/icon/x.png')}
+                            />
+                        </Pressable>
+                    </View>
+                </View>
+            </Modal>
+
+            <Modal isVisible={modalLayerList} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setmodalLayerList(false)} style={{top:'18%',alignSelf:'center'}}>
+                <View key={"modal container"} style={{width:330,height:333,backgroundColor:'#FFFFFF',borderRadius:25}}>
+                    <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}>
+                        <Text style={{fontSize:20,fontWeight:'semibold'}}>
+                            Layer List
+                        </Text>
+                        <Pressable onPress={()=>setmodalLayerList(false)} style={{alignSelf:'flex-end',padding:10}}>
+                            <Image
+                                source={require('../../assets/icon/x.png')}
+                            />
+                        </Pressable>
+                    </View>
+                </View>
+            </Modal>
+            
             {/* Widget Map */}
-            <View style={styles.gotoLocate}>
+            {/* <View style={styles.gotoLocate}>
                 <TouchableOpacity onPress={() => handleZoom(true)}>
                   <Image
                       source={require('../../assets/icon/plus.png')}
@@ -223,7 +361,7 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
                         style={styles.buttonImageIconStyle}
                     />
                 </TouchableOpacity>
-            </View>
+            </View> */}
         </View>
     )
 }

src/component/settingScreen.tsx

@@ -132,7 +132,9 @@ export default function SettingScreen({navigation}:any){
                 </View>
             </View>
             <View key={"background2"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'7%',borderTopColor:'#A6A6A6B2',borderTopWidth:2, flexDirection:'row',justifyContent:'space-around',alignItems:'center'}}>
-                <Pressable>
+                <Pressable onPress={()=>{
+                    navigation.navigate('Home', { screen: 'Home', })
+                }}>
                     <Image
                         source={require('../../assets/icon/home.png')}
                         style={[styles.buttonImageIconStyle]}