From b6f7eb5d3cfbaef988c474ed73bed77fe328b056 Mon Sep 17 00:00:00 2001 From: GabrielTrettel Date: Wed, 26 May 2021 17:40:54 -0300 Subject: [PATCH] starting the transition to OpenStreetMap with a test example --- src/app/components/map/Map.html | 68 ++++++++++++ src/app/components/map/OpenStreetMap.js | 90 ++++++++++++++++ src/app/screens/MapFeedScreen.js | 138 ++++++++++++++---------- src/package.json | 3 +- 4 files changed, 240 insertions(+), 59 deletions(-) create mode 100644 src/app/components/map/Map.html create mode 100644 src/app/components/map/OpenStreetMap.js 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",