0
134
ViewsHow do I fetch Markers around the users location in React Native MapView?
I want to fetch top 5 markers that are closest to the users location (in order) and put that into a useState object. How can I achieve that?
My map screen loadflow:
- Load map
- Get user location (stored in location useState)
- HTTP Get request for markers location (each marker got lat and ltd)
- Fetch markers around user (if agreed to share location)
- Display screen
const fetchClosestRendelok = async () => {
//Get markers in an area here and add to a json
}
const fetchRendeloData = async () => {
const data = await fetchRendelok()
setRendelok(data)
}
useEffect(() => {
fetchRendeloData()
fetchClosestRendelok()
}, []);
return (
<View style={styles.container}>
<MapView style={styles.map}
provider={PROVIDER_GOOGLE}
region={mapRegion}
showsUserLocation={true}
onPress={() => setSelectedMarkerIndex("")}
>
{
rendelok.map((rendelok) => {
return (
<Marker
key={rendelok.id}
coordinate={{ latitude:parseFloat(rendelok.lat), longitude:parseFloat(rendelok.ltd) }}
onPress={() => markerClick(rendelok)}
tracksViewChanges={false}
>
<View>
<MaterialCommunityIcons name="hospital-marker" size={selectedMarkerIndex === rendelok.id ? 80 : 30} color={selectedMarkerIndex === rendelok.id ? 'red' : color_theme_light.iconColor}/>
</View>
</Marker >
)
})
}
</MapView>
</View>
);
}
·
Juan Pablo Isaza
1 answers
Answer question0
In the end this was my solution, I used libary to order my markers by distance https://github.com/manuelbieh/geolib, then I just compared the coords with my original array.
try {
let coordsArray = []
rendelok.map((rendelok) => coordsArray.push({latitude:rendelok.lat, longitude:rendelok.ltd}))
let closestRendelok = orderByDistance(userPosition.coords, coordsArray).slice(0,5);
var result = rendelok.filter(function (o1) {
return closestRendelok.some(function (o2) {
return o1.lat === o2.latitude;
});
});
setClosestRendelok(result)
} catch (error) {
console.log(error)
}
·
Juan Pablo Isaza
Report
Answer question