adding OSM to MapFormScreen

3 years ago · b1cade3a78
5 changed files with 158 additions and 93 deletions
--- 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);
--- a/src/app/components/map/Map.html
+++ b/src/app/components/map/Map.html
@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
  <title>Mobile tutorial - Leaflet</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -10,23 +11,19 @@
  <!--   type="image/x-icon" -->
  <!--   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=="
-      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=="
-      crossorigin=""
-    ></script>
+    crossorigin=""></script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
+
    #map {
      width: 600px;
      height: 400px;
@ -37,13 +34,15 @@
      padding: 0;
      margin: 0;
    }
+
    #map {
      height: 100%;
      width: 100vw;
    }
  </style>
-  </head>
-  <body>
+</head>
+
+<body>
  <div id="map"></div>
  <script>
    var map = L.map("map").setView([51.505, -0.09], 13);
@ -81,7 +80,23 @@
      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);
  </script>
-  </body>
+</body>
+
 </html>
--- 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}
--- 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,6 +19,10 @@ const MapFormScreen = (props) => {

  const [marker, setMarker] = useState(context.eventCoordinates);

+  
+  const [moveEndListener, setMoveEndListener] = useState("");
+  console.log(moveEndListener);
+
  const getAddress = async (coordenadas) => {
    Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");

@ -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 (
    <View style={styles.container}>
-      <MapView
+      <OpenStreetMap
+        moveEndListener={setMoveEndListener}
+      />
+      {/*<MapView
        style={styles.mapStyle}
        showsUserLocation={true}
        initialRegion={{ ...default_location }}
@ -66,14 +77,14 @@ const MapFormScreen = (props) => {
         // console.log(r);
          setMarker({ latitude: r.latitude, longitude: r.longitude });
        }}
-      />
-      <View style={styles.markerFixed}>
+      />*/}
+      {/*<View style={styles.markerFixed}>
        <Image
          style={styles.marker}
          resizeMode="contain"
          source={require("../assets/map-marker.png")}
        />
-      </View>
+    </View>*/}

      <View style={styles.submit_btn}>
        <TouchableOpacity onPress={() => 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,
  },
 });

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