-
- );
- }
-
+
return (
- - Map display requires a Google Maps API key. -
-- Add VITE_GOOGLE_MAPS_API_KEY to your environment. -
-
- {latitude.toFixed(6)}, {longitude.toFixed(6)}
-
-
-
+ {isVisible && (
+
+ {showAccuracyCircle && (
+
+
+ )}
+
+
+
+ )}
+
+ {/* External link overlay */}
+
- 
- {caption && (
-
);
-};
\ No newline at end of file
+};
+
+/** @deprecated Use LocationMap */
+export const Map = LocationMap;
diff --git a/web/src/components/dashboard/GoogleMap.tsx b/web/src/components/dashboard/GoogleMap.tsx
index dc3318a..abbcaa9 100644
--- a/web/src/components/dashboard/GoogleMap.tsx
+++ b/web/src/components/dashboard/GoogleMap.tsx
@@ -1,8 +1,11 @@
-import React, { useRef, useEffect, useState, useCallback } from "react";
-import { calculateAccuracyFromPrecisionBits, calculateZoomFromAccuracy } from "../../lib/mapUtils";
-import { GOOGLE_MAPS_ID } from "../../lib/config";
+import React, { useMemo } from "react";
+import ReactMap, { Source, Layer } from "react-map-gl/maplibre";
+import type { FeatureCollection } from "geojson";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { CARTO_DARK_STYLE } from "../../lib/mapStyle";
+import { buildCircleCoords, calculateAccuracyFromPrecisionBits, calculateZoomFromAccuracy } from "../../lib/mapUtils";
-interface GoogleMapProps {
+interface NodeLocationMapProps {
/** Latitude coordinate */
lat: number;
/** Longitude coordinate */
@@ -16,155 +19,76 @@ interface GoogleMapProps {
}
/**
- * Google Maps component that uses the API loaded via script tag
+ * Single-node location map with accuracy circle
*/
-export const GoogleMap: React.FC
- {caption}
-
- )}
+ ↗
+
+ {caption && (
+
+ {caption}
+
+ )}
-
- );
- }
+ const containerClassName = `w-full ${fullHeight ? "h-full flex-1" : "min-h-[300px]"} rounded-lg overflow-hidden effect-inset`;
return (
-
+ Loading map...
-
+
+
+
+
+
+
+
+
);
};
+
+/** @deprecated Use NodeLocationMap */
+export const GoogleMap = NodeLocationMap;
diff --git a/web/src/components/dashboard/NetworkMap.tsx b/web/src/components/dashboard/NetworkMap.tsx
index d7e9860..33a8969 100644
--- a/web/src/components/dashboard/NetworkMap.tsx
+++ b/web/src/components/dashboard/NetworkMap.tsx
@@ -1,14 +1,16 @@
-import React, { useRef, useEffect, useState, useCallback } from "react";
+import React, { useRef, useCallback, useEffect, useState, useMemo } from "react";
+import ReactMap, { Source, Layer, Popup, MapRef } from "react-map-gl/maplibre";
+import type { FeatureCollection } from "geojson";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { CARTO_DARK_STYLE_LABELLED } from "../../lib/mapStyle";
import { useAppSelector } from "../../hooks";
import { useNavigate } from "@tanstack/react-router";
import { NodeData, GatewayData } from "../../store/slices/aggregatorSlice";
-import { LinkObservation } from "../../store/slices/topologySlice";
import { Position } from "../../lib/types";
import { getActivityLevel, getNodeColors, getStatusText, formatLastSeen } from "../../lib/activity";
-import { GOOGLE_MAPS_ID } from "../../lib/config";
interface NetworkMapProps {
- /** Height of the map in CSS units (optional, will use flex-grow by default) */
+ /** Height of the map in CSS units (optional) */
height?: string;
/** Callback for when auto-zoom state changes */
onAutoZoomChange?: (enabled: boolean) => void;
@@ -18,494 +20,11 @@ interface NetworkMapProps {
showLinks?: boolean;
}
-/**
- * NetworkMap displays all nodes with position data on a Google Map
- */
-export const NetworkMap = React.forwardRef<{ resetAutoZoom: () => void }, NetworkMapProps>(
- ({ height, fullHeight = false, onAutoZoomChange, showLinks = true }, ref) => {
- const navigate = useNavigate();
- const mapRef = useRef
-
- );
- }
-
- return (
-
-
- Loading map...
-
-
-
- );
-});
-
-NetworkMap.displayName = "NetworkMap";
-
-// Define interface for nodes with position data for map display
interface MapNode {
id: number;
position: Position & {
- latitudeI: number; // Override to make required
- longitudeI: number; // Override to make required
+ latitudeI: number;
+ longitudeI: number;
};
isGateway: boolean;
gatewayId?: string;
@@ -516,135 +35,367 @@ interface MapNode {
textMessageCount: number;
}
-// Helper function to determine if a node has valid position data
-function hasValidPosition(node: NodeData): boolean {
- return Boolean(
- node.position &&
- node.position.latitudeI !== undefined &&
- node.position.longitudeI !== undefined
+/**
+ * NetworkMap displays all nodes with position data on a MapLibre GL map
+ */
+export const NetworkMap = React.forwardRef<{ resetAutoZoom: () => void }, NetworkMapProps>(
+ ({ height, fullHeight = false, onAutoZoomChange, showLinks = true }, ref) => {
+ const navigate = useNavigate();
+ const mapRef = useRef
+
+ );
+ }
+);
+
+NetworkMap.displayName = "NetworkMap";
+
+// ─── Popup content ────────────────────────────────────────────────────────────
+
+function NodePopup({
+ node,
+ onNavigate,
+}: {
+ node: MapNode;
+ onNavigate: (id: number) => void;
+}) {
+ const level = getActivityLevel(node.lastHeard, node.isGateway);
+ const colors = getNodeColors(level, node.isGateway);
+ const statusText = getStatusText(level);
+ const secondsAgo = node.lastHeard ? Math.floor(Date.now() / 1000) - node.lastHeard : 0;
+ const lastSeenText = formatLastSeen(secondsAgo);
+ const nodeName = node.longName || node.shortName || `!${node.id.toString(16)}`;
+
+ return (
+
+ {
+ if (mapRef.current) mapRef.current.getMap().getCanvas().style.cursor = "pointer";
+ }}
+ onMouseLeave={() => {
+ if (mapRef.current) mapRef.current.getMap().getCanvas().style.cursor = "grab";
+ }}
+ onClick={handleMapClick as never}
+ onDragStart={handleUserInteraction}
+ onZoomStart={handleUserInteraction}
+ onLoad={() => setMapLoaded(true)}
+ >
+ {/* Topology links — always mounted, visibility controlled via layout property */}
+
+
+
+ {/* Node circles */}
+
+
+
+ {/* Node popup */}
+ {selectedNode && (
+ setSelectedNode(null)}
+ closeOnClick={false}
+ maxWidth="240px"
+ anchor="bottom"
+ >
+ {
+ setSelectedNode(null);
+ navigate({ to: "/node/$nodeId", params: { nodeId: id.toString(16) } });
+ }}
+ />
+
+ )}
+
+
+
+
+ );
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function hasValidPosition(node: NodeData): boolean {
+ return Boolean(
+ node.position &&
+ node.position.latitudeI !== undefined &&
+ node.position.longitudeI !== undefined
);
}
-// Get a list of nodes that have position data
function getNodesWithPosition(
- nodes: Record
+ {nodeName}
+
+
+ {node.isGateway ? "Gateway" : "Node"} · !{node.id.toString(16)}
+
+
+
+
+ {statusText} · {lastSeenText}
+
+
+
+ Packets: {node.messageCount} · Text: {node.textMessageCount}
+
+
+
- = ({ packet }) => {
Gateway Location
-