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,87 +1,102 @@
 <!DOCTYPE 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);
-    </script>
-  </body>
-</html>
+  </script>
+</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,15 +19,19 @@ const MapFormScreen = (props) => {

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

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

    const address = await Location.reverseGeocodeAsync(coordenadas);
-    if (address[0] != undefined) {      
+    if (address[0] != undefined) {
      var street = (address[0].street == null ? "" : address[0].street);
      var number = (address[0].name == null ? "" : ", " + address[0].name);
      var district = (address[0].district == null ? "" : "\n" + address[0].district);
-      context.saveNewLocation(street + number +  district, coordenadas);
+      context.saveNewLocation(street + number + district, coordenadas);
    } else {
      //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);
@ -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",