Mapping Traffic Volume in the Denver Region with

Leaflet.js

By jmapping March 15, 2014 Data Visualization, Web-Mapping1 Comment

Traffic visualizations can be interesting because pretty much everyone knows what its like to have to deal with other cars
on the road. I would argue that the traffic in the front range isnt nearly as congested as some other parts of the country
but it is still important to understand where congestion occurs and how it might change over time.
I recently had the chance to work with traffic count (volume) data that DRCOG collects as part of an effort to understand
current and future traffic patterns. The data is collected manually throughout the year by a team that measures volume at
specific locations on specific days. The measurements only includes 1 days count per location but can include traffic in
both directions. There are no machines counting traffic at all times/days of the year so this data should be considered
more of a statistical sample than an absolute measurement. However, considering the nature of the data we can get a
general idea of traffic volumes at a regional scale but the accuracy degrades at more local scales. Despite these
shortcomings it still provides enough useful data for some mapping!
Points on a map are fine for getting volume at a precise location but I find this data much more visually interesting as a
heat map. Luckily there are many options for heat mapping with Leaflet.js. Using the leafle.heat plugin I was able
to quickly put together a simple web map that shows density of traffic counts for the region. By default this plugin simply
inputs the occurrence of points but in this case a point is a specific days measurement with attribution for volume. I want
to measure volume of traffic not count location density so I simply exploded each days count total into a new point with
the same point location as its parent. So, if a days count total (1 point in the data) equals 100 the process generates 100
overlapping points at that location. This enables leaflet.heat to measure density of traffic counts because each point now
represents an individual count.
This is what the original data looks like (as GeoJSON returned from a GeoServer WFS request):

1
{
2
type: "FeatureCollection",
3
totalFeatures: 7212,
4
features: [
5
{
6
type: "Feature",
7
id: "traffic_counts.1",
8
geometry: {
9
type: "Point",
10
coordinates: [
11
-104.72345298814763,
12
39.66841013830322
13
]
14
},
15
geometry_name: "the_geom",
16
properties: {
17
gid: 1,
18
location: "E-470: s/o Jewell Ave @ Toll Plaza B",
19
counted: "2/7/2012",
20
alldayvol: 24699
21
}
22
}
23
],
24
crs: {
25
type: "EPSG",
26
properties: {
27
code: "4326"
28
}
29
}
30 }

This is what the code looks like to prep the original data for input to leaflet.heat:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var heatData = [];

// Loop through each feature
$.each(data.features, function (key, val) {
// Reduce volume totals to improve performance
var volume = parseInt(val.properties.alldayvol / 2000);
// Generate an array of 1 latLng per per count
while (volume >= 0) {
var lat = val.geometry.coordinates[1];
var lng = val.geometry.coordinates[0];
var latlng = L.latLng(lat, lng);
heatData.push(latlng);
volume-}
});

This is what the resulting data looks like (an array of Leaflet latLng objects):

1 [
2
LatLng(39.66841, -104.72345),
3
LatLng(39.66841, -104.72345),
4
LatLng(39.66841, -104.72345),
5
...
6 ]

This is how you initialize and add the data to the heat layer object:

1 heat = L.heatLayer(heatData, { radius: 15, blur: 30 }).addTo(map);

And finally, this is what the map looks like:

NOTE: This is a demo only and the map may change over time as I continue to experiment with this kind of data.
You can get the data from the DRCOG Data Catalog.
You can get the code on the GitHub repo.