Browse Source

centering marker image on the mapformscreen

master
analuizaff 3 years ago
parent
commit
07d5eecbad
  1. 4
      src/app/components/map/Map.html
  2. 54
      src/app/screens/MapFormScreen.js
  3. 6
      src/package-lock.json
  4. 2
      src/package.json

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

@ -80,9 +80,9 @@
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);
//var marker = L.marker([0, 0]).bindPopup("Your pickup spot is in this area").addTo(map);
function onMoveEnd(e) { function onMoveEnd(e) {
marker.setLatLng(map.getCenter());
//marker.setLatLng(map.getCenter());
var payload = { var payload = {
code: 3, code: 3,

54
src/app/screens/MapFormScreen.js

@ -1,6 +1,5 @@
import React, { useContext, useState } from "react"; import React, { useContext, useState } from "react";
import { StyleSheet, View, Text, Image } from "react-native"; import { StyleSheet, View, Text, Image } from "react-native";
import MapView from "react-native-maps";
import colors from "../config/colors"; import colors from "../config/colors";
import { screen_width, screen_height } from "../config/dimensions"; import { screen_width, screen_height } from "../config/dimensions";
@ -17,9 +16,6 @@ const MapFormScreen = (props) => {
const context = useContext(EventLocationContext); //local do evento const context = useContext(EventLocationContext); //local do evento
const contextLocation = useContext(CurrentLocationContext); //local do usuário const contextLocation = useContext(CurrentLocationContext); //local do usuário
const [marker, setMarker] = useState(context.eventCoordinates);
const [moveEndListener, setMoveEndListener] = useState(""); const [moveEndListener, setMoveEndListener] = useState("");
console.log(moveEndListener); console.log(moveEndListener);
@ -55,36 +51,19 @@ const MapFormScreen = (props) => {
latitudeDelta: 70, latitudeDelta: 70,
longitudeDelta: 70 * (screen_width / screen_height), longitudeDelta: 70 * (screen_width / screen_height),
}; };
return ( return (
<View style={styles.container}> <View style={styles.container}>
<OpenStreetMap <OpenStreetMap
style={styles.mapStyle}
moveEndListener={setMoveEndListener} moveEndListener={setMoveEndListener}
/> />
{/*<MapView
style={styles.mapStyle}
showsUserLocation={true}
initialRegion={{ ...default_location }}
region={{
latitude: marker.latitude,
longitude: marker.longitude,
...lat_long_delta,
}}
onRegionChangeComplete={(r) => {
// console.log(r);
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()}>
@ -107,9 +86,12 @@ const styles = StyleSheet.create({
container: { container: {
backgroundColor: colors.black, backgroundColor: colors.black,
flex: 1, flex: 1,
justifyContent: "center",
flexDirection: "row"
}, },
mapStyle: { mapStyle: {
position: "absolute", position: "absolute",
alignSelf:"center",
top: 0, top: 0,
left: 0, left: 0,
right: 0, right: 0,
@ -126,15 +108,19 @@ const styles = StyleSheet.create({
textAlign: "center", textAlign: "center",
}, },
markerFixed: { markerFixed: {
left: "50%",
marginLeft: -19,
marginTop: -48,
alignItems:"center",
//left: "50%",
// marginLeft: -19,
// marginTop: -48,
alignSelf: "center",
justifyContent: "center",
position: "absolute", position: "absolute",
bottom: "50%",
top:"50%",
height: "20%",
flexDirection:"row",
alignItems:"flex-start",
// bottom: "50%",
// top: "50%",
height: "13%",
width: 38, width: 38,
//backgroundColor: "black"
}, },
text: { text: {
color: colors.white, color: colors.white,
@ -143,9 +129,9 @@ const styles = StyleSheet.create({
fontWeight: "bold", fontWeight: "bold",
}, },
marker: { marker: {
height: "40%",
alignSelf:"center",
width: 38,
height: "50%",
// alignSelf:"flex-end",
width: 40,
}, },
callback: { callback: {
bottom: 100, bottom: 100,

6
src/package-lock.json

@ -17005,9 +17005,9 @@
} }
}, },
"react-native-webview": { "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==",
"version": "10.7.0",
"resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-10.7.0.tgz",
"integrity": "sha512-4TSYwJqMBUTKB9+xqGbPwx+eLXbp6RRD7lQ2BumT8eSTfuuqr2rXNqcrlKU1VRla7QGGYowmYmxl2aXIx5k9wA==",
"requires": { "requires": {
"escape-string-regexp": "2.0.0", "escape-string-regexp": "2.0.0",
"invariant": "2.2.4" "invariant": "2.2.4"

2
src/package.json

@ -55,7 +55,7 @@
"react-native-svg-uri": "^1.2.3", "react-native-svg-uri": "^1.2.3",
"react-native-walkthrough-tooltip": "^1.1.11", "react-native-walkthrough-tooltip": "^1.1.11",
"react-native-web": "~0.13.12", "react-native-web": "~0.13.12",
"react-native-webview": "^11.6.2",
"react-native-webview": "10.7.0",
"react-navigation": "^4.4.3", "react-navigation": "^4.4.3",
"react-navigation-header-buttons": "^7.0.1", "react-navigation-header-buttons": "^7.0.1",
"react-navigation-tabs": "^2.10.1", "react-navigation-tabs": "^2.10.1",

Loading…
Cancel
Save