Browse Source

Attempt n°2 to solve the problem of markers not being updated on the map as data is entered.

master
GabrielTrettel 3 years ago
parent
commit
795754538e
  1. 3
      src/app/components/map/OpenStreetMap.js
  2. 19
      src/app/screens/MapFeedScreen.js

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

@ -39,6 +39,7 @@ export default function OpenStreetMap({
markersList,
clickListener,
moveEndListener,
focusChanged,
}) {
const [mapRef, setMapRef] = useState(null);
const webviewContent = html_content;
@ -59,7 +60,7 @@ export default function OpenStreetMap({
markersList.forEach((val, key) => {
insertMarker(mapRef, val.ID, val.coordinate, val.image);
});
}, [markersList])
}, [markersList, focusChanged])
return (
<View flex={1}>

19
src/app/screens/MapFeedScreen.js

@ -1,33 +1,20 @@
import React, { useState, useEffect, useContext } from "react";
import { StyleSheet, Text, View } from "react-native";
import React, { useEffect, useContext } from "react";
import { StyleSheet, View } from "react-native";
import OpenStreetMap from "../components/map/OpenStreetMap";
import { CurrentLocationContext } from "../context/CurrentLocationContext";
import attachFocusToQuery from "../hooks/useFocus";
import {MapMarkerList} from "../components/MapMarkerList";
export default function MapFeedScreen() {
const [position, setPosition] = useState(null);
const context = useContext(CurrentLocationContext);
const location = context.currentCoordinates;
const focusChanged = attachFocusToQuery();
useEffect(() => {
setPosition({
lat: location["latitude"],
long: location["longitude"],
zoom: 16.5,
});
}, [location]);
return (
<View style={styles.container}>
<OpenStreetMap
markersList={MapMarkerList({reload:focusChanged, renderRain:true})}
// animateToPosition={position}
centerUserLocation={true}
focusChanged={focusChanged}
/>
</View>

Loading…
Cancel
Save