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 4 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. 171
      src/app/components/map/Map.html
  3. 9
      src/app/components/map/OpenStreetMap.js
  4. 48
      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);

171
src/app/components/map/Map.html
View File

@ -1,87 +1,102 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<title>Mobile tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link -->
<!-- rel="shortcut icon" -->
<!-- type="image/x-icon" -->
<!-- href="docs/images/favicon.ico" -->
<!-- /> -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
<style>
body {
padding: 0;
margin: 0;
}
#map {
height: 100%;
width: 100vw;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map("map").setView([51.505, -0.09], 13);
var markers = {};
<head>
<title>Mobile tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ2FicmllbC10cmV0dGVsIiwiYSI6ImNrb2RjNWIzYjAwczIyd25yNnUweDNveTkifQ.xRASmGTYm0ieS-FjVrXSjA",
{
maxZoom: 18,
attribution:
'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
}
).addTo(map);
<!-- <link -->
<!-- rel="shortcut icon" -->
<!-- type="image/x-icon" -->
<!-- href="docs/images/favicon.ico" -->
<!-- /> -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
function onMapClick(e) {
var payload = {
code: 1,
content: {
latitude: e.latlng.lat.toString().slice(0, 8),
longitude: e.latlng.lng.toString().slice(0, 8),
},
};
window.ReactNativeWebView.postMessage(JSON.stringify(payload));
}
#map {
width: 600px;
height: 400px;
}
</style>
<style>
body {
padding: 0;
margin: 0;
}
#map {
height: 100%;
width: 100vw;
}
</style>
</head>
function onPopupClick(e) {
var payload = {
code: 2,
content: this.options.ID,
};
window.ReactNativeWebView.postMessage(JSON.stringify(payload));
<body>
<div id="map"></div>
<script>
var map = L.map("map").setView([51.505, -0.09], 13);
var markers = {};
L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ2FicmllbC10cmV0dGVsIiwiYSI6ImNrb2RjNWIzYjAwczIyd25yNnUweDNveTkifQ.xRASmGTYm0ieS-FjVrXSjA",
{
maxZoom: 18,
attribution:
'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
} }
).addTo(map);
function onMapClick(e) {
var payload = {
code: 1,
content: {
latitude: e.latlng.lat.toString().slice(0, 8),
longitude: e.latlng.lng.toString().slice(0, 8),
},
};
window.ReactNativeWebView.postMessage(JSON.stringify(payload));
}
function onPopupClick(e) {
var payload = {
code: 2,
content: this.options.ID,
};
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>
</body>
</html>
</script>
</body>
</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}

48
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,15 +19,19 @@ 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");
const address = await Location.reverseGeocodeAsync(coordenadas); const address = await Location.reverseGeocodeAsync(coordenadas);
if (address[0] != undefined) {
if (address[0] != undefined) {
var street = (address[0].street == null ? "" : address[0].street); var street = (address[0].street == null ? "" : address[0].street);
var number = (address[0].name == null ? "" : ", " + address[0].name); var number = (address[0].name == null ? "" : ", " + address[0].name);
var district = (address[0].district == null ? "" : "\n" + address[0].district); var district = (address[0].district == null ? "" : "\n" + address[0].district);
context.saveNewLocation(street + number + district, coordenadas);
context.saveNewLocation(street + number + district, coordenadas);
} else { } else {
//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio //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); context.saveNewLocation("Erro ao carregar endereço", coordenadas);
@ -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