How to Build a Traffic Dashboard with Road511 + Leaflet

#api #webdev #javascript #tutorial

Let's build a real-time traffic dashboard from scratch. By the end, you'll have a map showing live incidents, camera popups with images, and road condition overlays — all powered by Road511's GeoJSON API.

Setup

Create an index.html with Leaflet:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css">
  <style>
    body { margin: 0; }
    #map { height: 100vh; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet@1.9/dist/leaflet.js"></script>
  <script src="app.js"></script>
</body>
</html>

Initialize the Map

// app.js
const API_KEY = 'your_api_key';
const BASE = 'https://api.road511.com/api/v1';

const map = L.map('map').setView([39.8, -98.5], 5); // center of US
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; OpenStreetMap'
}).addTo(map);

Layer 1: Traffic Events

async function loadEvents() {
  const bounds = map.getBounds();
  const bbox = [
    bounds.getWest(), bounds.getSouth(),
    bounds.getEast(), bounds.getNorth()
  ].join(',');

  const res = await fetch(
    `${BASE}/events/geojson?bbox=${bbox}&status=active&limit=500`,
    { headers: { 'X-API-Key': API_KEY } }
  );
  const data = await res.json();

  const severityColors = {
    critical: '#991b1b', major: '#ef4444',
    moderate: '#f59e0b', minor: '#22c55e'
  };

  return L.geoJSON(data, {
    pointToLayer: (f, latlng) => L.circleMarker(latlng, {
      radius: 6,
      fillColor: severityColors[f.properties.severity] || '#6b7280',
      fillOpacity: 0.8,
      stroke: false
    }),
    onEachFeature: (f, layer) => {
      const p = f.properties;
      layer.bindPopup(`
        <strong>${p.title}</strong><br>
        <span style="color:${severityColors[p.severity]}">${p.severity}</span>
        &middot; ${p.type}<br>
        ${p.affected_roads?.join(', ') || ''} ${p.direction || ''}
      `);
    }
  });
}

Layer 2: Cameras with Image Popups

async function loadCameras(jurisdiction) {
  const res = await fetch(
    `${BASE}/features/geojson?type=cameras&jurisdiction=${jurisdiction}`,
    { headers: { 'X-API-Key': API_KEY } }
  );
  const data = await res.json();

  const camIcon = L.divIcon({
    html: '📷', className: 'camera-icon', iconSize: [20, 20]
  });

  return L.geoJSON(data, {
    pointToLayer: (f, latlng) => L.marker(latlng, { icon: camIcon }),
    onEachFeature: (f, layer) => {
      const p = f.properties;
      layer.bindPopup(`
        <strong>${p.name || f.properties.id}</strong><br>
        <img src="${p.image_url}" width="320" loading="lazy"
             onerror="this.src='data:image/svg+xml,<svg/>'">
      `, { maxWidth: 350 });
    }
  });
}

Layer 3: Road Conditions

async function loadRoadConditions(jurisdiction) {
  const res = await fetch(
    `${BASE}/features/geojson?type=road_conditions&jurisdiction=${jurisdiction}`,
    { headers: { 'X-API-Key': API_KEY } }
  );
  const data = await res.json();

  const conditionColors = {
    dry: '#22c55e', wet: '#3b82f6', icy: '#ef4444',
    'snow-covered': '#8b5cf6', flooded: '#f97316'
  };

  return L.geoJSON(data, {
    style: (f) => ({
      color: conditionColors[f.properties.condition] || '#6b7280',
      weight: 4, opacity: 0.7
    }),
    onEachFeature: (f, layer) => {
      layer.bindPopup(`
        <strong>${f.properties.name}</strong><br>
        Condition: ${f.properties.condition}
      `);
    }
  });
}

Put It Together

const layers = L.control.layers(null, {}).addTo(map);

loadEvents().then(layer => {
  layer.addTo(map);
  layers.addOverlay(layer, 'Events');
});

loadCameras('CA').then(layer => {
  layers.addOverlay(layer, 'Cameras (CA)');
});

loadRoadConditions('CA').then(layer => {
  layers.addOverlay(layer, 'Road Conditions (CA)');
});

// Refresh events when the map moves
map.on('moveend', async () => {
  // Remove old events layer, load new one for current viewport
});

Auto-Refresh

Events change frequently. Add a 60-second refresh:

setInterval(async () => {
  eventsLayer.clearLayers();
  const newLayer = await loadEvents();
  newLayer.eachLayer(l => eventsLayer.addLayer(l));
}, 60000);

DEV Community