+
+ {/* Container for satname, stats and sat image */}
+
+ {/* Stats Container */}
+
+
+
+ {satelliteInfo.name}
+
+
+
+
+
+
+
+ {/* Image container */}
+
+
+
+ {/* Container for map */}
+
+
+
+
+ {/* Container for body content */}
+
+
+
+
+
+ {/* Related projects */}
+
+ {satelliteInfo.relatedProjects?.length != 0 ? (
+
Related Projects
+ ) : null}
-
-
- {satelliteInfo.name}
-
-
-
- {satelliteInfo.relatedProjects?.length ? (
-
- Related Projects
-
- ) : null}
-
- {satelliteInfo.relatedProjects?.map(
- (project: ProjectOrSatellite) => (
-
- ),
- )}
+
+ {satelliteInfo.relatedProjects?.map(
+ (project: ProjectOrSatellite) => (
+
+ ),
+ )}
+
-
+
);
}
diff --git a/frontend/src/components/2dmap/2dMapProjection.tsx b/frontend/src/components/2dmap/2dMapProjection.tsx
index f3ed08a..34cec70 100644
--- a/frontend/src/components/2dmap/2dMapProjection.tsx
+++ b/frontend/src/components/2dmap/2dMapProjection.tsx
@@ -1,7 +1,6 @@
-"use client";
-/* eslint-disable react/jsx-handler-names */
import React from "react";
import * as topojson from "topojson-client";
+// @ts-ignore
import { CustomProjection } from "@visx/geo";
import { geoNaturalEarth1 } from "@visx/vendor/d3-geo";
import topology from "./world-topo.json";
@@ -11,6 +10,7 @@ export type GeoCustomProps = {
height: number;
satLatitude?: number;
satLongitude?: number;
+ futurePositions?: [number, number][];
};
interface FeatureShape {
@@ -20,35 +20,44 @@ interface FeatureShape {
properties: { name: string };
}
-export const background = "";
-
// @ts-expect-error
const world = topojson.feature(topology, topology.objects.units) as {
type: "FeatureCollection";
features: FeatureShape[];
};
-export default function GeoCustom({
+export default function Map2dNaturalProjection({
width,
height,
satLatitude,
satLongitude,
+ futurePositions,
}: GeoCustomProps) {
const centerX = width / 2;
const centerY = height / 2;
const scale = (width / 630) * 100;
- // This function projects lat/long to the SVG coordinate system
const projection = geoNaturalEarth1()
.scale(scale)
.translate([centerX, centerY]);
- // Check if both satLatitude and satLongitude are defined
let satPoint: [number, number] | undefined;
if (typeof satLatitude === "number" && typeof satLongitude === "number") {
satPoint = projection([satLongitude, satLatitude]) || undefined;
}
- return width < 10 ? null : (
+
+ // Function to interpolate the green color based on the index
+ const interPolateColor = (index: number, total: number) => {
+ const startColor = { r: 40, g: 96, b: 241 };
+ const endColor = { r: 241, g: 0, b: 20 };
+ const ratio = index / total;
+ const r = Math.round((1 - ratio) * startColor.r + ratio * endColor.r);
+ const g = Math.round((1 - ratio) * startColor.g + ratio * endColor.g);
+ const b = Math.round((1 - ratio) * startColor.b + ratio * endColor.b);
+ return `rgb(${r}, ${g}, ${b})`;
+ };
+
+ return (
<>