chart

client/package.json

@@ -25,6 +25,7 @@
 		"@mui/x-charts": "7.29.1",
 		"@mui/x-date-pickers": "7.29.4",
 		"@reduxjs/toolkit": "2.7.0",
+		"@types/maplibre-gl": "^1.13.2",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
 		"flag-icons": "7.3.2",
@@ -33,6 +34,7 @@
 		"i18next": "25.4.2",
 		"joi": "17.13.3",
 		"lucide-react": "^0.562.0",
+		"maplibre-gl": "^5.19.0",
 		"mui-color-input": "^7.0.0",
 		"pretty-bytes": "^7.1.0",
 		"pretty-ms": "^9.3.0",
@@ -41,6 +43,7 @@
 		"react-hook-form": "^7.63.0",
 		"react-i18next": "^15.4.0",
 		"react-icons": "5.5.0",
+		"react-map-gl": "^8.1.0",
 		"react-redux": "9.2.0",
 		"react-router": "^6.23.0",
 		"react-router-dom": "^6.23.1",

client/src/Components/monitors/GeoChecksMap.tsx

@@ -0,0 +1,151 @@
+import { useRef, useEffect, useState } from "react";
+import { Box, Typography, Stack } from "@mui/material";
+import Map, { Marker, Popup } from "react-map-gl/maplibre";
+import type { MapRef } from "react-map-gl/maplibre";
+import type { FlatGeoCheck } from "@/Types/GeoCheck";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+interface GeoChecksMapProps {
+	geoChecks: FlatGeoCheck[];
+}
+
+export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
+	const mapRef = useRef<MapRef>(null);
+	const [selectedCheck, setSelectedCheck] = useState<FlatGeoCheck | null>(null);
+
+	useEffect(() => {
+		if (geoChecks.length === 0 || !mapRef.current) return;
+
+		const bounds = geoChecks.reduce(
+			(acc, check) => {
+				return {
+					minLng: Math.min(acc.minLng, check.location.longitude),
+					maxLng: Math.max(acc.maxLng, check.location.longitude),
+					minLat: Math.min(acc.minLat, check.location.latitude),
+					maxLat: Math.max(acc.maxLat, check.location.latitude),
+				};
+			},
+			{
+				minLng: Infinity,
+				maxLng: -Infinity,
+				minLat: Infinity,
+				maxLat: -Infinity,
+			}
+		);
+
+		if (bounds.minLng !== Infinity) {
+			mapRef.current.fitBounds(
+				[
+					[bounds.minLng, bounds.minLat],
+					[bounds.maxLng, bounds.maxLat],
+				],
+				{ padding: 50, duration: 1000 }
+			);
+		}
+	}, [geoChecks]);
+
+	const getMarkerColor = (status: boolean): string => {
+		return status ? "#4caf50" : "#f44336";
+	};
+
+	const formatResponseTime = (timing: number): string => {
+		return `${timing.toFixed(0)}ms`;
+	};
+
+	return (
+		<div
+			style={{ height: "500px", width: "100%", borderRadius: "8px", overflow: "hidden" }}
+		>
+			<Map
+				ref={mapRef}
+				initialViewState={{
+					longitude: 0,
+					latitude: 20,
+					zoom: 1.5,
+				}}
+				style={{ height: "100%", width: "100%" }}
+				mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+			>
+				{geoChecks.map((check, index) => (
+					<Marker
+						key={`${check.id}-${index}`}
+						longitude={check.location.longitude}
+						latitude={check.location.latitude}
+						anchor="bottom"
+						onClick={(e: any) => {
+							e.originalEvent.stopPropagation();
+							setSelectedCheck(check);
+						}}
+					>
+						<div
+							style={{
+								width: "10px",
+								height: "10px",
+								borderRadius: "50%",
+								backgroundColor: getMarkerColor(check.status),
+								boxShadow: "0 2px 4px rgba(0,0,0,0.3)",
+								cursor: "pointer",
+							}}
+						/>
+					</Marker>
+				))}
+
+				{selectedCheck && (
+					<Popup
+						longitude={selectedCheck.location.longitude}
+						latitude={selectedCheck.location.latitude}
+						anchor="top"
+						onClose={() => setSelectedCheck(null)}
+						closeOnClick={false}
+					>
+						<Box sx={{ minWidth: 200, p: 1 }}>
+							<Typography
+								variant="subtitle1"
+								fontWeight="bold"
+								gutterBottom
+							>
+								{selectedCheck.location.city}, {selectedCheck.location.country}
+							</Typography>
+							<Stack spacing={0.5}>
+								<Typography variant="body2">
+									<Typography
+										component="span"
+										fontWeight="medium"
+									>
+										Status:
+									</Typography>{" "}
+									{selectedCheck.status ? "Up" : "Down"}
+								</Typography>
+								<Typography variant="body2">
+									<Typography
+										component="span"
+										fontWeight="medium"
+									>
+										Status Code:
+									</Typography>{" "}
+									{selectedCheck.statusCode}
+								</Typography>
+								<Typography variant="body2">
+									<Typography
+										component="span"
+										fontWeight="medium"
+									>
+										Response Time:
+									</Typography>{" "}
+									{formatResponseTime(selectedCheck.timings.total)}
+								</Typography>
+								<Typography
+									variant="caption"
+									color="text.secondary"
+									sx={{ mt: 0.5 }}
+								>
+									{new Date(selectedCheck.createdAt).toLocaleString()}
+								</Typography>
+							</Stack>
+						</Box>
+					</Popup>
+				)}
+			</Map>
+		</div>
+	);
+};

client/src/Components/monitors/index.tsx

@@ -2,6 +2,7 @@ export * from "./ControlsFilter";
 export * from "./MonitorStatBoxes";
 export * from "./HeaderMonitorControls";
 export * from "./HeaderGeoTabs";
+export * from "./GeoChecksMap";
 export * from "./charts/HistogramStatus";
 export * from "./charts/RadialAvgResponse";
 export * from "./charts/HistogramDetails";

client/src/Pages/Uptime/Details/index.tsx

@@ -7,6 +7,7 @@ import {
 	HistogramDetails,
 	HeaderMonitorControls,
 	HeaderGeoTabs,
+	GeoChecksMap,
 } from "@/Components/monitors";
 import { TrendingUp, AlertTriangle } from "lucide-react";
 import { ChecksTable } from "@/Pages/Uptime/Details/Components/ChecksTable";
@@ -247,6 +248,7 @@ const UptimeDetailsPage = () => {
 						rowsPerPage={geoRowsPerPage}
 						setRowsPerPage={setGeoRowsPerPage}
 					/>
+					<GeoChecksMap geoChecks={geoChecksForTable} />
 				</>
 			)}
 		</BasePage>