Load markers from map from api

app/(tabs)/map.tsx

@@ -1,14 +1,5 @@
-import React, {useState} from 'react';
-import {
-  StyleSheet,
-  ScrollView,
-  SafeAreaView,
-  View,
-  StatusBar,
-  Image,
-  FlatList,
-  Switch
-} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, View} from 'react-native';
 
 import {ThemedText} from '@/components/ThemedText';
 import {ThemedView} from '@/components/ThemedView';
@@ -16,46 +7,66 @@ import {Colors} from '@/constants/Colors';
 import {useColorScheme} from '@/hooks/useColorScheme';
 import MapView from '@/components/map/map';
 import List from '@/components/List';
+import {Request} from '@/services/request';
+import {Marker} from 'react-native-maps';
 
 export default function MapScreen() {
   const colorScheme = useColorScheme() ?? 'light';
 
-  const [types, setTypes] = useState([
-    {
-      image: require('@/assets/images/paper.png'),
-      name: 'Papier',
-      isEnabled: false,
-    },
-    {
-      image: require('@/assets/images/paper.png'),
-      name: 'Glas',
-      isEnabled: false,
-    },
-    {
-      image: require('@/assets/images/paper.png'),
-      name: 'Textiel',
-      isEnabled: false,
-    },
-    {
-      image: require('@/assets/images/paper.png'),
-      name: 'GFT+e',
-      isEnabled: false,
-    },
-    {
-      image: require('@/assets/images/paper.png'),
-      name: 'Luiers',
-      isEnabled: false,
-    },
-  ]);
+  const [types, setTypes] = useState<any>([]);
+  const [markers, setMarkers] = useState<any>([]);
 
+  // Load markers and types
+  useEffect(() => {
+    Request.get('locations').then((response) => {
+      const {locations, types} = response;
+
+      // Set types
+      const typesList: any[] = [];
+      types.forEach((type: any) => {
+        typesList.push({
+          name: type.name,
+          image: type.image,
+          isEnabled: false,
+          type: type.config_name,
+        });
+      })
+      setTypes(typesList);
+
+      // Set markers
+      setMarkers(locations);
+    })
+  }, []);
+
+  // Enable/disable type
   const toggleSwitch = (index: any) => {
-    const newData = types.map((item, key) =>
+    const newData = types.map((item: any, key: any) =>
       key === index ? {...item, isEnabled: !item.isEnabled} : item
     );
 
     setTypes(newData);
   };
 
+  // Get all types that are active
+  const getActiveTypes = (): Array<String> => {
+    const list: any[] = [];
+
+    types.forEach((type: any) => {
+      if (type.isEnabled) {
+        list.push(type.type);
+      }
+    });
+
+    return list;
+  }
+
+  // Get all markers that needs to be visible
+  const activeMarkers = () => {
+    return markers.filter((marker: any) => {
+      return getActiveTypes().includes(marker.waste_type);
+    });
+  }
+
   return (
     <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background}}>
       <ThemedView style={styles.container}>
@@ -77,7 +88,21 @@ export default function MapScreen() {
                 latitudeDelta: 0.03,
                 longitudeDelta: 0.0421,
               }}
-            />
+            >
+              {activeMarkers().map((marker: any, index: any) => (
+                <Marker
+                  key={index}
+                  tracksViewChanges={false}
+                  coordinate={{
+                    latitude: parseFloat(marker.latitude),
+                    longitude: parseFloat(marker.longitude),
+                  }}
+                  title={marker.number}
+                  description={marker.description}
+                  pinColor={marker.marker_color}
+                />
+              ))}
+            </MapView>
           </ThemedView>
 
           <ThemedView style={styles.listContainer}>
@@ -86,12 +111,12 @@ export default function MapScreen() {
               renderItem={(item: any, index: any) => (
                 <ThemedView style={styles.listItem} key={index}>
                   <View style={styles.listItemTitle}>
-                    <Image source={item.image} style={styles.listImage}/>
+                    <Image source={{uri: item.image}} style={styles.listImage}/>
                     <ThemedText type="default">{item.name}</ThemedText>
                   </View>
 
                   <Switch
-                    trackColor={{false: '#767577', true: Colors.light.tint}}
+                    trackColor={{false: '#767577', true: Colors[colorScheme].tint}}
                     thumbColor={'#fff'}
                     value={item.isEnabled}
                     onValueChange={() => toggleSwitch(index)}