diff --git a/src/App.js b/src/App.js
index db01386..a5471be 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,7 @@ import AuthNavigator from "./app/navigation/AuthNavigator";
import { AuthContext } from "./app/auth/context";
import authStorage from "./app/auth/storage";
import MapDataProvider from "./app/context/MapDataContext";
+import MapRefProvider from "./app/context/MapRefContext";
export default function App() {
const [user, setUser] = useState();
@@ -33,7 +34,7 @@ export default function App() {
global.userDataBase = openDatabase();
initDatabase(global.userDataBase);
- return (
+ return (
-
-
- {user ? : }
-
-
-
+
+
+
+ {user ? : }
+
+
+
+
diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js
index 56e239e..4fcab72 100644
--- a/src/app/components/map/LeafLetMap.js
+++ b/src/app/components/map/LeafLetMap.js
@@ -22,7 +22,9 @@ const loadHTMLFile = async () => {
};
function goToRegion(mapRef, { lat, long, zoom }) {
- mapRef.injectJavaScript(`map.setView([${lat}, ${long}], ${zoom});`);
+
+ mapRef.injectJavaScript(`
+ map.setView([${lat}, ${long}], ${zoom}); moveend=false`);
}
const code_to_function = {
diff --git a/src/app/components/map/Map.html b/src/app/components/map/Map.html
index fa2cbd1..3d25d53 100644
--- a/src/app/components/map/Map.html
+++ b/src/app/components/map/Map.html
@@ -61,6 +61,8 @@
}
).addTo(map);
+ var moveend = true;
+
function onMapClick(e) {
var payload = {
code: 1,
@@ -91,6 +93,7 @@
longitude: map.getCenter().lng,
},
};
+ // map.setView([e.latlng.lat, e.latlng.lng]);
window.ReactNativeWebView.postMessage(JSON.stringify(payload));
}
diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js
index 2937eea..13d59ee 100644
--- a/src/app/components/map/OpenStreetMap.js
+++ b/src/app/components/map/OpenStreetMap.js
@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import { View, StyleSheet, Text } from "react-native";
import WebView from "react-native-webview";
+import { MapRefContext } from "../../context/MapRefContext";
import {
loadHTMLFile,
handleEvent,
@@ -43,6 +44,7 @@ export default function OpenStreetMap({
const [mapRef, setMapRef] = useState(null);
const [webviewContent, setWebviewContent] = useState(null);
const [markerListener, setMarkerListener] = useState(null);
+ const refContext = useContext(MapRefContext);
if (mapRef != null) {
animateToPosition != null && goToRegion(mapRef, animateToPosition);
@@ -62,7 +64,7 @@ export default function OpenStreetMap({
{
- setMapRef(webViewRef);
+ refContext.setMapRef(webViewRef);
}}
onMessage={(event) => {
bindEventsToListeners(
diff --git a/src/app/context/MapRefContext.js b/src/app/context/MapRefContext.js
new file mode 100644
index 0000000..34fa73f
--- /dev/null
+++ b/src/app/context/MapRefContext.js
@@ -0,0 +1,19 @@
+import React, { useState, createContext, useContext, useEffect } from "react"
+
+export const MapRefContext = createContext();
+
+const MapRefProvider = ({ children }) => {
+
+ //problema: as vzs renderiza antes de carregar a localização correta do usuário
+ const [mapRef, setMapRef] = useState();
+
+ return (
+
+ {children}
+
+ )
+}
+export default MapRefProvider;
\ No newline at end of file
diff --git a/src/app/screens/MapFormScreen.js b/src/app/screens/MapFormScreen.js
index c66c645..5c49753 100644
--- a/src/app/screens/MapFormScreen.js
+++ b/src/app/screens/MapFormScreen.js
@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useContext, useState, useEffect, memo } from "react";
import { StyleSheet, View, Text, Image } from "react-native";
import colors from "../config/colors";
@@ -9,14 +9,15 @@ import { EventLocationContext } from "../context/EventLocationContext";
import { TouchableOpacity } from "react-native-gesture-handler";
import { CurrentLocationContext } from "../context/CurrentLocationContext";
import OpenStreetMap from "../components/map/OpenStreetMap";
+import { MapRefContext } from "../context/MapRefContext";
// NOTE: Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga)
const MapFormScreen = (props) => {
- const context = useContext(EventLocationContext); //local do evento
+ const context = useContext(EventLocationContext); //local do evento
const [position, setPosition] = useState(null);
- const location = useContext(CurrentLocationContext).currentCoordinates;
-
+ const location = useContext(EventLocationContext).eventCoordinates;
+
useEffect(() => {
setPosition({
lat: location["latitude"],
@@ -25,8 +26,8 @@ const MapFormScreen = (props) => {
});
}, [location]);
- const [moveEndListener, setMoveEndListener] = useState("");
- console.log(moveEndListener);
+ const [moveEndListener, setMoveEndListener] = useState(null);
+ //console.log("=====POSIÇÃO: " +position.lat);
const getAddress = async (coordenadas) => {
Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
@@ -42,19 +43,42 @@ const MapFormScreen = (props) => {
context.saveNewLocation("Erro ao carregar endereço", coordenadas);
}
};
+ const refContext = useContext(MapRefContext);
const setLocation = () => {
getAddress(moveEndListener);
props.navigation.goBack(null);
};
+
+ //leva o mapa pra localização escolhida pelo usuário
+ const aplyLocation = (p) => {
+ //setPosition(position);
+ setMoveEndListener(p);
+ if (refContext.mapRef) {
+ refContext.mapRef.injectJavaScript(`
+ if(moveend == true){
+ map.setView([${p.latitude}, ${p.longitude}], ${16.5}); moveend=false
+ }`);
+ }
+ };
+
+ //inicia o mapa na região do usuário ou no ultimo valor do marker
+ if (refContext.mapRef && moveEndListener==null ) {
+ console.log("IIIIIIIIIIIIIIIIIIIIF "+ location.latitude)
+ refContext.mapRef.injectJavaScript(`
+ map.setView([${position.lat}, ${position.long}], ${16.5}); moveend=false
+ `);
+ }
+
+
return (
aplyLocation(e)}
+
/>
{
resizeMode="contain"
source={require("../assets/map-marker.png")}
/>
-
+
setLocation()}>
@@ -90,7 +114,7 @@ const styles = StyleSheet.create({
},
mapStyle: {
position: "absolute",
- alignSelf:"center",
+ alignSelf: "center",
top: 0,
left: 0,
right: 0,
@@ -113,8 +137,8 @@ const styles = StyleSheet.create({
alignSelf: "center",
justifyContent: "center",
position: "absolute",
- flexDirection:"row",
- alignItems:"flex-start",
+ flexDirection: "row",
+ alignItems: "flex-start",
// bottom: "50%",
// top: "50%",
height: "13%",
@@ -129,7 +153,7 @@ const styles = StyleSheet.create({
},
marker: {
height: "50%",
- // alignSelf:"flex-end",
+ // alignSelf:"flex-end",
width: 40,
},
callback: {