gabriellopes320
/
WPD-MobileApp
forked from cemaden-educacao/WPD-MobileApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

adding OSM to MapFormScreen

master
analuizaff 3 years ago
parent
2cb12d6d06
commit
b1cade3a78
5 changed files with 158 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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",

Write Preview
Loading…
Cancel
Save