diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js index 02857de..a305bc2 100644 --- a/src/app/components/map/LeafLetMap.js +++ b/src/app/components/map/LeafLetMap.js @@ -21,10 +21,9 @@ const loadHTMLFile = async () => { return loadLocalAsset(HTML_FILE_PATH); }; -function goToRegion(mapRef, { lat, long, zoom }) { - +function goToRegion(mapRef, position) { mapRef.injectJavaScript(` - map.setView([${lat}, ${long}], ${zoom});`); + setCustomView(${position.lat}, ${position.long}, 16.5);`); } const code_to_function = { diff --git a/src/app/components/map/Map.html b/src/app/components/map/Map.html index 41ee6d1..fe26386 100644 --- a/src/app/components/map/Map.html +++ b/src/app/components/map/Map.html @@ -1,105 +1,112 @@ + + Mobile tutorial - Leaflet + + - - Mobile tutorial - Leaflet - - - - - - - - - - - - + - + #map { + height: 100%; + width: 100vw; + } + + - -
- - + var payload = { + code: 3, + content: { + latitude: map.getCenter().lat, + longitude: map.getCenter().lng, + }, + }; + // map.setView([e.latlng.lat, e.latlng.lng]); + window.ReactNativeWebView.postMessage(JSON.stringify(payload)); + } - \ No newline at end of file + map.on("moveend", onMoveEnd); + map.on("click", onMapClick); + + + diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index 1fb31b7..dd181de 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/src/app/components/map/OpenStreetMap.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { View, StyleSheet, Text } from "react-native"; import WebView from "react-native-webview"; import { @@ -43,10 +43,13 @@ export default function OpenStreetMap({ const [mapRef, setMapRef] = useState(null); const [webviewContent, setWebviewContent] = useState(null); const [markerListener, setMarkerListener] = useState(null); - - if (mapRef != null) { - animateToPosition != null && goToRegion(mapRef, animateToPosition); - } + + useEffect(() => { + if (mapRef != null) { + goToRegion(mapRef, animateToPosition); + } + }, [mapRef, animateToPosition]); + markersList && mapRef && notEmpy(markersList) && @@ -76,12 +79,12 @@ export default function OpenStreetMap({ source={{ html: webviewContent }} /> - - + + {markerListener} diff --git a/src/app/hooks/useLocation.js b/src/app/hooks/useLocation.js index f536872..8b7633d 100644 --- a/src/app/hooks/useLocation.js +++ b/src/app/hooks/useLocation.js @@ -1,4 +1,4 @@ -import { useContext, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import * as Location from "expo-location"; export default function useLocation( @@ -18,7 +18,7 @@ export default function useLocation( accuracy: Location.Accuracy.BestForNavigation, }); - setLocation({ latitude, longitude }); + setLocation({ lat: latitude, long: longitude, zoom: 16.5 }); } catch (error) { console.log(error); } diff --git a/src/app/screens/MapFormScreen.js b/src/app/screens/MapFormScreen.js index 50cf486..029db84 100644 --- a/src/app/screens/MapFormScreen.js +++ b/src/app/screens/MapFormScreen.js @@ -1,29 +1,19 @@ import React, { useContext, useState, useEffect, memo } from "react"; import { StyleSheet, View, Text, Image } from "react-native"; +import * as Location from "expo-location"; import colors from "../config/colors"; -import * as Location from "expo-location"; import { EventLocationContext } from "../context/EventLocationContext"; import { TouchableOpacity } from "react-native-gesture-handler"; import OpenStreetMap from "../components/map/OpenStreetMap"; +import useLocation from "../hooks/useLocation"; // 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); - const location = useContext(EventLocationContext).eventCoordinates; - - useEffect(() => { - setPosition({ - lat: location["latitude"], - long: location["longitude"], - zoom: 16.5, - }); - }, [location]); - + const context = useContext(EventLocationContext); //local do evento + const position = useLocation({ lat: 0.0, long: 0.0, zoom: 16.5 }); const [moveEndListener, setMoveEndListener] = useState(null); - console.log("=====POSIÇÃO: " + typeof location); const getAddress = async (coordenadas) => { Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc"); @@ -32,9 +22,10 @@ const MapFormScreen = (props) => { 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); - var district = (address[0].district == null ? "" : "\n" + address[0].district); + var street = address[0].street == null ? "" : address[0].street; + var number = address[0].name == null ? "" : ", " + address[0].name; + var district = + address[0].district == null ? "" : "\n" + address[0].district; context.saveNewLocation(street + number + district, coordenadas); } else { //Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio @@ -48,15 +39,19 @@ const MapFormScreen = (props) => { //leva o mapa pra localização escolhida pelo usuário const moveLocation = (l) => { + console.log(l); setMoveEndListener(l); - setPosition(l); + // setPosition({ + // lat: l["latitude"], + // long: l["longitude"], + // zoom: 16.5, + // }); }; return ( moveLocation(e)} + moveEndListener={(e) => moveLocation(e)} animateToPosition={position} /> @@ -89,15 +84,7 @@ const styles = StyleSheet.create({ backgroundColor: colors.black, flex: 1, justifyContent: "center", - flexDirection: "row" - }, - mapStyle: { - position: "absolute", - alignSelf: "center", - top: 0, - left: 0, - right: 0, - bottom: 0, + flexDirection: "row", }, button: { backgroundColor: "#1976D2", @@ -128,14 +115,6 @@ const styles = StyleSheet.create({ height: "50%", width: 40, }, - callback: { - bottom: 100, - alignSelf: "center", - alignItems: "center", - backgroundColor: "gray", - width: "80%", - padding: 10, - }, }); export default MapFormScreen;