World Map Graph with Animated Connections

World map overlay with animated lines showing international relationships and snapshot functionality.

World Map Graph with Animated Connections

Functional Overview

This demo overlays a relationship graph on a world map with animated lines showing connections between different geographic regions. It demonstrates international relationship visualization with snapshot functionality.

Implementation of Key Features

1. Animated Line Connections

Apply different animations to lines:

lines: [
    { id: 'l1', from: 'R', to: 'A', animation: 1, lineShape: RGLineShape.Curve3 },
    { id: 'l2', from: 'R', to: 'B', animation: 2 },
    { id: 'l3', from: 'R', to: 'C', animation: 3 },
    { id: 'l4', from: 'R', to: 'D', animation: 4, lineShape: RGLineShape.StandardStraight }
]

2. World Map Integration

Use world map SVG as background:

<RelationGraph options={graphOptions}>
    <MapSvg4World />
</RelationGraph>

3. Geographic Coordinate Mapping

Map geographic positions to canvas coordinates:

nodes: [
    { id: 'R', text: 'R', x: 1070, y: 250 },   // Europe
    { id: 'A', text: 'A', x: 460, y: 160 },    // Americas
    { id: 'B', text: 'B', x: 930, y: 410 },    // Africa
    { id: 'C', text: 'C', x: 1680, y: 550 },   // Asia-Pacific
    { id: 'D', text: 'D', x: 1230, y: 450 }    // Asia
]

4. Snapshot Management

Same snapshot system as US map:

const saveData = () => {
    const allNodesWithPosition = graphInstance.getNodes().map(node => ({
        id: node.id,
        text: node.text,
        x: node.x,
        y: node.y,
        opacity: node.opacity,
        nodeShape: node.nodeShape
    }));

    const allLines = graphInstance.getLinks().map(link => ({
        id: link.line.id,
        from: link.fromNode.id,
        to: link.toNode.id,
        lineShape: link.line.lineShape,
        animation: link.line.animation
    }));

    const graphSnapshotData: RGJsonData = {
        rootId: graphInstance.getOptions().checkedNodeId || 'R',
        nodes: allNodesWithPosition,
        lines: allLines
    };

    setGraphSnapshots([{
        name: new Date().toLocaleTimeString(),
        data: graphSnapshotData
    }, ...graphSnapshots]);
};

5. Visual Distinction with Animations

Different animations represent different types of connections:

• Animation 1: Fast flow (e.g., data transfer)
• Animation 2: Medium flow (e.g., regular traffic)
• Animation 3: Slow flow (e.g., bulk transport)
• Animation 4: Pulse (e.g., status monitoring)

Creative Use Cases

• International Trade: Visualize import/export routes between countries
• Global Supply Chain: Show worldwide logistics networks
• Telecom Networks: Display international cable routes
• Airline Routes: Map flight connections globally
• Diplomatic Relations: Show country-to-country relationships
• Data Center Networks: Visualize global server connections