Taiwan Submarine Cable Map

An interactive map application that displays the status and historical incidents of Taiwan's submarine cables. Built with React, TypeScript, and Vite.

Features

• Interactive Map: View submarine cable routes and landing points using Leaflet maps
• Real-time Status: Monitor active and historical incidents affecting submarine cables
• Uptime Timeline: Visualize cable uptime data over the past year
• Topology View: Show active incident impact across explicit ISP and cable segment dependencies
• Multi-language Support: Available in English and Traditional Chinese
• Intro Screen: Show an introduction screen on first visit
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Incident Tracking: Detailed information about cable incidents including start time, estimated repair time, and resolution status

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/seadog007/smc.peering.tw.git
cd smc.peering.tw

1. Install dependencies:

npm install

1. Put necessary data

• src/data/landing-points.json: You can put []
• src/data/incidents.json: Run python3 convert_incidents.py
• src/data/cables/*.json: You can leave the folder empty

1. Start the development server:

npm run dev

1. Open your browser and navigate to http://localhost:5173

Building for Production

npm run build

The built files will be in the dist directory.

Data Sources

The application uses data from https://github.com/seadog007/tw-submarine-cable

Data is automatically updated and converted to static format using GitHub Actions.

Data Format

src/data/landing-points.json

[
  {
    "id": "id",
    "name": "name",
    "coordinates": [
      121.12345,
      25.56789
    ]
  }
]

src/data/incidents.json

[
  {
    "date": "1900-01-01T00:00:00+08:00",
    "status": "(disconnected|partial_disconnected|notice)",
    "cableid": "cableID",
    "segment": "segmentID",
    "title": "Incident Title",
    "description": "Incident Describtion",
    "reparing_at": "2000-01-01T00:00:00+08:00",
    "resolved_at": "2010-01-01T00:00:00+08:00"
  }
]

src/data/cables/*.json: You can leave the folder empty

{
  "id": "cableID",
  "name": "Cable Display Name",
  "color": "#000000",
  "building": (true|false),
  "available_path": [
    [
      "Country_1",
      "segmentID",
      "Country_2"
    ]
  ],
  "equipments": [
    {
      "id": "equipmentID",
      "name": "Equipment Name",
      "type": "(BMH|AC|BU|Other)",
      "coordinate": [
        123.12345,
        12.12345,
      ]
    }
  ],
  "segments": [
    {
      "id": "segmentID",
      "hidden": (true|false),
      "building": (true|false),
      "color": "#000000",
      "coordinates": [
        [
          123.45678,
          12.34567
        ],
        [
          123.45679,
          12.34568
        ]
      ]
    }
  ]
}

src/data/topology.json

{
  "nodes": [
    {
      "id": "isp-id",
      "label": "ISP Name",
      "type": "isp",
      "level": 0
    },
    {
      "id": "segment-id",
      "label": "Segment Name",
      "type": "segment",
      "level": 1,
      "dependency": [
        "segmentID",
        "anotherSegmentID"
      ]
    }
  ],
  "edges": [
    {
      "source": "isp-id",
      "target": "segment-id"
    }
  ]
}

Topology dependencies are ordered segment ID arrays representing one logical route. Any listed segment with disconnected status makes the node disconnected; otherwise any partial_disconnected segment makes the node partially disconnected. Segment IDs must exist in src/data/cables/*.json. Use level to place nodes in separate topology ranks; lower levels render first.

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Code Style

This project uses ESLint for code linting. The configuration includes:

• TypeScript ESLint rules
• React-specific linting rules
• Stylistic rules for consistent code formatting

Sponsorship

This project is sponsored by TWDS and its sub-project STUIX. TWDS aims to promote the Peering ecosystem in Taiwan, avoiding the situation where traffic needs to be routed out of the country and then back to the country. We also introduce lots of foreign network cache to help establish the Peering ecosystem in Taiwan.

Sponsor Link: TWDS Sponsor Link

License

This project is licensed under the MIT License - see the LICENSE file for details.

Version History

• v3.13.0 (2026-10-06): Added desktop cable search with hover preview and cable selection, and annual incident statistics with repair time trends and rolling averages

• v3.12.0 (2026-09-29): Added cable metadata, incident glossary tooltips, connectivity capacity details, license for data, and a public cable data repository link

• v3.11.2 (2026-06-01): Added full-page topology view and improved edge status coloring

• v3.11.1 (2026-06-01): Improved topology guided tour

• v3.11.0 (2026-06-01): Added topology view

• v3.10.5 (2026-05-20): Added TPE Segment 3S, 4

• v3.10.4 (2026-05-13): Fixed SJC2 Segment ID

• v3.10.3 (2026-05-13): Fixed SJC2 HK Path

• v3.10.2 (2026-05-09): Center map legend title

• v3.10.1 (2026-05-09): Update map legend background and animate collapse/expand

• v3.10.0 (2026-04-27): Add building segment visualization, Update cable data (Apricot, PLCN, TPU)

• v3.9.0 (2026-04-22): Add guided tour, add APG TW-SG available path

• v3.8.0 (2026-04-22): Update dependencies, Add language selection modal

• v3.7.0 (2026-04-22): Add map legend

• v3.6.4 (2026-04-22): Fix outage counter text alignment

• v3.6.3 (2026-03-16): Add APRICOT data

• v3.6.2 (2026-03-16): Add rough PLCN data for outage visualization and counting

• v3.6.1 (2026-03-16): Fix outage counter wording

• v3.6.0 (2026-03-16): Add incident reason field

• v3.5.2 (2026-03-10): Path propagation excludes retired segments so same-path segments color correctly

• v3.5.1 (2026-03-11): Improve segment status propagation for partial-disconnected highlights

• v3.5.0 (2026-03-10): Show partial-disconnected segments as yellow and prioritize red on overlaps

• v3.4.0 (2026-01-17): Added scheduled incident status

• v3.3.3 (2026-01-17): Reverted convert_incidents.py output path change

• v3.3.2 (2026-01-17): Fixed datetime string for Firefox, Updated dependencies

• v3.3.1 (2026-01-03): Updated landing points

• v3.3.0 (2025-12-26): Updated cable data - changing c2c-seg-2c to retired, Supported retired segments visualization and calculation, Restored missing segment info in popup

• v3.2.0 (2025-12-26): Filter out building cables in timeline, Timeline color adjustments, Compact timeline view

• v3.1.0 (2025-12-12): Added outage counter to map UI, Added dark mode favicon

• v3.0.0 (2025-12-11): UI overhaul with new cable filter and timeline refresh feat. w/ gnehs

• v2.1.2 (2025-10-18): Added OKTW Grafana link

• v2.1.1 (2025-10-18): Fixed incidents data sorting issue

• v2.1.0 (2025-09-14): Made cable data smoother

• v2.0.2 (2025-09-14): Trying to fix performance issue

• v2.0.1 (2025-09-13): Trying to fix performance issue

• v2.0.0 (2025-09-03): Changed Leaflet Map to Maplibre GL feat. w/ whes1015, Improved Map Usability, Added Clock for Current Time, Added New Language Selector, Added Cable Filter, Updated About Window

• v1.3.3 (2025-08-22): Added SJC2 S4 Cable Data

• v1.3.2 (2025-07-14): Fixed cable data build script

• v1.3.1 (2025-07-14): Added SEO Related Settings, Updated TM2, TM3, TP3 Cable Data

• v1.3.0 (2025-07-13): Fixed Button Layer, Improved Map Usability, Added Important Notice Window aka Disclaimer, Fixed Initial Language Setting, Added Monitoring Data Sources

• v1.2.6 (2025-07-12): Updated C2C, Added Seg 2C, 3A

• v1.2.5 (2025-07-12): Updated APCN2 to accurate version

• v1.2.4 (2025-07-12): Added TSE1 Cable Data

• v1.2.3 (2025-07-11): Added Hover Function

• v1.2.2 (2025-06-21): Added NCP S5, S6, S1.4 Cable Data

• v1.2.1 (2025-06-19): Fixed Mobile Button Position

• v1.2.0 (2025-06-19): Added Mobile Version Map

• v1.1.1 (2025-06-18): Added EAC1 Segment E Cable Data

• v1.1.0 (2025-06-18): Added Version History

• v1.0.1 (2025-06-16): UI Improvements, Added Estimated Repairing Time and Resolved Time

• v1.0.0 (2025-06-15): Initial release