How to Build a Traffic Dashboard with Road511 + Leaflet

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/[email protected]/dist/leaflet.css">
  <style>
    body { margin: 0; }
    #map { height: 100vh; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <script src="app.js?v=1779375757622"></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

Pull active events inside the current viewport as GeoJSON, then color points by severity:

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

Cameras come back with a stable image_url you can drop straight into a popup — no scraping, no signed URLs:

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

Road conditions are line features — style them by condition class:

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

Wire the layers into a Leaflet layer control so users can toggle them:

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);

Next Steps

Add sign messages as a layer.
Add weather stations with condition badges.
Show truck restrictions along a corridor.
Use the analytics endpoints to show a sidebar with incident trends.

Try It

See a working example — built with this exact approach.
API docs — full parameter reference for events, features, and the GeoJSON variants.
Free API key — 14-day trial, no credit card.

Ship a traffic map this afternoon

Road511’s GeoJSON endpoints drop straight into Leaflet, Mapbox, MapLibre, ArcGIS, and QGIS — bbox and radius queries, normalized properties, 57 jurisdictions in one schema. Free 14-day trial. No credit card.

Get Free API Key Explore the Map