Add Interactive Global Validator Network Map

[fr4nc1stein]

🗺️ Add Interactive Global Validator Network Map

📋 Summary

Added an interactive world map to the Explorer page that visualizes the geographic distribution of blockchain validators in real-time. The map shows validator locations with animated network connections and provides detailed information about each node.

---

✨ Features

Interactive Map Visualization

• Mapbox GL JS integration with light theme and flat Mercator projection.
• Real-time geolocation of validator nodes using IP addresses.
• Computer emoji markers (🖥️) for each validator.
• Animated connection lines showing network mesh topology.
• Smart auto-zoom based on validator distribution.
• Interactive popups with validator details (moniker, location, IP, node ID).

Backend API

• New endpoint: /api/explorer/validators-geo
• Fetches validator IPs from blockchain RPC /net_info.
• Geolocates IPs using ip-api.com (free, no API key required).
• Returns coordinates, city, country, and node information.

Smart Features

• Adaptive zoom levels:
  • Single validator → zoom 8 (close-up)
  • Clustered validators (< 30° apart) → zoom 10
  • Global distribution → zoom 4 (world view)
• Rate limiting: 100ms delay between geolocation requests to respect API limits.
• Automatic map style loading with proper async handling.

---

📁 Files Changed

Created

• web/src/app/api/explorer/validators-geo/route.ts — Geolocation API endpoint
• web/src/components/ui/validator-map.tsx — Interactive map component

Modified

• web/src/app/explorer/page.tsx — Added map to Validators tab
• web/package.json — Added mapbox-gl dependency
• web/.env — Added Mapbox token configuration

---

🔧 Technical Details

Dependencies Added

{
  "dependencies": {
    "mapbox-gl": "^3.8.0"
  }
}

Environment Variables Added

In your .env file:

NEXT_PUBLIC_MAPBOX_TOKEN=pk.your_mapbox_token_here

Screenshot

[vercel]

@fr4nc1stein is attempting to deploy a commit to the mashupgarage Team on Vercel.

A member of the Team first needs to authorize it.