diff --git a/src/app/components/map/Map.html b/src/app/components/map/Map.html
new file mode 100644
index 0000000..9786b53
--- /dev/null
+++ b/src/app/components/map/Map.html
@@ -0,0 +1,68 @@
+
+
+
+ Mobile tutorial - Leaflet
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js
new file mode 100644
index 0000000..af88958
--- /dev/null
+++ b/src/app/components/map/OpenStreetMap.js
@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react";
+import { View } from "react-native";
+import WebView from "react-native-webview";
+import { Asset } from "expo-asset";
+import * as FileSystem from "expo-file-system";
+
+const HTML_FILE_PATH = require(`./Map.html`);
+
+const loadHTMLFile = async () => {
+ try {
+ const [{ localUri }] = await Asset.loadAsync(HTML_FILE_PATH);
+ const fileString = await FileSystem.readAsStringAsync(localUri);
+
+ return fileString;
+ } catch (error) {
+ console.warn(error);
+ console.warn("Unable to resolve index file");
+ }
+};
+
+const code_to_function = {
+ "1": clickCallback,
+ "2": clickCallback,
+};
+
+function clickCallback(payload, props) {
+ console.log(payload.content);
+ props.clickListener(JSON.stringify(payload.content));
+}
+
+function parseInput(event, props) {
+ // console.log(event);
+ const payload = JSON.parse(event);
+ // console.log(payload);
+
+ code_to_function[payload.code](payload, props);
+}
+
+function insertMarker(mapRef, props) {
+ console.log(props);
+ mapRef.injectJavaScript(`
+ var layer = L.marker([${props.cords.lat}, ${props.cords.long}], {ID: ${props.ID}} )
+ layer.ID = ${props.ID}
+ layer.addTo(mymap).bindPopup("${props.title}
I am a popup.");`);
+}
+
+function goToPosition(mapRef, lat, long) {
+ mapRef.injectJavaScript(`mymap.setView([${lat}, ${long}], 13);`);
+}
+
+export default function OpenStreetMap(props) {
+ const [mapRef, setMapRef] = useState(null);
+ const [finishedLoad, setFinishedLoad] = useState(false);
+ const [webviewContent, setWebviewContent] = useState(null);
+
+ loadHTMLFile()
+ .then((html) => setWebviewContent(html))
+ .catch((e) => console.warn(e));
+
+ props.animateToPosition != null &&
+ goToPosition(mapRef, ...props.animateToPosition);
+
+ const onLoad = () => {
+ props.markersList != null &&
+ props.markersList.length > 0 &&
+ props.markersList.map((m) => insertMarker(mapRef, m));
+ };
+
+ useEffect(() => {
+ mapRef != null && onLoad();
+ }, [finishedLoad]);
+
+ return (
+
+ {
+ setMapRef(webViewRef);
+ }}
+ onMessage={(event) => {
+ parseInput(event.nativeEvent.data, props);
+ }}
+ javaScriptEnabled={true}
+ source={{ html: webviewContent }}
+ onLoad={() => {
+ setFinishedLoad(true);
+ }}
+ />
+
+ );
+}
diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js
index 6ea86ad..7108c3c 100644
--- a/src/app/screens/MapFeedScreen.js
+++ b/src/app/screens/MapFeedScreen.js
@@ -1,74 +1,96 @@
-import React, { useContext } from "react";
-import { StyleSheet, View } from "react-native";
-import MapView from "react-native-maps";
+import React, { useRef, useState } from "react";
+import { Button, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import OpenStreetMap from "../components/map/OpenStreetMap";
-import colors from "../config/colors";
-import { screen_width, screen_height } from "../config/dimensions";
-import attachFocusToQuery from "../hooks/useFocus";
-import { CurrentLocationContext } from "../context/CurrentLocationContext";
-import { MapMarkerList } from "../components/MapMarkerList";
-import FloatButton from "../components/FloatButton";
-import { MapDataContext } from "../context/MapDataContext";
-import MapPolygons from "../components/MapPolygons";
+export default function MapFeedScreen() {
+ const [position, setPosition] = useState(null);
+ const [clickListener, setClickListener] = useState("");
-function MapFeedScreen(props) {
- const context = useContext(CurrentLocationContext);
- const datas = useContext(MapDataContext);
- const location = context.currentCoordinates;
- const focusChanged = attachFocusToQuery();
+ const markers = [
+ {
+ ID: "1",
+ title: "Casa da Lívia",
+ cords: {
+ lat: 51.505,
+ long: -0.09,
+ },
+ },
+ {
+ ID: "2",
+ title: "Casa do Daniel",
+ cords: {
+ lat: 51.5032,
+ long: -0.09589,
+ },
+ },
+ ];
+ return (
+
+
- const default_location = {
- latitude: -12.901799,
- longitude: -51.692116,
- latitudeDelta: 70,
- longitudeDelta: 70 * (screen_width / screen_height),
- };
+
+ {
+ setPosition([-23.644957, -46.528012]);
+ }}
+ >
+ UFABC
+
- const map_scale = 0.003;
- const lat_long_delta = {
- latitudeDelta: map_scale,
- longitudeDelta: map_scale * (screen_width / screen_height),
- };
+ {
+ setPosition([51.505, -0.09]);
+ }}
+ >
+ Londres
+
+
- return (
-
-
-
- {datas.floodAreas && }
-
-
+
+ {clickListener}
+
);
}
const styles = StyleSheet.create({
container: {
- backgroundColor: colors.black,
flex: 1,
+ backgroundColor: "#FFF",
},
- mapStyle: {
+ callback: {
position: "absolute",
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
+ bottom: 30,
+ alignSelf: "center",
+ alignItems: "center",
+ backgroundColor: "gray",
+ width: "80%",
+ padding: 10,
+ },
+ btn: {
+ width: "80%",
+ position: "absolute",
+ top: 30,
+ flexDirection: "row",
+ justifyContent: "space-evenly",
+ alignItems: "center",
+ alignSelf: "center",
+ },
+ btns: {
+ backgroundColor: "dodgerblue",
+ borderRadius: 10,
+ width: 100,
+ padding: 10,
+ margin: 4,
+ alignItems: "center",
+ },
+ txt: {
+ color: "white",
},
});
-
-export default MapFeedScreen;
diff --git a/src/package.json b/src/package.json
index b4d9d3d..9704dd9 100644
--- a/src/package.json
+++ b/src/package.json
@@ -22,7 +22,7 @@
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"expo": "^39.0.5",
- "expo-asset": "^8.2.1",
+ "expo-asset": "~8.2.0",
"expo-file-system": "~9.2.0",
"expo-image-picker": "~9.1.1",
"expo-location": "~9.0.0",
@@ -55,6 +55,7 @@
"react-native-svg-uri": "^1.2.3",
"react-native-walkthrough-tooltip": "^1.1.11",
"react-native-web": "~0.13.12",
+ "react-native-webview": "^11.6.2",
"react-navigation": "^4.4.3",
"react-navigation-header-buttons": "^7.0.1",
"react-navigation-tabs": "^2.10.1",