Browse Source

adding OSM to MapFormScreen

master
analuizaff 3 years ago
parent
commit
b1cade3a78
  1. 7
      src/app/components/map/LeafLetMap.js
  2. 41
      src/app/components/map/Map.html
  3. 9
      src/app/components/map/OpenStreetMap.js
  4. 44
      src/app/screens/MapFormScreen.js
  5. 16
      src/package-lock.json

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

@ -28,6 +28,7 @@ function goToRegion(mapRef, { lat, long, zoom }) {
const code_to_function = { const code_to_function = {
"1": clickCallback, "1": clickCallback,
"2": markerCallback, "2": markerCallback,
"3": moveEndCallback,
}; };
function clickCallback(payload) { function clickCallback(payload) {
@ -44,6 +45,12 @@ function markerCallback(payload) {
}; };
} }
function moveEndCallback(payload) {
return {
object: "moveend",
id: payload.content,
};
}
function handleEvent(event) { function handleEvent(event) {
const payload = JSON.parse(event.nativeEvent.data); const payload = JSON.parse(event.nativeEvent.data);
return code_to_function[payload.code](payload); return code_to_function[payload.code](payload);

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

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<title>Mobile tutorial - Leaflet</title> <title>Mobile tutorial - Leaflet</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -10,23 +11,19 @@
<!-- type="image/x-icon" --> <!-- type="image/x-icon" -->
<!-- href="docs/images/favicon.ico" --> <!-- href="docs/images/favicon.ico" -->
<!-- /> --> <!-- /> -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
crossorigin=""></script>
<style> <style>
html, html,
body { body {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
#map { #map {
width: 600px; width: 600px;
height: 400px; height: 400px;
@ -37,13 +34,15 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
#map { #map {
height: 100%; height: 100%;
width: 100vw; width: 100vw;
} }
</style> </style>
</head>
<body>
</head>
<body>
<div id="map"></div> <div id="map"></div>
<script> <script>
var map = L.map("map").setView([51.505, -0.09], 13); var map = L.map("map").setView([51.505, -0.09], 13);
@ -81,7 +80,23 @@
window.ReactNativeWebView.postMessage(JSON.stringify(payload)); window.ReactNativeWebView.postMessage(JSON.stringify(payload));
} }
var marker = L.marker([0, 0]).bindPopup("Your pickup spot is in this area").addTo(map);
function onMoveEnd(e) {
marker.setLatLng(map.getCenter());
var payload = {
code: 3,
content: {
latitude: map.getCenter().lat,
longitude: map.getCenter().lng,
},
};
window.ReactNativeWebView.postMessage(JSON.stringify(payload));
}
map.on("moveend", onMoveEnd);
map.on("click", onMapClick); map.on("click", onMapClick);
</script> </script>
</body>
</body>
</html> </html>

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

@ -8,7 +8,7 @@ import {
goToRegion, goToRegion,
} from "./LeafLetMap"; } from "./LeafLetMap";
function bindEventsToListeners(event, clickListener, markerListener) {
function bindEventsToListeners(event, clickListener, markerListener, moveEndListener) {
switch (event.object) { switch (event.object) {
case "click": case "click":
clickListener && clickListener(event.cords); clickListener && clickListener(event.cords);
@ -16,6 +16,9 @@ function bindEventsToListeners(event, clickListener, markerListener) {
case "marker": case "marker":
markerListener && markerListener(event.id); markerListener && markerListener(event.id);
break; break;
case "moveend":
moveEndListener && moveEndListener(event.id);
break;
default: default:
break; break;
} }
@ -26,6 +29,7 @@ export default function OpenStreetMap({
animateToPosition, animateToPosition,
clickListener, clickListener,
markerListener, markerListener,
moveEndListener,
}) { }) {
const [mapRef, setMapRef] = useState(null); const [mapRef, setMapRef] = useState(null);
const [webviewContent, setWebviewContent] = useState(null); const [webviewContent, setWebviewContent] = useState(null);
@ -54,7 +58,8 @@ export default function OpenStreetMap({
bindEventsToListeners( bindEventsToListeners(
handleEvent(event), handleEvent(event),
clickListener, clickListener,
markerListener
markerListener,
moveEndListener,
); );
}} }}
javaScriptEnabled={true} javaScriptEnabled={true}

44
src/app/screens/MapFormScreen.js

@ -9,6 +9,7 @@ import * as Location from "expo-location";
import { EventLocationContext } from "../context/EventLocationContext"; 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";
// 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)
@ -18,6 +19,10 @@ const MapFormScreen = (props) => {
const [marker, setMarker] = useState(context.eventCoordinates); const [marker, setMarker] = useState(context.eventCoordinates);
const [moveEndListener, setMoveEndListener] = useState("");
console.log(moveEndListener);
const getAddress = async (coordenadas) => { const getAddress = async (coordenadas) => {
Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc"); Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
@ -34,7 +39,7 @@ const MapFormScreen = (props) => {
}; };
const setLocation = () => { const setLocation = () => {
getAddress(marker);
getAddress(moveEndListener);
props.navigation.goBack(null); props.navigation.goBack(null);
}; };
@ -51,9 +56,15 @@ const MapFormScreen = (props) => {
longitudeDelta: 70 * (screen_width / screen_height), longitudeDelta: 70 * (screen_width / screen_height),
}; };
return ( return (
<View style={styles.container}> <View style={styles.container}>
<MapView
<OpenStreetMap
moveEndListener={setMoveEndListener}
/>
{/*<MapView
style={styles.mapStyle} style={styles.mapStyle}
showsUserLocation={true} showsUserLocation={true}
initialRegion={{ ...default_location }} initialRegion={{ ...default_location }}
@ -66,14 +77,14 @@ const MapFormScreen = (props) => {
// console.log(r); // console.log(r);
setMarker({ latitude: r.latitude, longitude: r.longitude }); setMarker({ latitude: r.latitude, longitude: r.longitude });
}} }}
/>
<View style={styles.markerFixed}>
/>*/}
{/*<View style={styles.markerFixed}>
<Image <Image
style={styles.marker} style={styles.marker}
resizeMode="contain" resizeMode="contain"
source={require("../assets/map-marker.png")} source={require("../assets/map-marker.png")}
/> />
</View>
</View>*/}
<View style={styles.submit_btn}> <View style={styles.submit_btn}>
<TouchableOpacity onPress={() => setLocation()}> <TouchableOpacity onPress={() => setLocation()}>
@ -116,12 +127,14 @@ const styles = StyleSheet.create({
}, },
markerFixed: { markerFixed: {
left: "50%", left: "50%",
marginLeft: -24,
marginLeft: -19,
marginTop: -48, marginTop: -48,
alignItems:"center",
position: "absolute", position: "absolute",
top: "50%",
height: 48,
width: 48,
bottom: "50%",
top:"50%",
height: "20%",
width: 38,
}, },
text: { text: {
color: colors.white, color: colors.white,
@ -130,8 +143,17 @@ const styles = StyleSheet.create({
fontWeight: "bold", fontWeight: "bold",
}, },
marker: { marker: {
height: 48,
width: 48,
height: "40%",
alignSelf:"center",
width: 38,
},
callback: {
bottom: 100,
alignSelf: "center",
alignItems: "center",
backgroundColor: "gray",
width: "80%",
padding: 10,
}, },
}); });

16
src/package-lock.json

@ -17004,6 +17004,22 @@
"react-timer-mixin": "^0.13.4" "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": { "react-native-windows": {
"version": "0.62.19", "version": "0.62.19",
"resolved": "https://registry.npmjs.org/react-native-windows/-/react-native-windows-0.62.19.tgz", "resolved": "https://registry.npmjs.org/react-native-windows/-/react-native-windows-0.62.19.tgz",

Loading…
Cancel
Save