screen

src/component/mapCollectScreen.tsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect, useRef} from "react";
 import { View, Text, StyleSheet, Alert, TouchableOpacity, Image, Pressable, FlatList, LogBox, StatusBar, TextInput } from "react-native";
-
+import CheckBox from '@react-native-community/checkbox';
 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";
@@ -8,6 +8,8 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 // import { TextInput } from "react-native-paper";
 import adminCountry from '../../assets/geojson/admKabKota.json';
 import Modal from "react-native-modal";
+import RNFetchBlob from 'rn-fetch-blob';
+import { Ngrok_URL } from "../../urlConfig";
 
 // MapLibreGL.setAccessToken(null);
 type MapCollectProps = {route: any,navigation: any}
@@ -25,6 +27,9 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
     const [modalInputLocation, setmodalInputLocation] = useState(false);
     const [modalBasemap, setmodalBasemap] = useState(false);
     const [modalLayerList, setmodalLayerList] = useState(false);
+    const [isSelectedLayer1, setSelectionLayer1] = useState(false);
+    const [layerList,setLayerList] = useState('')
+
     const getLocation = () => {
         Geolocation.getCurrentPosition(
             position => {
@@ -41,9 +46,30 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
         );
     };
 
+    const getLayerList = async() => {
+        try {
+            await RNFetchBlob.config({
+                trusty : true
+            })
+            .fetch('GET', `https://c557-117-102-73-102.ngrok-free.app/catalog`,{
+                    "Accept": 'application/json',
+                    "Content-Type": "application/json",
+                }
+            )
+            .then(async (resp) => {
+                const json = resp.json()
+                for (let key in json.tiles) {
+                    console.log(`${key}:`);
+                }
+            })
+        } catch (error) {
+            
+        }
+    }
     
-    useEffect(()=> {
     
+    useEffect(()=> {
+        getLayerList()
         getLocation()
         
         const timeoutId = setTimeout(()=> {
@@ -124,27 +150,57 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
                 zoomEnabled={true}
                 compassEnabled={false}
             >
-                {/* <ShapeSource
+                <VectorSource
-                    id="nyc"
+                    id="pdams"
-                    shape={adminCountry}
+                    url="https://c557-117-102-73-102.ngrok-free.app/pdams"
+                    tileUrlTemplates={["https://c557-117-102-73-102.ngrok-free.app/pdams/{z}/{x}/{y}"]}
                     onPress={(e)=>{
-                        const props = e.features[0].properties
+                        console.log(e.features[0].properties?.nama);
-                        Alert.alert(props.NAME_2)
+                        Alert.alert(e.features[0].properties?.nama)
                         
-                    }
+                    }}
-                    }
                 >
-                    <FillLayer 
+                    <LineLayer
-                    id="nycFill"
+                        sourceID="pdams"
-                    style={{fillColor:'grey',fillOpacity:0.5}}
+                        sourceLayerID="pdams"
-                    filter={['!=', 'avail', 'A']}
+                        id="pdams"
+                        style={{lineColor:'red',lineWidth:3}}
                     />
+                    {/* {isSelectedLayer1 ?
+                        
+                    :
+                        null
+                    } */}
+                </VectorSource>
+                <VectorSource
+                    id="permits"
+                    url="https://c557-117-102-73-102.ngrok-free.app/permits"
+                    tileUrlTemplates={["https://c557-117-102-73-102.ngrok-free.app/permits/{z}/{x}/{y}"]}
+                    onPress={(e)=>{
+                        console.log(e.features[0].properties?.company_name);
+                        // Alert.alert(e.features[0].properties?.nama)
+                        
+                    }}
+                >
                     <LineLayer
-                    sourceID="nyc"
+                        sourceID="permits"
-                    id="nycFillLine"
+                        sourceLayerID="permits"
-                    style={{lineColor: 'white', lineWidth:1}}
+                        id="permits"
+                        style={{lineColor:'red',lineWidth:3}}
                     />
-                </ShapeSource> */}
+                    {/* <FillLayer 
+                        id="permits"
+                        style={{
+                            fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'],
+                            fillOpacity:0.5
+                        }}
+                    /> */}
+                    {/* {isSelectedLayer1 ?
+                        
+                    :
+                        null
+                    } */}
+                </VectorSource>
                 {!delayRender ?
                     <>
                         <PointAnnotation
@@ -336,6 +392,16 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
                             />
                         </Pressable>
                     </View>
+                    <View style={{flexDirection:'column',marginTop:'10%',padding:20}}>
+                        <View style={{flexDirection:"row",alignItems:'center',justifyContent:'space-around'}}>
+                            <Text style={{color:'black',fontWeight:'400',fontSize:16}}>Administrasi Kecamatan Jakut</Text>
+                            <CheckBox
+                                disabled={false}
+                                value={isSelectedLayer1}
+                                onValueChange={(newValue) => setSelectionLayer1(newValue)}
+                            />
+                        </View>
+                    </View>
                 </View>
             </Modal>
             

urlConfig.tsx

@@ -2,3 +2,4 @@ export const PJU_API_URL = 'https://apimobile.gisportal.id/api/v1/pju';
 export const USER_API_URL = 'https://apimobile.gisportal.id/api/v1/user';
 export const PDAM_API_URL = 'https://apimobile.gisportal.id/api/v1/pdam';
 export const PERMIT_API_URL = 'https://apimobile.gisportal.id/api/v1/permit';
+export const Ngrok_URL = 'https://c557-117-102-73-102.ngrok-free.app/';