I'm doing React Native App uses Maps, And work with Real-time DB Firebase to get all data contained latitude, longitude, etc.
I get current location [latitude and longitude] calculate the distance between the current location and the nearest I get in with TurfJs
My issue is I need to display all Users from DB which are nearest to my current location. but the function just gets the first one nearest! How To Handle this?
Function
handleNearby = () => {
const { region, providers } = this.state;
let points = providers.map(p =>
turf.point([p.coordinates.latitude, p.coordinates.longitude])
);
let collection = turf.featureCollection(points);
let currentPoint = turf.point([region.longitude, region.latitude]);
let nearest = turf.nearestPoint(currentPoint, collection);
let addToMap = [currentPoint, points, nearest];
console.log(nearest);
console.log(Math.floor(nearest.properties.distanceToPoint)); // let's say 50Km
};
<MapView
style={[styles.map, { width: this.state.width }]}
style={StyleSheet.absoluteFill}
// onMapReady={() => console.log(this.state.region)}
showsUserLocation={true}
region={region}
loadingEnabled={true}
// style={StyleSheet.absoluteFill}
textStyle={{ color: "#bc8b00" }}
containerStyle={{ backgroundColor: "white", borderColor: "#BC8B00" }}
>
<Marker
coordinate={region}
title="Hello"
description="description"
pinColor="navy"
// onPress={() => alert("Provider Profile")}
// icon={require('../assets/camera-icon.png')}
onCalloutPress={() => alert("Provider Profile")}
/>
//
{this.state.providers.map((marker, index) => (
<Marker
key={index}
coordinate={marker.coordinates}
title={marker.username}
/>
))}
// Nearest Point Marker Should Be Here
</MapView>;