diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js index 434b441..fa2dbe6 100644 --- a/src/app/components/map/LeafLetMap.js +++ b/src/app/components/map/LeafLetMap.js @@ -28,6 +28,7 @@ function goToRegion(mapRef, { lat, long, zoom }) { const code_to_function = { "1": clickCallback, "2": markerCallback, + "3": moveEndCallback, }; function clickCallback(payload) { @@ -44,6 +45,12 @@ function markerCallback(payload) { }; } +function moveEndCallback(payload) { + return { + object: "moveend", + id: payload.content, + }; +} function handleEvent(event) { const payload = JSON.parse(event.nativeEvent.data); return code_to_function[payload.code](payload); diff --git a/src/app/components/map/Map.html b/src/app/components/map/Map.html index 4d01be9..64b12a5 100644 --- a/src/app/components/map/Map.html +++ b/src/app/components/map/Map.html @@ -1,87 +1,102 @@ - - Mobile tutorial - Leaflet - - - - - - - - - - - - - -
- + + + - function onPopupClick(e) { - var payload = { - code: 2, - content: this.options.ID, - }; - window.ReactNativeWebView.postMessage(JSON.stringify(payload)); + +
+ - - + + + + \ No newline at end of file diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index f7ad5fc..0ae06a6 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/src/app/components/map/OpenStreetMap.js @@ -8,7 +8,7 @@ import { goToRegion, } from "./LeafLetMap"; -function bindEventsToListeners(event, clickListener, markerListener) { +function bindEventsToListeners(event, clickListener, markerListener, moveEndListener) { switch (event.object) { case "click": clickListener && clickListener(event.cords); @@ -16,6 +16,9 @@ function bindEventsToListeners(event, clickListener, markerListener) { case "marker": markerListener && markerListener(event.id); break; + case "moveend": + moveEndListener && moveEndListener(event.id); + break; default: break; } @@ -26,6 +29,7 @@ export default function OpenStreetMap({ animateToPosition, clickListener, markerListener, + moveEndListener, }) { const [mapRef, setMapRef] = useState(null); const [webviewContent, setWebviewContent] = useState(null); @@ -54,7 +58,8 @@ export default function OpenStreetMap({ bindEventsToListeners( handleEvent(event), clickListener, - markerListener + markerListener, + moveEndListener, ); }} javaScriptEnabled={true} diff --git a/src/app/screens/MapFormScreen.js b/src/app/screens/MapFormScreen.js index 8795cc7..97ee7c4 100644 --- a/src/app/screens/MapFormScreen.js +++ b/src/app/screens/MapFormScreen.js @@ -9,6 +9,7 @@ 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"; // NOTE: Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga) @@ -18,15 +19,19 @@ const MapFormScreen = (props) => { const [marker, setMarker] = useState(context.eventCoordinates); + + const [moveEndListener, setMoveEndListener] = useState(""); + console.log(moveEndListener); + const getAddress = async (coordenadas) => { Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc"); const address = await Location.reverseGeocodeAsync(coordenadas); - if (address[0] != undefined) { + 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); - context.saveNewLocation(street + number + district, coordenadas); + 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 context.saveNewLocation("Erro ao carregar endereço", coordenadas); @@ -34,7 +39,7 @@ const MapFormScreen = (props) => { }; const setLocation = () => { - getAddress(marker); + getAddress(moveEndListener); props.navigation.goBack(null); }; @@ -51,9 +56,15 @@ const MapFormScreen = (props) => { longitudeDelta: 70 * (screen_width / screen_height), }; + + + return ( - + {/* { // console.log(r); setMarker({ latitude: r.latitude, longitude: r.longitude }); }} - /> - + />*/} + {/* - + */} setLocation()}> @@ -116,12 +127,14 @@ const styles = StyleSheet.create({ }, markerFixed: { left: "50%", - marginLeft: -24, + marginLeft: -19, marginTop: -48, + alignItems:"center", position: "absolute", - top: "50%", - height: 48, - width: 48, + bottom: "50%", + top:"50%", + height: "20%", + width: 38, }, text: { color: colors.white, @@ -130,8 +143,17 @@ const styles = StyleSheet.create({ fontWeight: "bold", }, marker: { - height: 48, - width: 48, + height: "40%", + alignSelf:"center", + width: 38, + }, + callback: { + bottom: 100, + alignSelf: "center", + alignItems: "center", + backgroundColor: "gray", + width: "80%", + padding: 10, }, }); diff --git a/src/package-lock.json b/src/package-lock.json index b66e791..cdb6323 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -17004,6 +17004,22 @@ "react-timer-mixin": "^0.13.4" } }, + "react-native-webview": { + "version": "11.6.2", + "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-11.6.2.tgz", + "integrity": "sha512-7e5ltLBgqt1mX0gdTTS2nFPIjfS6y300wqJ4rLWqU71lDO+8ZeayfsF5qo83qxo2Go74CtLnSeWae4pdGwUqYw==", + "requires": { + "escape-string-regexp": "2.0.0", + "invariant": "2.2.4" + }, + "dependencies": { + "escape-string-regexp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", + "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==" + } + } + }, "react-native-windows": { "version": "0.62.19", "resolved": "https://registry.npmjs.org/react-native-windows/-/react-native-windows-0.62.19.tgz",