Map update! 🌎

src/App.css

@@ -35,3 +35,18 @@
 		transform: rotate(360deg);
 	}
 }
+
+/* Small only */
+@media screen and (max-width: 65em) {
+	h1 + svg {
+		display: none;
+	}
+}
+
+/* Medium and up */
+@media screen and (min-width: 65em) {
+	h1 + svg {
+		display: block;
+		margin-bottom: -1.5em;
+	}
+}

src/App.js

@@ -1,6 +1,7 @@
-// import logo from "../logo.svg";
 import React, { useState, useEffect } from "react";
 import { AiFillGithub } from "react-icons/ai";
+import Map from "./components/Map";
+import Coordinates from "./components/Coordinates";
 import ProgressBar from "./components/ProgressBar";
 import "./App.css";
 
@@ -15,38 +16,27 @@ function App() {
 			"https://api.wheretheiss.at/v1/satellites/25544"
 		);
 		const data = await resp.json();
-		await setLongitude(String(data.longitude).slice(0, 7));
-		await setLatitude(String(data.latitude).slice(0, 7));
+		setLongitude(String(data.longitude));
+		setLatitude(String(data.latitude));
 		setProgress(0);
 	}
 
 	useEffect(() => {
 		fetchISSData();
-		setInterval(fetchISSData, 10000);
+		setInterval(fetchISSData, 2000);
 		setInterval(() => {
-			setProgress((prev) => prev + 1);
+			setProgress((prev) => prev + 5);
 		}, 100);
 	}, []);
 
 	return (
 		<div className="App">
 			<header className="App-header">
-				{/* <img src={logo} className="App-logo" alt="logo" /> */}
 				<h1 className="text-4xl sm:text-6xl">
 					International Space Station Position
 				</h1>
-				<table className="my-8 text-3xl sm:text-4xl">
-					<tbody>
-						<tr>
-							<td className="text-left">Latitude:</td>
-							<td className="text-right">{latitude}</td>
-						</tr>
-						<tr>
-							<td className="text-left">Longitude:</td>
-							<td className="text-right pl-10">{longitude}</td>
-						</tr>
-					</tbody>
-				</table>
+				<Map latitude={latitude} longitude={longitude} />
+				<Coordinates latitude={latitude} longitude={longitude} />
 				<ProgressBar progress={progress} />
 				<a
 					href="https://github.com/rzmk/iss-position-spa"

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;