Map update! 🌎

src/components/Coordinates.js

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from "react";
+function Coordinates({ latitude, longitude }) {
+	const [smallScreen, setSmallScreen] = useState(false);
+
+	useEffect(() => {
+		if (window.screen.width < 480) setSmallScreen(true);
+		else setSmallScreen(false);
+	}, [window.screen.width]);
+
+	return (
+		<div>
+			<table className="my-8 text-3xl sm:text-4xl">
+				<tbody>
+					<tr>
+						<td className="text-left">Latitude:</td>
+						<td className="text-right">
+							{smallScreen ? latitude.slice(0, 7) : latitude}
+						</td>
+					</tr>
+					<tr>
+						<td className="text-left">Longitude:</td>
+						<td className="text-right pl-10">
+							{smallScreen ? longitude.slice(0, 7) : longitude}
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+export default Coordinates;

src/components/Map.css

@@ -0,0 +1,3 @@
+.satellite {
+	margin-right: 2rem;
+}

src/components/Map.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { IconContext } from "react-icons";
+import { FaSatellite } from "react-icons/fa";
+import {
+	ComposableMap,
+	Geographies,
+	Geography,
+	Graticule,
+	Marker,
+	Sphere,
+} from "react-simple-maps";
+import "./Map.css";
+
+const geoUrl =
+	"https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json";
+
+const Map = ({ latitude, longitude }) => {
+	// Icon alignment offset fix
+	const newLong = String(Number(longitude) - 2.7);
+	const newLat = String(Number(latitude) + 5);
+
+	return (
+		<ComposableMap projection="geoEqualEarth" width="2400">
+			<Graticule stroke="rgba(255, 255, 255, 0.5)" />
+			<Sphere stroke="#FF5533" strokeWidth={2} />
+			<Geographies geography={geoUrl}>
+				{({ geographies }) =>
+					geographies.map((geo) => (
+						<Geography
+							key={geo.rsmKey}
+							geography={geo}
+							fill="#DDD"
+							stroke="#FFF"
+						/>
+					))
+				}
+			</Geographies>
+			<Marker coordinates={[newLong, newLat]}>
+				<FaSatellite color="red" />
+			</Marker>
+			{/* Debug for exact coordinates comparison to above
+                <Marker coordinates={[longitude, latitude]}>
+				<circle r={8} stroke="red" stroke-width={2} fill="white" />
+			</Marker> */}
+		</ComposableMap>
+	);
+};
+
+export default Map;