Skip to main content

Live Real-Time Data

Display live-updating markers that move smoothly across the map — powered by real-time data sources (WebSocket, API polling, MQTT, etc.).

Perfect for:

  • Live vehicle/fleet tracking
  • Flight radar
  • Delivery status
  • IoT sensor locations
  • Ride-hailing apps

Full Working Example​

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Live Real-Time Tracking - Barikoi GL</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Barikoi GL -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/bkoi-gl@latest/dist/style/bkoi-gl.css"
    />
    <script src="https://unpkg.com/bkoi-gl@latest/dist/iife/bkoi-gl.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
        background: #0f172a;
      }
      html,
      body,
      #map {
        height: 100%;
      }

      .status {
        position: absolute;
        top: 20px;
        left: 20px;
        background: rgba(15, 23, 42, 0.95);
        color: white;
        padding: 16px 20px;
        border-radius: 16px;
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        z-index: 10;
        font-family: system-ui, sans-serif;
        min-width: 260px;
      }
      .status h3 {
        margin: 0 0 10px 0;
        font-size: 16px;
        color: #60a5fa;
      }
      .live-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: #10b981;
        border-radius: 50%;
        margin-right: 8px;
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 1;
        }
      }
      .coords {
        font-family: "JetBrains Mono", monospace;
        font-size: 13px;
        color: #e2e8f0;
        margin-top: 8px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <div class="status">
      <h3><span class="live-dot"></span>Live Tracking Active</h3>
      <div>Vehicle ID: DHK-247</div>
      <div class="coords" id="coords">Waiting for update...</div>
    </div>

    <script>
      const map = new bkoigl.Map({
        container: "map",
        style: "https://map.barikoi.com/styles/barikoi-dark-mode/style.json",
        // style: "https://tiles.barikoimaps.dev/styles/barkoi_dark/style.json",
        center: [90.3994, 23.7925],
        zoom: 14,
        accessToken: "YOUR_BARIKOI_API_KEY",
      });

      let planeIconLoaded = false;

      // Initialize with same coordinates as map center
      let simulatedLng = 90.3994;
      let simulatedLat = 23.7925;
      // let bearing = 45;

      map.on("load", async () => {
        // Load custom vehicle icon
        const img = await map.loadImage(
          "https://cdn-icons-png.flaticon.com/512/7893/7893979.png"
        );
        map.addImage("delivery-van", img.data, { pixelRatio: 2 });
        planeIconLoaded = true;

        // Add live source with initial coordinates
        map.addSource("live-vehicle", {
          type: "geojson",
          data: {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [simulatedLng, simulatedLat],
            },
            // properties: { bearing: bearing },
          },
        });

        map.addLayer({
          id: "vehicle-live",
          type: "symbol",
          source: "live-vehicle",
          layout: {
            "icon-image": "delivery-van",
            "icon-size": 0.4,
            // "icon-rotate": ["get", "bearing"],
            "icon-rotation-alignment": "map",
            "icon-allow-overlap": true,
          },
        });
      });

      // Simulate real-time GPS updates with more visible movement
      setInterval(() => {
        if (!planeIconLoaded) return;

        // Simulate realistic movement with more visible changes
        simulatedLng += (Math.random() - 0.5) * 0.01;
        simulatedLat += (Math.random() - 0.5) * 0.008;
        // bearing = (bearing + (Math.random() - 0.5) * 30 + 360) % 360;

        const newData = {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [simulatedLng, simulatedLat],
          },
          // properties: { bearing },
        };

        // Update position
        map.getSource("live-vehicle").setData(newData);

        // Smooth fly to new location
        map.easeTo({
          center: [simulatedLng, simulatedLat],
          duration: 1500,
          zoom: map.getZoom(),
        });

        // Update UI with timestamp
        const timestamp = new Date().toLocaleTimeString();
        document.getElementById(
          "coords"
        ).textContent = `Lng: ${simulatedLng.toFixed(
          6
        )}, Lat: ${simulatedLat.toFixed(6)} • ${timestamp}`;
      }, 2000);
    </script>
  </body>
</html>

Real-World Integration (Replace Simulation)​

// Example: Fetch from your backend API
setInterval(async () => {
  const res = await fetch("/api/vehicles/live");
  const vehicles = await res.json();

  map.getSource("live-vehicles").setData({
    type: "FeatureCollection",
    features: vehicles.map((v) => ({
      type: "Feature",
      geometry: { type: "Point", coordinates: [v.lng, v.lat] },
      properties: { bearing: v.heading, id: v.id },
    })),
  });
}, 3000);

Or use WebSocket for true real-time:

const ws = new WebSocket("wss://your-api.com/live");
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  map.getSource("live-vehicle").setData(data);
};

Pro Tips​

FeatureHow to Add
Smooth movementUse map.easeTo() or flyTo()
Auto-followmap.easeTo({ center: coords, zoom: 16 })
Bearing rotation"icon-rotate": ["get", "bearing"]
Trail historyAdd previous points to a line layer
Offline fallbackCache last known position

Real-time location — beautifully alive.