Browse Source

Focuses the map on the user's location.

master
GabrielTrettel 3 years ago
parent
commit
ddeaa621ca
  1. 69
      src/app/screens/MapFeedScreen.js

69
src/app/screens/MapFeedScreen.js

@ -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",
}, },
}); });
Loading…
Cancel
Save