|
@ -1,73 +1,33 @@ |
|
|
import React, { useRef, useState } from "react"; |
|
|
|
|
|
import { Button, StyleSheet, Text, TouchableOpacity, View } from "react-native"; |
|
|
|
|
|
|
|
|
import React, { useState, useEffect, useContext } from "react"; |
|
|
|
|
|
import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; |
|
|
import OpenStreetMap from "../components/map/OpenStreetMap"; |
|
|
import OpenStreetMap from "../components/map/OpenStreetMap"; |
|
|
import assets from "../config/assets" |
|
|
|
|
|
|
|
|
import { CurrentLocationContext } from "../context/CurrentLocationContext"; |
|
|
|
|
|
|
|
|
export default function MapFeedScreen() { |
|
|
export default function MapFeedScreen() { |
|
|
const [position, setPosition] = useState(null); |
|
|
const [position, setPosition] = useState(null); |
|
|
const [clickListener, setClickListener] = useState(""); |
|
|
const [clickListener, setClickListener] = useState(""); |
|
|
const [markerListener, setMarkerListener] = useState(""); |
|
|
const [markerListener, setMarkerListener] = useState(""); |
|
|
|
|
|
|
|
|
console.log(clickListener); |
|
|
|
|
|
|
|
|
const context = useContext(CurrentLocationContext); |
|
|
|
|
|
const location = context.currentCoordinates; |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
setPosition({ |
|
|
|
|
|
lat: location["latitude"], |
|
|
|
|
|
long: location["longitude"], |
|
|
|
|
|
zoom: 16.5, |
|
|
|
|
|
}); |
|
|
|
|
|
}, [location]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const markers = [ |
|
|
|
|
|
{ |
|
|
|
|
|
ID: "1", |
|
|
|
|
|
title: "Casa da Lívia", |
|
|
|
|
|
cords: { |
|
|
|
|
|
lat: 51.505, |
|
|
|
|
|
long: -0.09, |
|
|
|
|
|
}, |
|
|
|
|
|
icon: require("../components/map/icon.html"), |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
ID: "2", |
|
|
|
|
|
title: "Casa do Daniel", |
|
|
|
|
|
icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`, |
|
|
|
|
|
cords: { |
|
|
|
|
|
lat: 51.5032, |
|
|
|
|
|
long: -0.09589, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
ID: "3", |
|
|
|
|
|
title: "Casa do Gabriel", |
|
|
|
|
|
icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`, |
|
|
|
|
|
cords: { |
|
|
|
|
|
lat: 51.509, |
|
|
|
|
|
long: -0.09581, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
]; |
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<View style={styles.container}> |
|
|
<View style={styles.container}> |
|
|
<OpenStreetMap |
|
|
<OpenStreetMap |
|
|
animateToPosition={position} |
|
|
animateToPosition={position} |
|
|
markersList={markers} |
|
|
|
|
|
clickListener={setClickListener} |
|
|
clickListener={setClickListener} |
|
|
markerListener={setMarkerListener} |
|
|
markerListener={setMarkerListener} |
|
|
/> |
|
|
/> |
|
|
|
|
|
|
|
|
<View style={styles.btn}> |
|
|
|
|
|
<TouchableOpacity |
|
|
|
|
|
style={styles.btns} |
|
|
|
|
|
onPress={() => { |
|
|
|
|
|
setPosition({ lat: -23.644957, long: -46.528012, zoom: 10 }); |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<Text style={styles.txt}>UFABC</Text> |
|
|
|
|
|
</TouchableOpacity> |
|
|
|
|
|
|
|
|
|
|
|
<TouchableOpacity |
|
|
|
|
|
style={styles.btns} |
|
|
|
|
|
onPress={() => { |
|
|
|
|
|
setPosition({ lat: 51.505, long: -0.09, zoom: 14 }); |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<Text style={styles.txt}>Londres</Text> |
|
|
|
|
|
</TouchableOpacity> |
|
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
|
|
<View style={styles.callback}> |
|
|
<View style={styles.callback}> |
|
|
<Text style={styles.txt}>{JSON.stringify(clickListener)}</Text> |
|
|
<Text style={styles.txt}>{JSON.stringify(clickListener)}</Text> |
|
|
<Text style={styles.txt}>{JSON.stringify(markerListener)}</Text> |
|
|
<Text style={styles.txt}>{JSON.stringify(markerListener)}</Text> |
|
@ -111,3 +71,4 @@ const styles = StyleSheet.create({ |
|
|
color: "white", |
|
|
color: "white", |
|
|
}, |
|
|
}, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|