Skip to main content

Live Map

Real-time player position visualization using Leaflet and Prometheus metrics.

Overview​

The live map provides:

  • 🗺️ Interactive GTA5 map with pan & zoom
  • 📍 Real-time player markers with directional heading
  • 👥 Player list sidebar
  • 🎨 Multiple map styles (Satellite, Atlas, Grid)
  • 🔄 Auto-updates every 5 seconds

Architecture​

Setup​

1. Start Services​

docker compose up -d prometheus livemap

2. Access​

Adding Map Tiles (Optional)​

The map works with a grid background by default. For actual GTA5 imagery:

  1. Download tiles from gta-v-map-leaflet

  2. Extract to infra/livemap/tiles/:

    tiles/
    ├── satellite/{z}/{x}/{y}.png
    ├── atlas/{z}/{x}/{y}.png
    └── grid/{z}/{x}/{y}.png

  3. Update infra/livemap/index.html:

    const CONFIG = {
      useFallback: false,  // Enable real tiles
    };

  4. Restart: docker compose restart livemap

Configuration​

Edit CONFIG in infra/livemap/index.html:

const CONFIG = {
  prometheusUrl: "http://localhost:9090",
  updateInterval: 5000,  // milliseconds
  useFallback: true,     // Use grid background
};

Grafana Integration​

Embed in Grafana using a Text panel (HTML mode):

<iframe src="http://localhost:3002" width="100%" height="600" frameborder="0"></iframe>

Troubleshooting​

"Connection error" in status​

  • Check Prometheus is running: docker compose ps prometheus
  • Verify CORS is enabled in compose config
  • Confirm FiveM server exports metrics on port 9100

No players showing​

  • Ensure FiveM server is running
  • Test metrics: curl http://localhost:9090/api/v1/query?query=fivem_player_position_x

Map tiles not loading​

  • Verify tiles are extracted to correct folder
  • Set useFallback: false in config
  • Check browser console for 404 errors