add latitude/longitude extra distance calculations

src/components/NewUI/Event.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import latlongdist, { R_miles } from './latlongdist';
 import UIButton from './UIButton';
 import UIPlacesAutocomplete from './UIPlacesAutocomplete';
 import UISecondaryBox from './UISecondaryBox';
@@ -186,29 +187,61 @@ function Carpools({ event }: { event: IEvent }) {
 export type IPerson = {
 	id: number;
 	name: string;
-	extraDistance: number;
+	latitude: number;
+	longitude: number;
 };
 
 const dummyPeopleData: IPerson[] = [
 	{
 		id: 0,
 		name: 'Rushil Umaretiya',
-		extraDistance: 10,
+		latitude: 11.1,
+		longitude: 10.09,
 	},
 	{
 		id: 1,
 		name: 'Nitin Kanchinadam',
-		extraDistance: 12,
+		latitude: 11.09,
+		longitude: 10.12,
 	},
 ];
 function People({ event }: { event: IEvent }) {
 	const PADDING = '1rem';
 	// eslint-disable-next-line
 	const [people, setPeople] = useState(dummyPeopleData);
+	const myLatitude = 10;
+	const myLongitude = 10;
+	const locationLatitude = 12;
+	const locationLongitude = 12;
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column' }}>
 			<h3 style={{ marginBlockEnd: '0' }}>People</h3>
-			{people.map(({ name, extraDistance, id }) => (
+			{people.map(({ name, latitude, longitude, id }) => {
+				const meToThem = latlongdist(
+					latitude,
+					longitude,
+					myLatitude,
+					myLongitude,
+					R_miles
+				);
+				const themToLocation = latlongdist(
+					latitude,
+					longitude,
+					locationLatitude,
+					locationLongitude,
+					R_miles
+				);
+				const totalWithThem = meToThem + themToLocation;
+				const totalWithoutThem = latlongdist(
+					myLatitude,
+					myLongitude,
+					locationLatitude,
+					locationLongitude,
+					R_miles
+				);
+				const extraDistance = totalWithThem - totalWithoutThem;
+
+				return (
 					<div
 						style={{
 							display: 'flex',
@@ -221,7 +254,7 @@ function People({ event }: { event: IEvent }) {
 							marginBottom: '0.5rem',
 						}}
 					>
-					<b>{name}</b>: +{extraDistance} miles
+						<b>{name}</b>: +{extraDistance.toFixed(1)} miles
 						<div
 							style={{
 								borderRadius: '0.5em',
@@ -236,7 +269,8 @@ function People({ event }: { event: IEvent }) {
 							Invite to carpool
 						</div>
 					</div>
-			))}
+				);
+			})}
 		</div>
 	);
 }

src/components/NewUI/latlongdist.ts

@@ -0,0 +1,35 @@
+export const R_meters = 6371e3;
+export const R_miles = 3958.8;
+
+/**
+ * Calculates the distance from point 1 to point 2 based on R, the radius (in whatever units)
+ *
+ * Source: https://www.movable-type.co.uk/scripts/latlong.html
+ *
+ * @param lat1 Latitude of the first point
+ * @param lon1 Longitude of the first point
+ * @param lat2 Latitude of the second point
+ * @param lon2 Longitude of the second point
+ * @returns The distance in meters between point 1 and point 2
+ */
+export default function latlongdist(
+	lat1: number,
+	lon1: number,
+	lat2: number,
+	lon2: number,
+	R = R_meters
+) {
+	const φ1 = (lat1 * Math.PI) / 180; // φ, λ in radians
+	const φ2 = (lat2 * Math.PI) / 180;
+	const Δφ = ((lat2 - lat1) * Math.PI) / 180;
+	const Δλ = ((lon2 - lon1) * Math.PI) / 180;
+
+	const a =
+		Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+		Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
+	const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+	const d = R * c; // in metres
+
+	return d;
+}