From e0aba370a678a8c1a05175c98a9f0cff8859deed Mon Sep 17 00:00:00 2001 From: Irul24 Date: Tue, 18 Feb 2025 16:48:18 +0700 Subject: [PATCH] Update Map View --- assets/icon/ceklis.png | Bin 0 -> 220 bytes assets/icon/map_16.png | Bin 0 -> 682 bytes assets/icon/x.png | Bin 0 -> 375 bytes src/component/mapCollectLineScreen.tsx | 44 +++++- src/component/mapCollectPolygonScreen.tsx | 45 +++++- src/component/mapCollectScreen.tsx | 162 ++++++++++++++++++++-- src/component/settingScreen.tsx | 4 +- 7 files changed, 232 insertions(+), 23 deletions(-) create mode 100644 assets/icon/ceklis.png create mode 100644 assets/icon/map_16.png create mode 100644 assets/icon/x.png diff --git a/assets/icon/ceklis.png b/assets/icon/ceklis.png new file mode 100644 index 0000000000000000000000000000000000000000..44dce1311afef50747f35fdeddf285130011b329 GIT binary patch literal 220 zcmeAS@N?(olHy`uVBq!ia0vp^LO{&V!3HE>w#^4|I14-?iy0WWg+Z8+Vb&Z8pde#$ zkh>GZx^prwfgF}}M_)$E)e-c@N{6bF`$B+ufrxQ2wHaKv&CNi5}6rFP>Fi*t2 zkVPsZW6JzForc#rmg?^exO1NSp|GgnM9#@88&;X6#oei0sxx86P03&mdKI;Vst0BxH|3jhEB literal 0 HcmV?d00001 diff --git a/assets/icon/map_16.png b/assets/icon/map_16.png new file mode 100644 index 0000000000000000000000000000000000000000..45198f09328844c870cb63545f7d87645060d7e3 GIT binary patch literal 682 zcmV;b0#*HqP)$;f)pL5}RQFZ{63!c# zCm>a&%A~cInbekS$99||Au*D*>)qM!o1MP}_}_&sQqVh{#&l(6k1^H;`tHRI0n7v2 z9{v@<+s)0UQm>!mw3)Xr0X%kh*S1bie->eID3LPo$hxMi)f`>Z8cP%Oy4}}h;7O8c z815}ifTE|7m{2)?9B}>wq!byF4m^P1Y3i?5GfW{SpM~&LMR{MUTajRr{85A8DxUkk z-++ozE8LONO{67EgWyANYs*k?Zmw=sbw8!cm{SB(cmtU^gms{yo4nh#wO>H5`|i4vXY1>iEJ{z#`77(_XiW2OCC4%*nVp0EBAYKwZ)`tqaNurqvLaRlbc1+ zTVOzi_aHLLLm=IQb#c@35TaqN1X|2y;7>>%aJPm2!ew|QMAL_)bqR;CaTYbFk&|t zj_{u9x~`X)T)D{&1`L3yD_Nf!tT9#>jmaq{aX7C0%2;x3%^nf!uZw>D2i1Nauo+gZI)MaM*<@Z8HFz8!$z~+!ia{g>J#{+?1m` z;)0no3b}Q)SX?l3?rX8Q;MUw_;`PC%Y~P951t&~#k1_A!ew1Zd-u~Z1#8@yZj-RgY VyUJ>c(;5H(002ovPDHLkV1gS)pSJ)2 literal 0 HcmV?d00001 diff --git a/src/component/mapCollectLineScreen.tsx b/src/component/mapCollectLineScreen.tsx index e1a4a21..2d3308d 100644 --- a/src/component/mapCollectLineScreen.tsx +++ b/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. - + setmodalLayerList(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}> - + setmodalBasemap(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}> - + {/* - + */} + + + setmodalBasemap(false)} style={{top:'18%',alignSelf:'center'}}> + + + + Basemap Gallery + + setmodalBasemap(false)} style={{alignSelf:'flex-end',padding:10}}> + + + + + + setmodalLayerList(false)} style={{top:'18%',alignSelf:'center'}}> + + + + Layer List + + setmodalLayerList(false)} style={{alignSelf:'flex-end',padding:10}}> + + + + + {/* handleZoom(true)}> diff --git a/src/component/mapCollectPolygonScreen.tsx b/src/component/mapCollectPolygonScreen.tsx index 7183cb3..9e04432 100644 --- a/src/component/mapCollectPolygonScreen.tsx +++ b/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([]); 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} > - + setmodalLayerList(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}> - + setmodalBasemap(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}> + + setmodalBasemap(false)} style={{top:'18%',alignSelf:'center'}}> + + + + Basemap Gallery + + setmodalBasemap(false)} style={{alignSelf:'flex-end',padding:10}}> + + + + + + + setmodalLayerList(false)} style={{top:'18%',alignSelf:'center'}}> + + + + Layer List + + setmodalLayerList(false)} style={{alignSelf:'flex-end',padding:10}}> + + + + + + {/* Widget Map */} - + {/* handleZoom(true)}> - + */} { startPoint.length === 0 ? currentPosition.length > 0 ? diff --git a/src/component/mapCollectScreen.tsx b/src/component/mapCollectScreen.tsx index 508834b..19ebb92 100644 --- a/src/component/mapCollectScreen.tsx +++ b/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 ( - + + + {/* Longitude - + */} {/* } - + + setmodalBasemap(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}> + + + setmodalLayerList(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}> + + + getLocation()} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}> + + + { + setmodalInputLocation(true) + }} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',right:'4%'}}> + + + + {!delayRender ? - + Select Position : - + Waiting Get Position } + + setmodalInputLocation(false)} style={{top:'18%',alignSelf:'center'}}> + + + + Input Point + + setmodalInputLocation(false)} style={{alignSelf:'flex-end',padding:10}}> + + + + + Longitude + + Latitude + + + Ok + + + + + + + setmodalBasemap(false)} style={{top:'18%',alignSelf:'center'}}> + + + + Basemap Gallery + + setmodalBasemap(false)} style={{alignSelf:'flex-end',padding:10}}> + + + + + + + setmodalLayerList(false)} style={{top:'18%',alignSelf:'center'}}> + + + + Layer List + + setmodalLayerList(false)} style={{alignSelf:'flex-end',padding:10}}> + + + + + + {/* Widget Map */} - + {/* handleZoom(true)}> - + */} ) } diff --git a/src/component/settingScreen.tsx b/src/component/settingScreen.tsx index 55e43ae..173ef3f 100644 --- a/src/component/settingScreen.tsx +++ b/src/component/settingScreen.tsx @@ -132,7 +132,9 @@ export default function SettingScreen({navigation}:any){ - + { + navigation.navigate('Home', { screen: 'Home', }) + }}>