Browse Source

Adjusting parameters and how information is entered on the map (OSM)

master
GabrielTrettel 3 years ago
parent
commit
38dd4c4707
  1. 25
      src/app/components/map/LeafLetMap.js
  2. 13
      src/app/components/map/OpenStreetMap.js
  3. 5
      src/app/screens/MapFeedScreen.js

25
src/app/components/map/LeafLetMap.js

@ -15,8 +15,8 @@ const loadHTMLFile = async () => {
}
};
function goToPosition(mapRef, lat, long) {
mapRef.injectJavaScript(`map.setView([${lat}, ${long}], 13);`);
function goToRegion(mapRef, { lat, long, zoom }) {
mapRef.injectJavaScript(`map.setView([${lat}, ${long}], ${zoom});`);
}
const code_to_function = {
@ -38,18 +38,25 @@ function markerCallback(payload) {
};
}
function parseInput(event) {
function handleEvent(event) {
const payload = JSON.parse(event.nativeEvent.data);
return code_to_function[payload.code](payload);
}
function insertMarker(mapRef, props) {
function insertMarker(mapRef, ID, cords) {
mapRef.injectJavaScript(`
if (!(${props.ID} in markers)) {
markers[${props.ID}] = L.marker([${props.cords.lat}, ${props.cords.long}],
{ID: ${props.ID}});
markers[${props.ID}].addTo(map).on('click', onPopupClick);
// Check if there is no other marker with same ID already in map
if (!(${ID} in markers)) {
// Creates marker object
markers[${ID}] = L.marker([${cords.lat}, ${cords.long}],
{ID: ${ID}});
// Add marker to map and bing callback event to its function
markers[${ID}].addTo(map).on('click', onPopupClick);
}
`);
}
export { loadHTMLFile, parseInput, insertMarker, goToPosition };
export { loadHTMLFile, handleEvent, insertMarker, goToRegion };

13
src/app/components/map/OpenStreetMap.js

@ -3,9 +3,9 @@ import { View } from "react-native";
import WebView from "react-native-webview";
import {
loadHTMLFile,
parseInput,
handleEvent,
insertMarker,
goToPosition,
goToRegion,
} from "./LeafLetMap";
function bindEventsToListeners(event, clickListener, markerListener) {
@ -22,6 +22,7 @@ function bindEventsToListeners(event, clickListener, markerListener) {
}
export default function OpenStreetMap({
initialRegion,
markersList,
animateToPosition,
clickListener,
@ -31,11 +32,13 @@ export default function OpenStreetMap({
const [webviewContent, setWebviewContent] = useState(null);
if (mapRef != null) {
animateToPosition != null && goToPosition(mapRef, ...animateToPosition);
initialRegion != null && goToRegion(mapRef, initialRegion);
animateToPosition != null && goToRegion(mapRef, animateToPosition);
markersList != null &&
markersList.length > 0 &&
markersList.map((m) => insertMarker(mapRef, m));
markersList.map(({ ID, cords }) => insertMarker(mapRef, ID, cords));
}
loadHTMLFile()
@ -50,7 +53,7 @@ export default function OpenStreetMap({
}}
onMessage={(event) => {
bindEventsToListeners(
parseInput(event),
handleEvent(event),
clickListener,
markerListener
);

5
src/app/screens/MapFeedScreen.js

@ -30,6 +30,7 @@ export default function MapFeedScreen() {
return (
<View style={styles.container}>
<OpenStreetMap
initialRegion={{ lat: -12.901799, long: -51.692116, zoom: 3.2 }}
animateToPosition={position}
markersList={markers}
clickListener={setClickListener}
@ -40,7 +41,7 @@ export default function MapFeedScreen() {
<TouchableOpacity
style={styles.btns}
onPress={() => {
setPosition([-23.644957, -46.528012]);
setPosition({ lat: -23.644957, long: -46.528012, zoom: 10 });
}}
>
<Text style={styles.txt}>UFABC</Text>
@ -49,7 +50,7 @@ export default function MapFeedScreen() {
<TouchableOpacity
style={styles.btns}
onPress={() => {
setPosition([51.505, -0.09]);
setPosition({ lat: 51.505, long: -0.09, zoom: 14 });
}}
>
<Text style={styles.txt}>Londres</Text>

Loading…
Cancel
Save