Browse Source

OSM working better on MapFormScreen

master
analuizaff 3 years ago
parent
commit
b2b97c4eba
  1. 3
      src/App.js
  2. 2
      src/app/components/map/LeafLetMap.js
  3. 8
      src/app/components/map/OpenStreetMap.js
  4. 19
      src/app/context/MapRefContext.js
  5. 42
      src/app/screens/MapFormScreen.js

3
src/App.js

@ -15,7 +15,6 @@ 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();
@ -43,14 +42,12 @@ export default function App() {
>
<CurrentLocationProvider>
<EventLocationProvider>
<MapRefProvider>
<MapDataProvider>
<NavigationContainer theme={navigationTheme}>
{user ? <AppNavigator /> : <AuthNavigator />}
<FlashMessage position="top" />
</NavigationContainer>
</MapDataProvider>
</MapRefProvider>
</EventLocationProvider>
</CurrentLocationProvider>
</AuthContext.Provider>

2
src/app/components/map/LeafLetMap.js

@ -24,7 +24,7 @@ const loadHTMLFile = async () => {
function goToRegion(mapRef, { lat, long, zoom }) {
mapRef.injectJavaScript(`
map.setView([${lat}, ${long}], ${zoom}); moveend=false`);
map.setView([${lat}, ${long}], ${zoom});`);
}
const code_to_function = {

8
src/app/components/map/OpenStreetMap.js

@ -1,7 +1,6 @@
import React, { useState, useEffect, useContext } from "react";
import React, { useState } from "react";
import { View, StyleSheet, Text } from "react-native";
import WebView from "react-native-webview";
import { MapRefContext } from "../../context/MapRefContext";
import {
loadHTMLFile,
handleEvent,
@ -44,8 +43,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);
}
@ -64,7 +62,7 @@ export default function OpenStreetMap({
<View flex={1}>
<WebView
ref={(webViewRef) => {
refContext.setMapRef(webViewRef);
setMapRef(webViewRef);
}}
onMessage={(event) => {
bindEventsToListeners(

19
src/app/context/MapRefContext.js

@ -1,19 +0,0 @@
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 (
<MapRefContext.Provider value={{
mapRef,
setMapRef,
}}>
{children}
</MapRefContext.Provider>
)
}
export default MapRefProvider;

42
src/app/screens/MapFormScreen.js

@ -2,17 +2,13 @@ import React, { useContext, useState, useEffect, memo } from "react";
import { StyleSheet, View, Text, Image } from "react-native";
import colors from "../config/colors";
import { screen_width, screen_height } from "../config/dimensions";
import * as Location from "expo-location";
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 [position, setPosition] = useState(null);
@ -27,12 +23,14 @@ const MapFormScreen = (props) => {
}, [location]);
const [moveEndListener, setMoveEndListener] = useState(null);
//console.log("=====POSIÇÃO: " +position.lat);
console.log("=====POSIÇÃO: " + typeof location);
const getAddress = async (coordenadas) => {
Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
const address = await Location.reverseGeocodeAsync(coordenadas);
console.log(address);
console.log(coordenadas);
if (address[0] != undefined) {
var street = (address[0].street == null ? "" : address[0].street);
var number = (address[0].name == null ? "" : ", " + address[0].name);
@ -43,42 +41,23 @@ 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
}`);
}
const moveLocation = (l) => {
setMoveEndListener(l);
setPosition(l);
};
//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 (
<View style={styles.container}>
<OpenStreetMap
style={styles.mapStyle}
moveEndListener={e => moveLocation(e)}
animateToPosition={position}
moveEndListener={e => aplyLocation(e)}
/>
<View style={styles.markerFixed}>
<Image
@ -131,19 +110,13 @@ const styles = StyleSheet.create({
textAlign: "center",
},
markerFixed: {
//left: "50%",
// marginLeft: -19,
// marginTop: -48,
alignSelf: "center",
justifyContent: "center",
position: "absolute",
flexDirection: "row",
alignItems: "flex-start",
// bottom: "50%",
// top: "50%",
height: "13%",
width: 38,
//backgroundColor: "black"
},
text: {
color: colors.white,
@ -153,7 +126,6 @@ const styles = StyleSheet.create({
},
marker: {
height: "50%",
// alignSelf:"flex-end",
width: 40,
},
callback: {

Loading…
Cancel
Save