Browse Source

trying to solve a issue with OSM on MapFormsScreen

master
analuizaff 3 years ago
parent
commit
6abe3f8b47
  1. 3
      src/App.js
  2. 4
      src/app/components/map/LeafLetMap.js
  3. 3
      src/app/components/map/Map.html
  4. 6
      src/app/components/map/OpenStreetMap.js
  5. 19
      src/app/context/MapRefContext.js
  6. 34
      src/app/screens/MapFormScreen.js

3
src/App.js

@ -15,6 +15,7 @@ import AuthNavigator from "./app/navigation/AuthNavigator";
import { AuthContext } from "./app/auth/context"; import { AuthContext } from "./app/auth/context";
import authStorage from "./app/auth/storage"; import authStorage from "./app/auth/storage";
import MapDataProvider from "./app/context/MapDataContext"; import MapDataProvider from "./app/context/MapDataContext";
import MapRefProvider from "./app/context/MapRefContext";
export default function App() { export default function App() {
const [user, setUser] = useState(); const [user, setUser] = useState();
@ -42,12 +43,14 @@ export default function App() {
> >
<CurrentLocationProvider> <CurrentLocationProvider>
<EventLocationProvider> <EventLocationProvider>
<MapRefProvider>
<MapDataProvider> <MapDataProvider>
<NavigationContainer theme={navigationTheme}> <NavigationContainer theme={navigationTheme}>
{user ? <AppNavigator /> : <AuthNavigator />} {user ? <AppNavigator /> : <AuthNavigator />}
<FlashMessage position="top" /> <FlashMessage position="top" />
</NavigationContainer> </NavigationContainer>
</MapDataProvider> </MapDataProvider>
</MapRefProvider>
</EventLocationProvider> </EventLocationProvider>
</CurrentLocationProvider> </CurrentLocationProvider>
</AuthContext.Provider> </AuthContext.Provider>

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

@ -22,7 +22,9 @@ const loadHTMLFile = async () => {
}; };
function goToRegion(mapRef, { lat, long, zoom }) { 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 = { const code_to_function = {

3
src/app/components/map/Map.html

@ -61,6 +61,8 @@
} }
).addTo(map); ).addTo(map);
var moveend = true;
function onMapClick(e) { function onMapClick(e) {
var payload = { var payload = {
code: 1, code: 1,
@ -91,6 +93,7 @@
longitude: map.getCenter().lng, longitude: map.getCenter().lng,
}, },
}; };
// map.setView([e.latlng.lat, e.latlng.lng]);
window.ReactNativeWebView.postMessage(JSON.stringify(payload)); window.ReactNativeWebView.postMessage(JSON.stringify(payload));
} }

6
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 { View, StyleSheet, Text } from "react-native";
import WebView from "react-native-webview"; import WebView from "react-native-webview";
import { MapRefContext } from "../../context/MapRefContext";
import { import {
loadHTMLFile, loadHTMLFile,
handleEvent, handleEvent,
@ -43,6 +44,7 @@ export default function OpenStreetMap({
const [mapRef, setMapRef] = useState(null); const [mapRef, setMapRef] = useState(null);
const [webviewContent, setWebviewContent] = useState(null); const [webviewContent, setWebviewContent] = useState(null);
const [markerListener, setMarkerListener] = useState(null); const [markerListener, setMarkerListener] = useState(null);
const refContext = useContext(MapRefContext);
if (mapRef != null) { if (mapRef != null) {
animateToPosition != null && goToRegion(mapRef, animateToPosition); animateToPosition != null && goToRegion(mapRef, animateToPosition);
@ -62,7 +64,7 @@ export default function OpenStreetMap({
<View flex={1}> <View flex={1}>
<WebView <WebView
ref={(webViewRef) => { ref={(webViewRef) => {
setMapRef(webViewRef);
refContext.setMapRef(webViewRef);
}} }}
onMessage={(event) => { onMessage={(event) => {
bindEventsToListeners( bindEventsToListeners(

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

34
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 { StyleSheet, View, Text, Image } from "react-native";
import colors from "../config/colors"; import colors from "../config/colors";
@ -9,13 +9,14 @@ import { EventLocationContext } from "../context/EventLocationContext";
import { TouchableOpacity } from "react-native-gesture-handler"; import { TouchableOpacity } from "react-native-gesture-handler";
import { CurrentLocationContext } from "../context/CurrentLocationContext"; import { CurrentLocationContext } from "../context/CurrentLocationContext";
import OpenStreetMap from "../components/map/OpenStreetMap"; 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) // 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 MapFormScreen = (props) => {
const context = useContext(EventLocationContext); //local do evento const context = useContext(EventLocationContext); //local do evento
const [position, setPosition] = useState(null); const [position, setPosition] = useState(null);
const location = useContext(CurrentLocationContext).currentCoordinates;
const location = useContext(EventLocationContext).eventCoordinates;
useEffect(() => { useEffect(() => {
setPosition({ setPosition({
@ -25,8 +26,8 @@ const MapFormScreen = (props) => {
}); });
}, [location]); }, [location]);
const [moveEndListener, setMoveEndListener] = useState("");
console.log(moveEndListener);
const [moveEndListener, setMoveEndListener] = useState(null);
//console.log("=====POSIÇÃO: " +position.lat);
const getAddress = async (coordenadas) => { const getAddress = async (coordenadas) => {
Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc"); Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
@ -42,18 +43,41 @@ const MapFormScreen = (props) => {
context.saveNewLocation("Erro ao carregar endereço", coordenadas); context.saveNewLocation("Erro ao carregar endereço", coordenadas);
} }
}; };
const refContext = useContext(MapRefContext);
const setLocation = () => { const setLocation = () => {
getAddress(moveEndListener); getAddress(moveEndListener);
props.navigation.goBack(null); 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 ( return (
<View style={styles.container}> <View style={styles.container}>
<OpenStreetMap <OpenStreetMap
style={styles.mapStyle} style={styles.mapStyle}
animateToPosition={position} animateToPosition={position}
moveEndListener={setMoveEndListener}
moveEndListener={e => aplyLocation(e)}
/> />
<View style={styles.markerFixed}> <View style={styles.markerFixed}>

Loading…
Cancel
Save