iarv/meshexplorer
1
0
Fork 0
mirror of https://github.com/ajvpot/meshexplorer.git synced 2026-05-18 07:16:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

link target for embed view

Browse Source
This commit is contained in:
ajvpot
2025-09-10 03:49:39 +02:00
parent fbe31eb092
commit 93cfd969a8
3 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(embed)/embed/map/page.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });
export default function EmbedMapPage() {
return (
<div className="relative w-full h-screen">
<MapView />
<MapView target="_blank" />
<div className="absolute bottom-4 left-4 z-[1000]">
<a
href="/"
src/components/MapIcons.tsx
+3 -1
View File
@@ -17,6 +17,7 @@ interface ClusterMarkerProps {
interface PopupContentProps {
node: NodePosition;
target?: '_blank' | '_self' | '_parent' | '_top';
}
// Individual node marker component
@@ -145,7 +146,7 @@ export function ClusterMarker({ children }: ClusterMarkerProps) {
}
// Popup content component
export function PopupContent({ node }: PopupContentProps) {
export function PopupContent({ node, target = '_self' }: PopupContentProps) {
return (
<div>
<div><b>ID:</b> {node.type === "meshcore" ? formatPublicKey(node.node_id) : node.node_id}</div>
@@ -175,6 +176,7 @@ export function PopupContent({ node }: PopupContentProps) {
<div style={{marginTop: '8px', paddingTop: '8px', borderTop: '1px solid #e5e7eb'}}>
<a
href={`/meshcore/node/${node.node_id}`}
target={target}
style={{
display: 'inline-block',
padding: '4px 8px',
src/components/MapView.tsx
+20 -8
View File
@@ -34,6 +34,7 @@ type ClusteredMarkersProps = {
selectedNodeId: string | null;
onNodeClick: (nodeId: string | null) => void;
isLoadingNeighbors?: boolean;
target?: '_blank' | '_self' | '_parent' | '_top';
};
// Individual marker component
@@ -42,13 +43,15 @@ const IndividualMarker = React.memo(function IndividualMarker({
showNodeNames,
selectedNodeId,
onNodeClick,
isLoadingNeighbors = false
isLoadingNeighbors = false,
target = '_self'
}: {
node: NodePosition;
showNodeNames: boolean;
selectedNodeId: string | null;
onNodeClick: (nodeId: string | null) => void;
isLoadingNeighbors?: boolean;
target?: '_blank' | '_self' | '_parent' | '_top';
}) {
const map = useMap();
const markerRef = useRef<L.Marker | null>(null);
@@ -79,7 +82,7 @@ const IndividualMarker = React.memo(function IndividualMarker({
const marker = L.marker([node.latitude, node.longitude], { icon });
(marker as any).options.nodeData = node;
marker.bindPopup(renderToString(<PopupContent node={node} />));
marker.bindPopup(renderToString(<PopupContent node={node} target={target} />));
// Add hover handler for meshcore nodes
if (node.type === "meshcore") {
@@ -118,7 +121,7 @@ const IndividualMarker = React.memo(function IndividualMarker({
),
});
markerRef.current.setIcon(icon);
markerRef.current.getPopup()?.setContent(renderToString(<PopupContent node={node} />));
markerRef.current.getPopup()?.setContent(renderToString(<PopupContent node={node} target={target} />));
}
}, [node, showNodeNames, selectedNodeId, isLoadingNeighbors]);
@@ -141,13 +144,15 @@ const ClusteredMarkersGroup = React.memo(function ClusteredMarkersGroup({
showNodeNames,
selectedNodeId,
onNodeClick,
isLoadingNeighbors = false
isLoadingNeighbors = false,
target = '_self'
}: {
nodes: NodePosition[];
showNodeNames: boolean;
selectedNodeId: string | null;
onNodeClick: (nodeId: string | null) => void;
isLoadingNeighbors?: boolean;
target?: '_blank' | '_self' | '_parent' | '_top';
}) {
const map = useMap();
const clusterGroupRef = useRef<any>(null);
@@ -194,7 +199,7 @@ const ClusteredMarkersGroup = React.memo(function ClusteredMarkersGroup({
});
const marker = L.marker([node.latitude, node.longitude], { icon });
(marker as any).options.nodeData = node;
marker.bindPopup(renderToString(<PopupContent node={node} />));
marker.bindPopup(renderToString(<PopupContent node={node} target={target} />));
// Add hover handler for meshcore nodes
if (node.type === "meshcore") {
@@ -240,7 +245,7 @@ const ClusteredMarkersGroup = React.memo(function ClusteredMarkersGroup({
),
});
marker.setIcon(icon);
marker.getPopup()?.setContent(renderToString(<PopupContent node={nodeData} />));
marker.getPopup()?.setContent(renderToString(<PopupContent node={nodeData} target={target} />));
}
});
}, [showNodeNames, selectedNodeId, isLoadingNeighbors]);
@@ -248,7 +253,7 @@ const ClusteredMarkersGroup = React.memo(function ClusteredMarkersGroup({
return null;
});
const ClusteredMarkers = React.memo(function ClusteredMarkers({ nodes, selectedNodeId, onNodeClick, isLoadingNeighbors = false }: ClusteredMarkersProps) {
const ClusteredMarkers = React.memo(function ClusteredMarkers({ nodes, selectedNodeId, onNodeClick, isLoadingNeighbors = false, target = '_self' }: ClusteredMarkersProps) {
const configResult = useConfig();
const config = configResult?.config;
const showNodeNames = config?.showNodeNames !== false;
@@ -265,6 +270,7 @@ const ClusteredMarkers = React.memo(function ClusteredMarkers({ nodes, selectedN
selectedNodeId={selectedNodeId}
onNodeClick={onNodeClick}
isLoadingNeighbors={isLoadingNeighbors}
target={target}
/>
))}
</>
@@ -278,6 +284,7 @@ const ClusteredMarkers = React.memo(function ClusteredMarkers({ nodes, selectedN
selectedNodeId={selectedNodeId}
onNodeClick={onNodeClick}
isLoadingNeighbors={isLoadingNeighbors}
target={target}
/>
);
}
@@ -346,7 +353,11 @@ function NeighborLines({
);
}
export default function MapView() {
interface MapViewProps {
target?: '_blank' | '_self' | '_parent' | '_top';
}
export default function MapView({ target = '_self' }: MapViewProps = {}) {
const [nodePositions, setNodePositions] = useState<NodePosition[]>([]);
const [bounds, setBounds] = useState<[[number, number], [number, number]] | null>(null);
const [loading, setLoading] = useState(false);
@@ -607,6 +618,7 @@ export default function MapView() {
selectedNodeId={selectedNodeId}
onNodeClick={handleNodeClick}
isLoadingNeighbors={neighborsLoading}
target={target}
/>
<NeighborLines
selectedNodeId={selectedNodeId}