Native-Calendar-App/MapScreen.js at master · NipeH/Native-Calendar-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React, {Component, useState} from 'react';
import { StyleSheet, Text, View, Button, Alert, TextInput, Image, FlatList, TouchableWithoutFeedback } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

// Keyboard piiloon


// Map

export default function MapScreen({navigation}) {

const [mapData, setMapData] = useState([]);
const [locations, setLocations] = useState('');


// TEE TÄMÄ LOPPUUN  - HAKEE GEOCODE ADDRESS DATAN

const getMapData = () => {
    console.log(getMapData);
    const url = 'https://www.mapquestapi.com/geocoding/v1/address?key=c8i3bkA5DUnRAr0KVOQV5S8IOKhPU5TY&inFormat=kvp&outFormat=json&locations='+ locations;
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
       setMapData(responseJson);
    })
    .catch((error) => {
      Alert.alert('Error' , error);
    });

}


    return (

      <View style={styles.container}>

    {/*     <MapView
            style={styles.container}
            initialRegion={{
                latitude:60.200692,
                longitude:24.934302,
                latitudeDelta:0.0322,
                longitudeDelta:0.0221,
                 }} >

        <Marker
            coordinate={{
                latitude:60.201373,
                longitude: 24.934041
                }}
                title='Haaga-Helia'
                />

        </MapView>  */}
            <View style={styles2.container}>

                    <FlatList

                     style={{marginLeft : "5%"}}
                     keyExtractor={item => item.id}
                     renderItem={({item}) =>
                     <Text>{item.location}, {item.latLng.lat},{item.latLng.lng}</Text>}
                     data={mapData}
                    />

                <TextInput style={{width: 350,height:30, borderColor: 'gray', borderWidth: 1}}
                value={locations}
                onChangeText={(locations) => setLocations(locations)}
                    />
                <Button title="Haku" onPress={getMapData}/>
            </View>
      </View>


    );
};


const styles = StyleSheet.create({
  container: {
    flex: 3,

  },
});


const styles2 = StyleSheet.create({
    container: {
      flex: 1 ,
      flexDirection: 'column',
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'space-around',


    },

  });