mfajri
/
SurveyApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update Map View

master
Irul24 1 year ago
parent
cbe797612b
commit
e0aba370a6
7 changed files with 232 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      assets/icon/ceklis.png
  2. BIN
      assets/icon/map_16.png
  3. BIN
      assets/icon/x.png
  4. 44
      src/component/mapCollectLineScreen.tsx
  5. 45
      src/component/mapCollectPolygonScreen.tsx
  6. 162
      src/component/mapCollectScreen.tsx
  7. 4
      src/component/settingScreen.tsx

BIN
assets/icon/ceklis.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 220 B

BIN
assets/icon/map_16.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 682 B

BIN
assets/icon/x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 375 B

44
src/component/mapCollectLineScreen.tsx
Unescape View File

@ -1,9 +1,10 @@ @@ -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. @@ -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. @@ -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)}>

45
src/component/mapCollectPolygonScreen.tsx
Unescape View File

@ -1,9 +1,10 @@ @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -238,7 +273,7 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
style={styles.buttonImageIconStyle}
/>
</TouchableOpacity>
</View>
</View> */}
{
startPoint.length === 0 ?
currentPosition.length > 0 ?

162
src/component/mapCollectScreen.tsx
Unescape View File

@ -1,12 +1,13 @@ @@ -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{ @@ -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{ @@ -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{ @@ -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{ @@ -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{ @@ -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{ @@ -223,7 +361,7 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
style={styles.buttonImageIconStyle}
/>
</TouchableOpacity>
</View>
</View> */}
</View>
)
}

4
src/component/settingScreen.tsx
Unescape View File

@ -132,7 +132,9 @@ export default function SettingScreen({navigation}:any){ @@ -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]}

Write Preview
Loading…
Cancel
Save