You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
328 lines
14 KiB
328 lines
14 KiB
import React, {useState, useEffect} from "react"; |
|
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{ |
|
|
|
const apiKey = "JoJs2pcDv5o0yQlQLMfI"; |
|
const [basemap, setBasemap] = useState("streets-v2"); |
|
const styleURL = `https://api.maptiler.com/maps/${basemap}/style.json?key=${apiKey}`; |
|
|
|
|
|
const [currentPosition, setCurrentPosition] = useState<[number,number] | []>([]); |
|
const [currentPositionCamera, setCurrentPositionCamera] = useState<[number,number] | []>([0,0]); |
|
const [coordinates,setCoordinates] = useState<any>([ |
|
]); |
|
|
|
const [startPoint, setStartPoint] = useState<any>([]); |
|
const [manyPick, setManyPick] = useState(0); |
|
|
|
const morePoint = () => { |
|
setManyPick(manyPick+1); |
|
setStartPoint([...startPoint,`point${manyPick+1}`]) |
|
setCoordinates([...coordinates,currentPosition]) |
|
} |
|
|
|
const checkArrayCoord = (()=> { |
|
console.log("for Geojeson",coordinates[0]) |
|
}) |
|
|
|
|
|
const [reqCount, setReqCount] = useState(0); |
|
const [long,setLong] = useState(0); |
|
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(() => { |
|
Geolocation.getCurrentPosition( |
|
position => { |
|
setReqCount((reqCount) => reqCount + 1) |
|
setLong(position.coords.longitude); |
|
setLat(position.coords.latitude); |
|
setAccuracy(position.coords.accuracy); |
|
setTimeStamp(position.timestamp); |
|
setReqCount((reqCount) => reqCount++ ); |
|
setCurrentPosition([position.coords.longitude,position.coords.latitude]) |
|
setCurrentPositionCamera([position.coords.longitude,position.coords.latitude]) |
|
console.log("Long",position.coords.longitude); |
|
console.log("Lat",position.coords.latitude); |
|
console.log("current",[position.coords.longitude,position.coords.latitude]); |
|
|
|
|
|
}, |
|
error => { |
|
console.log('Error Getting current position', error); |
|
}, |
|
{timeout:20000,enableHighAccuracy:false,maximumAge:0} |
|
); |
|
|
|
|
|
// setReqCount((reqCount) => (reqCount > 0 ? reqCount+1 : 10)); |
|
}, 5000); |
|
|
|
return () => { |
|
clearInterval(intervalID); |
|
}; |
|
}, []); |
|
|
|
const replacingCoordinate = (index:number,coor:any) => { |
|
const nextCoordinate = coordinates.map((c:any,i:number) => { |
|
if (i === index){ |
|
return c = coor |
|
} else { |
|
return c |
|
} |
|
}); |
|
setCoordinates(nextCoordinate); |
|
} |
|
|
|
const [zoom, setZoom] = useState(15); |
|
const MAX_ZOOM_LEVEL = 20; |
|
const MIN_ZOOM_LEVEL = 5; |
|
|
|
const handleZoom = (isZoomIn = false) => { |
|
let currentZoomLevel = zoom; |
|
if (!isZoomIn && currentZoomLevel === MAX_ZOOM_LEVEL) { |
|
currentZoomLevel -= 1; |
|
} |
|
else if (isZoomIn && currentZoomLevel === MIN_ZOOM_LEVEL) { |
|
currentZoomLevel += 1; |
|
} |
|
if ( |
|
currentZoomLevel >= MAX_ZOOM_LEVEL || |
|
currentZoomLevel <= MIN_ZOOM_LEVEL |
|
) { |
|
return; |
|
} |
|
currentZoomLevel = isZoomIn ? currentZoomLevel + 1 : currentZoomLevel - 1; |
|
setZoom(currentZoomLevel); |
|
} |
|
|
|
|
|
|
|
return( |
|
<View style={{flex:1}}> |
|
<StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} /> |
|
<View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'100%'}} /> |
|
|
|
<MapView |
|
style={{width:'100%',height:'100%',position:'absolute',marginTop:10,borderTopRightRadius:50,borderTopLeftRadius:35,overflow:'hidden'}} |
|
mapStyle={styleURL} |
|
zoomEnabled={true} |
|
onRegionDidChange={(region)=> |
|
setZoom(region.properties.zoomLevel) |
|
} |
|
compassEnabled={false} |
|
> |
|
<Camera |
|
key={"camera"} |
|
centerCoordinate={currentPositionCamera} |
|
zoomLevel={zoom} |
|
minZoomLevel={5} |
|
maxZoomLevel={20} |
|
/> |
|
{coordinates.length > 1 ? |
|
<ShapeSource |
|
id="line" |
|
shape={{ |
|
"type": "FeatureCollection", |
|
"features": [ |
|
{ |
|
"type": "Feature", |
|
"properties": {}, |
|
"geometry": { |
|
"type": "LineString", |
|
"coordinates": coordinates |
|
} |
|
} |
|
] |
|
}} |
|
> |
|
<LineLayer |
|
id="linelayer1" |
|
style={{lineColor:'red',lineWidth:3}} |
|
/> |
|
</ShapeSource> |
|
: |
|
null |
|
} |
|
<UserLocation |
|
key={"userLoc"} |
|
androidRenderMode='compass' |
|
renderMode='native' |
|
animated={true} |
|
showsUserHeadingIndicator={true} |
|
|
|
/> |
|
{ |
|
startPoint.map((item:any,index:number)=>( |
|
<PointAnnotation |
|
children={<></>} |
|
key={index} |
|
id={item} |
|
coordinate={coordinates[index]} |
|
draggable={true} |
|
onDrag={(e)=> { |
|
replacingCoordinate(index,e.geometry.coordinates) |
|
|
|
|
|
}} |
|
/> |
|
)) |
|
} |
|
|
|
|
|
</MapView> |
|
|
|
<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 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%'}}> |
|
<Image |
|
source={require('../../assets/icon/findmylock.png')} |
|
// 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> |
|
|
|
{/* <View style={styles.gotoLocate}> |
|
<TouchableOpacity onPress={() => handleZoom(true)}> |
|
<Image |
|
source={require('../../assets/icon/plus.png')} |
|
style={styles.buttonImageIconStyle} |
|
/> |
|
</TouchableOpacity> |
|
<TouchableOpacity onPress={() => handleZoom()}> |
|
<Image |
|
source={require('../../assets/icon/minus.png')} |
|
style={styles.buttonImageIconStyle} |
|
/> |
|
</TouchableOpacity> |
|
<TouchableOpacity onPress={checkArrayCoord}> |
|
<Image |
|
source={require('../../assets/icon/MyLoc.png')} |
|
style={styles.buttonImageIconStyle} |
|
/> |
|
</TouchableOpacity> |
|
</View> */} |
|
|
|
{ |
|
startPoint.length === 0 ? |
|
currentPosition.length > 0 ? |
|
<TouchableOpacity style={{position:'absolute',alignSelf:'center',bottom:20}} onPress={morePoint}> |
|
<View style={{backgroundColor:'#217dd3',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center'}}> |
|
<Text style={{alignSelf:'center',fontWeight:'bold',fontSize:20,color:'white'}}>Pick Start Point</Text> |
|
</View> |
|
</TouchableOpacity> |
|
: |
|
<TouchableOpacity disabled={true} style={{position:'absolute',alignSelf:'center',bottom:20}} onPress={morePoint}> |
|
<View style={{backgroundColor:'#217dd3',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center',opacity:0.5}}> |
|
<Text style={{alignSelf:'center',fontWeight:'bold',fontSize:20,color:'white'}}>Pick Start Point</Text> |
|
</View> |
|
</TouchableOpacity> |
|
: |
|
<View style={{position:'absolute',width:'100%',bottom:20,justifyContent:'center',alignItems:'center',flexDirection:'row'}}> |
|
<TouchableOpacity style={{margin:10}} onPress={morePoint}> |
|
<View style={{backgroundColor:'#2daee0',flexDirection:'row',width:60,height:60,borderRadius:100,justifyContent:'center'}}> |
|
<Image |
|
source={require('../../assets/icon/add.png')} |
|
style={{width:40,height:40,justifyContent:'center',alignSelf:'center'}} |
|
/> |
|
</View> |
|
</TouchableOpacity> |
|
{ |
|
startPoint.length > 1 ? |
|
<TouchableOpacity style={{margin:10}} onPress={()=> { |
|
navigation.navigate('PDAM Collecting', { screen: 'PDAM Collecting',coordinates: coordinates}) |
|
}}> |
|
<View style={{backgroundColor:'#43eb34',flexDirection:'row',width:60,height:60,borderRadius:100,justifyContent:'center'}}> |
|
<Image |
|
source={require('../../assets/icon/check.png')} |
|
style={{width:40,height:40,justifyContent:'center',alignSelf:'center'}} |
|
/> |
|
</View> |
|
</TouchableOpacity> |
|
: |
|
null |
|
} |
|
|
|
|
|
</View> |
|
} |
|
</View> |
|
) |
|
} |
|
|
|
const styles = StyleSheet.create({ |
|
buttonImageIconStyle: { |
|
padding: 10, |
|
margin: 5, |
|
height: 25, |
|
width: 25, |
|
resizeMode: 'stretch', |
|
}, |
|
gotoLocate: { |
|
opacity: 0.6, |
|
position: 'absolute', |
|
top:120, |
|
right: 5, |
|
borderRadius:8, |
|
paddingHorizontal:7, |
|
width: 50, |
|
// height: 50, |
|
backgroundColor: "white", |
|
flexDirection: 'column', |
|
gap: 10 |
|
} |
|
}); |
|
|
|
export default MapCollectLineScreen;
|
|
|