{"id":3224,"date":"2020-07-09T15:04:55","date_gmt":"2020-07-09T15:04:55","guid":{"rendered":"https:\/\/contentlab.com\/real-time-bart-commute-mapping-with-gtfs-rt-data\/"},"modified":"2021-11-18T19:06:09","modified_gmt":"2021-11-18T19:06:09","slug":"real-time-bart-commute-mapping-with-gtfs-rt-data","status":"publish","type":"post","link":"https:\/\/contentlab.com\/real-time-bart-commute-mapping-with-gtfs-rt-data\/","title":{"rendered":"Real-time BART Commute Mapping with GTFS-RT Data"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3224\" class=\"elementor elementor-3224\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7c40590 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"7c40590\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4753b942\" data-id=\"4753b942\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0f7adaf elementor-widget elementor-widget-text-editor\" data-id=\"0f7adaf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>Mapping public transit means more than just knowing where the transit stops are. The timing is as important as the location, if not moreso. If you&#8217;re a train or bus commuter, you know that real-time location and time to arrival are key data points\u2026 waiting on a cold platform for a train to arrive is not a great use of time.<\/p><p>As software developers, say we wanted to create an application that tells commuters exactly where a train was and when it would arrive at a given station? We would need real-time information to provide our users with everything they need to know. Enter GTFS and GTFS-RT.<\/p><h2>GTFS and GTFS-RT<\/h2><p>The\u00a0<a href=\"https:\/\/developers.google.com\/transit\/gtfs\/reference?csw=1\">General Transit Feed Specification\u00a0<\/a>(GTFS) is an open standard for information about a transit system. The GTFS-RT part, where RT stands for Real-Time, provides up-to-the minute information on the progress of the transit system.<\/p><p>The Bay Area Rapid Transit system (BART) has implemented\u00a0<a href=\"http:\/\/api.bart.gov\/docs\/overview\/index.aspx\">BART APIs<\/a>\u00a0for getting this information. These APIs are provided at endpoints hosted at http:\/\/api.bart.gov\/api\/.<\/p><p>We\u2019re going to take a look at the station information and what the BART system calls &#8220;ETD\u201d or estimated time of departure.<\/p><p>For general information about the BART developer program you can read more at\u00a0<a href=\"https:\/\/www.bart.gov\/about\/developers\">https:\/\/www.bart.gov\/about\/developers.<\/a><\/p><h2>API Endpoints<\/h2><p>There are two endpoints that we\u2019re going to look at today. The first is the station endpoint at:\u00a0<a href=\"http:\/\/api.bart.gov\/api\/stn.aspx?cmd=stns&amp;key=MW9S-E7SL-26DU-VV8V&amp;json=y\">http:\/\/api.bart.gov\/api\/stn.aspx?cmd=stns&amp;key=MW9S-E7SL-26DU-VV8V&amp;json=y.<\/a><\/p><p>The main entry point for the API is\u00a0<a href=\"http:\/\/api.bart.gov\/api\/stn.aspx\">http:\/\/api.bart.gov\/api\/stn.aspx<\/a>. The entry point is followed by the command, a key, and the JSON argument.<\/p><p>The command we\u2019re using is &#8220;stns\u201d to get stations information.<\/p><p>There is a public key available at the BART developer website.<\/p><p>The &#8220;json\u201d argument indicates that we want the information to be transferred to us in JSON format.<\/p><p>Enter that URI into a browser window. If your browser displays formatted JSON (some browsers have extensions that enable JSON formatting), then you should see something like this:<\/p><p><img decoding=\"async\" class=\"b-lazy\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/49627817308_3b726d7aae_o.png\" alt=\"Bart-api1\" data-src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/49627817308_3b726d7aae_o.png\" \/><\/p><p>Take a moment to look at the structure of the data we get back. The top-level item, root, then the URI we used to make the call, and then stations \u2014 the important stuff. &#8220;Stations&#8221; is an object, and it contains an item named &#8220;station\u201d that\u2019s the array of station details. You can see element 0, 1, and part of 2 in this clip. There are 48 elements, one for each station. The root.stations.station element is the array of station items.<\/p><p>There\u2019s one other important data point, the &#8220;abbr&#8221; item. It\u2019s unique and can be used as a key in a\u00a0<a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>\u00a0object or C#\/Java dictionary.<\/p><p>The other endpoint that we\u2019re going to look at today is the real-time data on estimated departures. We can request the information for a single station or all stations. The endpoint we need is:<\/p><p><a href=\"http:\/\/api.bart.gov\/api\/etd.aspx?cmd=etd&amp;orig=ALL&amp;key=MW9S-E7SL-26DU-VV8V&amp;json=y.\">http:\/\/api.bart.gov\/api\/etd.aspx?cmd=etd&amp;orig=ALL&amp;key=MW9S-E7SL-26DU-VV8V&amp;json=y.<\/a><\/p><p>This particular URI is configured to retrieve the ETD information for all stations.<\/p><p>We can break the endpoint apart like we did the other one. The entry point is\u00a0<a href=\"http:\/\/api.bart.gov\/api\/etd.aspx\">http:\/\/api.bart.gov\/api\/etd.aspx<\/a>.<\/p><p>The command is &#8220;etd&#8221;.<\/p><p>The &#8220;orig&#8221; argument indicates which origin station to request (in this case &#8220;ALL&#8221;).<\/p><p>The request also contains the same key and json argument that we used in the other call.<\/p><p>Let\u2019s take a look at the data we get back:<\/p><p><img decoding=\"async\" class=\"b-lazy\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/49628609957_1410b6b5bf_o.png\" alt=\"bart-api2\" data-src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/49628609957_1410b6b5bf_o.png\" \/><\/p><p>At the top, once again, we have &#8220;root\u201d, then &#8220;station\u201d. The &#8220;station\u201d item is once again the array that will hold all the data of interest.<\/p><p>Within each station is &#8220;etd\u201d, also an array. Each etd item refers to a specific destination and for that destination there are three &#8220;estimate\u201d items.<\/p><p>So the data is root.station[x].etd[y].estimate[z].data-point.<\/p><p>In the data we see three estimates from the station &#8220;LAKE\u201d destined for &#8220;DALY\u201d. The GREEN line on platform 2, in 4 minutes, the BLUE line on platform 2 in 11 minutes, and the GREEN line again on platform 2 in 19 minutes.<\/p><h2>Using the Data<\/h2><p>It\u2019s beyond the scope of this article to build an entire application. To help prepare for building something more substantial, I built a demo app using Node.js and the Express framework. There are many tutorials on creating Express apps available, so for this article, I\u2019ll just highlight certain points.<\/p><p>The first is getting the data from the endpoint. We use an async function, so it doesn\u2019t lock up the UI.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-357dab7 elementor-widget elementor-widget-code-highlight\" data-id=\"357dab7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>async function getAllStations() {\r\n\tlet response = await fetch('http:\/\/api.bart.gov\/api\/stn.aspx?cmd=stns&key=MW9S-E7SL-26DU-VV8V&json=y');\r\n\tlet data = response.json();\r\n\treturn data;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50a20ab elementor-widget elementor-widget-text-editor\" data-id=\"50a20ab\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>I put this function in a separate file where it can be used from any page in the app. Within the app we can use it like this.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2caeed5 elementor-widget elementor-widget-code-highlight\" data-id=\"2caeed5\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>script(type='text\/javascript').\r\n    var stationList;\r\n    var stationDict = {};<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f85b82 elementor-widget elementor-widget-text-editor\" data-id=\"3f85b82\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>This is a clip from an Express app that uses the pug view engine. You can find info on the pug view at\u00a0<a style=\"background-color: #ffffff;\" href=\"https:\/\/pugjs.org\/api\/getting-started.html\">https:\/\/pugjs.org\/api\/getting-started.html<\/a>. This clip opens a script block and creates two variables: stationList and stationDict.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5aa84e elementor-widget elementor-widget-code-highlight\" data-id=\"b5aa84e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function getStations() {\r\n  getAllStations()\r\n  .then(function(data) {\r\n\tstationList = data.root.stations.station;\r\n\tdictStations();\r\n  });\r\n}\r\n\r\nfunction dictStations() {\r\n  if (!stationList) {\r\n\treturn;\r\n  }\r\n  stationList.forEach(function(item) {\r\n\tstationDict[item.abbr] = item;\r\n  });\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f7f72a elementor-widget elementor-widget-text-editor\" data-id=\"9f7f72a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>This function in the app page calls the getAllStations function in the other file. The async function provides an implicit promise so we can react with a &#8220;.then\u201d function to handle the result. The code stores the data from data.root.stations.station, the array of stations, into the stationList variable. Then it calls the dictStations() function, which creates a dictionary of the items in the list.<\/p><p>Once the data is stored in the page in an array, it\u2019s a simple matter to traverse the array.<\/p><p>Let\u2019s consider showing a picture of a train car at each station. We can create a map using the following code. The display needs a div with class name &#8220;map\u201d and code to create the map.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-867b0a2 elementor-widget elementor-widget-code-highlight\" data-id=\"867b0a2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>div(id='main' class='container')\r\n    div(id='map' style='height: 100%; width: 100%;')\r\nscript(type='text\/javascript').\r\n    var map = tomtom.map('map', {\r\n  \tkey: '<YOUR_TOMTOM_API_KEY>',\r\n\tsource: 'vector',\r\n\tbasePath: '\/sdk',\r\n\tcenter: {lon: -122.3000, lat: 37.8000},\r\n\tzoom: 10\r\n    });<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e9633e elementor-widget elementor-widget-text-editor\" data-id=\"0e9633e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The div code above gives the code a place to put the map, the script uses the id to get the div and create the elements that make up the map drawing surface. It requires the key you get from the\u00a0<a href=\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\">TomTom<\/a>\u00a0developer site. For information on setting up the TomTom application see\u00a0<a href=\"https:\/\/developer.tomtom.com\/user\/register\">https:\/\/developer.tomtom.com\/user\/register.<\/a><\/p><p>After the map is on the screen we can place markers for each station. We need to traverse the list of stations and get the gtfs_latitude and gtfs_longitude to display a marker.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c269caa elementor-widget elementor-widget-code-highlight\" data-id=\"c269caa\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function showMarkersForStations() {\r\n  stationList.forEach(function(station) {\r\n\taddMarker(L.latLng({lat: station.gtfs_latitude, lng: station.gtfs_longitude}),\r\n          \tL.icon({iconUrl:'\/sdk\/images\/ic_map_poi_005-black.png'}),\r\n          \t'Station name: ' + station.name + ', abbr:' + station.abbr + '<br \/> Lat Lng: ' + station.gtfs_latitude + ':' + station.gtfs_longitude);\r\n  });\r\n}\r\n\r\nfunction addMarker(location, icon, message) {\r\n  let marker = new tomtom.L.Marker()\r\n\t.setIcon(icon)\r\n\t.setLatLng(location);\r\n  if (typeof message !== 'undefined' && message.length > 0) {\r\n\tmarker.bindPopup(message);\r\n  }\r\n  marker.addTo(map);\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8dab9b3 elementor-widget elementor-widget-text-editor\" data-id=\"8dab9b3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>We use\u00a0<code>stationList.forEach<\/code>\u00a0to loop through the list. We call the\u00a0<code>addMarker<\/code>\u00a0function and pass in a\u00a0<code>L.latLng<\/code>\u00a0object, an\u00a0<code>L.icon<\/code>\u00a0object, and a string message that will be attached to the marker as a popup.<\/p><p>Showing markers for the ETD info is a bit more involved. The data we want is a bit deeper in the array. So the code to traverse the array requires three levels.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-477e2c2 elementor-widget elementor-widget-code-highlight\" data-id=\"477e2c2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function showMarkersForEtd(color) {\r\n  etdList.forEach(function(item) {\r\n    \/\/ refer to the dictionary to get the station info\r\n    let station = stationDict[item.abbr];\r\n    item.etd.forEach(function(etd) {\r\n  \tetd.estimate.forEach(function(est) {\r\n    \tif (est.color == color) {\r\n        \/\/ get marker location from the station\r\n        addMarker(L.latLng({lat: station.gtfs_latitude, lng: station.gtfs_longitude}),\r\n                \tL.icon({iconUrl:'\/sdk\/images\/ic_map_poi_040-' + est.color + '.png'}),\r\n                \t'Departing ' + station.abbr + ' platform ' + est.platform + ' ' + est.direction + 'bound in ' + est.minutes + ' minutes');\r\n    \t  }\r\n  \t});\r\n    });\r\n  });\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-127c0678 elementor-widget elementor-widget-text-editor\" data-id=\"127c0678\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><\/p>\n<pre><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">This code receives a color argument and then traverses through the <\/span><code style=\"color: var( --e-global-color-text ); font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">etdList.etd.estimate<\/code><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\"> items to find the items with the matching color. This code again calls the addMarker function to create a marker on the map. This one creates an icon with customized images for each color.<\/span><br><\/pre>\n<h2>Wrap-up<\/h2>\n<p>Today we looked at the open standard GTFS and two implementations available from the Bay Area Rapid Transit system. We looked at the APIs, their endpoints, and the structure of the data that\u2019s returned from the call.<\/p>\n<p>The above snippets of code demonstrate a bit of how you can use data from GTFS and GTFS-RT APIs from the BART system to show markers on the map. With the proper filtering of which markers to show, we can show all the stops on for a given line (by color). We can use that same technique to search for the estimates within a given number of minutes, with the origin or the destination of a specific station, and so on.<\/p>\n<p><em>This article was originally posted on <a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data\">TomTom&#8217;s blog<\/a><\/em>.<\/p>\n<p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re a train or bus commuter, knowing the real-time location and time to arrival of the next ride are crucial data points. We&#8217;ll use BART APIs and the TomTom Maps SDK to create a real-time commute map.<\/p>\n","protected":false},"author":3,"featured_media":4890,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[272,284,271],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Real-time BART Commute Mapping with GTFS-RT Data &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Real-time BART Commute Mapping with GTFS-RT Data &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"If you&#039;re a train or bus commuter, knowing the real-time location and time to arrival of the next ride are crucial data points. We&#039;ll use BART APIs and the TomTom Maps SDK to create a real-time commute map.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-09T15:04:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-18T19:06:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-45.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/real-time-bart-commute-mapping-with-gtfs-rt-data\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"Real-time BART Commute Mapping with GTFS-RT Data\",\"datePublished\":\"2020-07-09T15:04:55+00:00\",\"dateModified\":\"2021-11-18T19:06:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/real-time-bart-commute-mapping-with-gtfs-rt-data\/\"},\"wordCount\":1278,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-45.png\",\"keywords\":[\"JavaScript\",\"JSON\",\"Node.js\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/real-time-bart-commute-mapping-with-gtfs-rt-data\/\",\"url\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data\",\"name\":\"Real-time BART Commute Mapping with GTFS-RT Data &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-45.png\",\"datePublished\":\"2020-07-09T15:04:55+00:00\",\"dateModified\":\"2021-11-18T19:06:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-45.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-45.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Real-time BART Commute Mapping with GTFS-RT Data\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Real-time BART Commute Mapping with GTFS-RT Data &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data","og_locale":"en_US","og_type":"article","og_title":"Real-time BART Commute Mapping with GTFS-RT Data &#183; Technical Content Marketing | ContentLab","og_description":"If you're a train or bus commuter, knowing the real-time location and time to arrival of the next ride are crucial data points. We'll use BART APIs and the TomTom Maps SDK to create a real-time commute map.","og_url":"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2020-07-09T15:04:55+00:00","article_modified_time":"2021-11-18T19:06:09+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-45.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#article","isPartOf":{"@id":"https:\/\/contentlab.com\/real-time-bart-commute-mapping-with-gtfs-rt-data\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"Real-time BART Commute Mapping with GTFS-RT Data","datePublished":"2020-07-09T15:04:55+00:00","dateModified":"2021-11-18T19:06:09+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/real-time-bart-commute-mapping-with-gtfs-rt-data\/"},"wordCount":1278,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-45.png","keywords":["JavaScript","JSON","Node.js"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/real-time-bart-commute-mapping-with-gtfs-rt-data\/","url":"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data","name":"Real-time BART Commute Mapping with GTFS-RT Data &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#primaryimage"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-45.png","datePublished":"2020-07-09T15:04:55+00:00","dateModified":"2021-11-18T19:06:09+00:00","breadcrumb":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-45.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-45.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/real-time-bart-commute-mapping-gtfs-rt-data#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"Real-time BART Commute Mapping with GTFS-RT Data"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-45.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3224"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=3224"}],"version-history":[{"count":6,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3224\/revisions"}],"predecessor-version":[{"id":5517,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3224\/revisions\/5517"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/4890"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=3224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=3224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=3224"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=3224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}