CodcompassCodcompass
Back to KB
Difficulty
Intermediate
Read Time
3 min

How to Build a Traffic Dashboard with Road511 + Leaflet

By Codcompass Team··3 min read

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>

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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.d

irection || ''} `); } }); }


Enter fullscreen mode Exit fullscreen mode

## [](#layer-2-cameras-with-image-popups)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 }); } }); }


Enter fullscreen mode Exit fullscreen mode

## [](#layer-3-road-conditions)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} ); } }); }


Enter fullscreen mode Exit fullscreen mode

## [](#put-it-together)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 });


Enter fullscreen mode Exit fullscreen mode

## [](#autorefresh)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);


Enter fullscreen mode Exit fullscreen mode

## [](#next-steps)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)Try It

-   [See a working example](https://map.road511.com/) — built with this exact approach
-   [API docs](https://docs.road511.com/)
-   [Free API key](https://portal.road511.com/)
-   [Full code examples](https://github.com/Road511/road511-examples)