How to integrate HERE Traffic Analytics with the ArcGIS Maps SDK for Javascript to create a traffic comparison map

_{Aaron Falk with Sr. Developer Evangelist Erwin Soekianto.}

In this blog post we describe how we prepared and processed HERE street data along with HERE Traffic Analytics data, (the latter is available now on the ArcGIS Marketplace), then integrated with ArcGIS to build a quick and simple map visualization that compares traffic congestion in Germany. The goal was to create a web mapping application that showed historical traffic speeds for an area in Northern Germany. We wanted to look at 2019 and 2020 respectively, and compare with 2022, a year that saw transportation subsidies levied. 

Step 1: Preparing Data Using ArcGIS

For working with HERE data, we started in ArcGIS Pro to visualize, edit, and export a subset of HERE’s street data from our core Map Content to prepare it for later processing. Starting with a bounding box, we delineated an area in Northern Germany to serve as our area of interest (AOI) or buffer, to be used for our Traffic Analytics query which we discuss in a moment:  

This shape was chosen based on colleagues in Germany having firsthand experience of the regions coastal destinations as it applied to recent transportation subsidies levied by the government there.

The next step in the process involved reviewing the HERE Map content street dataset to see which segments fell within our area of interest, and further, to determine which road functional classes we would want to show. The street data naturally is vector based, polylines in shapefile format.  

The HERE Map Content categorizes road segments by functional classes 1 through 5, with class 1 representing the largest highways, while class 5 would be the smallest roads, like neighborhoods. We decided to model all roads, so all functional classes were selected that fell within our bounding box which yielded 525,315 total road segments in our area of interest: 

From here we exported this to GeoJSON for final processing and combining with HERE Traffic Analytics Speed Data described in the next section. 

Step 2: Processing HERE Street Data and Combining with HERE Traffic Analytics (Speed Data)

We used HERE Traffic Analytics Speed Data to conduct a before and after analysis by looking at historical speeds in the month of July for 2019, 2021, and 2022 respectively. We chose to look at daily traffic from 8 AM to 6 PM at the top of the hour. To understand traffic changes, we processed this data to calculate a congestion score for each road segment and used the HERE Map Content data (street vector data) with the Python GeoPandas package to work with the spatial data. From here, we summarized the hourly congestion data for the months of July within those 3 years. For a detailed step-by-step including the scripts we used to process this data and congestion scores, look at this blog post. 

        import pandas as pd
...


df['CONGESTION'] = 1-(df['MEAN']/df['FREEFLOW'])
df['CONGESTION-WEIGHTED'] = df['LENGTH'] * (1-(df['MEAN']/df['FREEFLOW']))
...
  

The above code snippet shows how the congestion score and weighted congestion score are calculated from the average traffic speed (‘MEAN’), freeflow traffic speed (‘FREEFLOW’), and the length of the road segments (‘LENGTH’).

The mapped congestion scores can then be saved as a GeoJSON layer file and be used with any GIS or mapping software. For this visualization, we published it as an ArcGIS Vector Tile Layer using ArcGIS Pro to later consume in the ArcGIS Maps SDK for JavaScript. A few sample features showing mapped congestion scores for road segments are shown below:

        {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "LINK_ID": 1075875730, "ST_NAME": "B76", "FUNC_CLASS": "2", "DIR_TRAVEL": "B", "Shape_Leng": 0.00090620106847400005, "LINK_DIR": "1075875730F", "LINK-DIR": "1075875730F", "CONGESTION": 0.2028790322580645 }, "geometry": { "type": "LineString", "coordinates": [ [ 9.94190000058461, 54.432619999913129, 0.0 ], [ 9.941060000518632, 54.432960000303808, 0.0 ] ] } },
{ "type": "Feature", "properties": { "LINK_ID": 778315013, "ST_NAME": "SCHÖNBERGER STRASSE", "FUNC_CLASS": "3", "DIR_TRAVEL": "B", "Shape_Leng": 0.000539351640307, "LINK_DIR": "778315013F", "LINK-DIR": "778315013F", "CONGESTION": 0.44038530465949816 }, "geometry": { "type": "LineString", "coordinates": [ [ 10.186390000498193, 54.32611999983817, 0.0 ], [ 10.186920000657551, 54.326219999953082, 0.0 ] ] } },
{ "type": "Feature", "properties": { "LINK_ID": 554731897, "ST_NAME": "EUTINER STRASSE", "FUNC_CLASS": "2", "DIR_TRAVEL": "B", "Shape_Leng": 0.00071028200099700002, "LINK_DIR": "554731897F", "LINK-DIR": "554731897F", "CONGESTION": 0.029529569892473108 }, "geometry": { "type": "LineString", "coordinates": [ [ 10.718350000252372, 53.963739999801192, 0.0 ], [ 10.7183300002294, 53.964450000167403, 0.0 ] ] } },
{ "type": "Feature", "properties": { "LINK_ID": 758649297, "ST_NAME": "SEESTRASSE", "FUNC_CLASS": "3", "DIR_TRAVEL": "B", "Shape_Leng": 0.00046389707328899998, "LINK_DIR": "758649297F", "LINK-DIR": "758649297F", "CONGESTION": 0.009172043010752683 }, "geometry": { "type": "LineString", "coordinates": [ [ 10.772020000322811, 53.972519999998042, 0.0 ], [ 10.772080000391782, 53.972980000526661, 0.0 ] ] } },
....
]
}

  

Step 3: Creating the final web app using ArcGIS Maps SDK for Javascript 

Since the mapped congestion scores were published as a hosted ArcGIS Vector Tile Layer, we decided to consume our data using the ArcGIS Maps SDK for Javascript. We used the Swipe widget to visualize the comparison between our comparison years: July 2019 and 2021 against 2022. We added buttons to switch the leading layer between July 2022 and July 2021 and used the Legend widget to visualize the layers traffic congestion score. Esri provides code samples to experiment with. 

Here you can see the final web mapping application centered on Kiel showing HERE Traffic Analytics data conflated with street data. The swipe widget is great for comparing the traffic congestion, as it reveals a portion of a layer or layers over a map. Although we chose vertical, layers can be swiped horizontally as well.:

In closing: Data and Products used

The HERE Traffic Analytics Speed Data and HERE Map Content data (street vector data) were used to show the historical congestion in our area of interest. 

ArcGIS Pro was used to work with a subset of the data and publish as a hosted service. 

The ArcGIS Maps SDK for Javascript was used to build the final visualization. 

GeoPandas Python package was used to process and work with the spatial data. 

If you're using ArcGIS products and are looking for data or content to augment your GIS workflows, we hope you found this to be a useful demonstration of a potential use case using speed data from our historical HERE Traffic Analytics offering. Drop us a line if you have any feedback or questions below or come see is on our Slack workspace!