Skip navigation
All Places > GIS > Web GIS > ArcGIS Online > Blog > Author: gfernandoesriaustralia-com-au-esridist

Static bus timetables (GTFS) are no match for real time bus information (GTFS-realtime). But that doesn't mean you have to settle for static visualisation techniques.

In this blog I will show how you can be a little creative and make your static timetables sing and move along with Arcade. And you'll be left wanting to sing: the wheels on the bus go round and round

Select a link below to view the web map associated with this GIF.

The GIF and web map show popups of upcoming buses and those just recently missed. This would come in handy for bus commuters to understand which services are available at any given date and time. We’ll learn how to create these popup displays from a GTFS feed. Followed by how to extend this solution to a mobile friendly app, where commuters could access this information on the go

More on GTFS

A GTFS feed is a collection of text files, each telling a story about transit information. For this example we'll use the GTFS feed for public buses in Canberra, Australia.

  • Click here to download the GTFS feed for Canberra.

  • Click here to view the GTFS specification for Canberra.

Data prep

Before you get started, click here to download an ArcGIS Pro project package with my model builder configurations, used to create these layers.

Build expressions (hosted table)

You may have noticed from the model used for the hosted table, I created an extra field arrivalSeconds to calculate the arrival_time of buses from hh:mm:ss string type to a number (seconds elapsed since start of day). This was done to accelerate the filter query (which we'll use later) to only return features relevant to the time of day. As you can imagine, it's a lot faster to query numbers compared to converting string types on the fly (especially with large datasets).

Convert arrival_time to number of seconds elapsed since start of day
//separate arrival hours, minutes and seconds into an array
var separateArrival = Split($feature["arrival_time"],":")

//To fix hour figures greater than 23
var fixedHours = When(separateArrival[0] >= 24, separateArrival[0] - 24, separateArrival[0])

//convert arrival_time from 'String' to 'Date' type
var arrivalTimeAware = Date(Year(Now()), Month(Now()), Day(Now()), fixedHours, separateArrival[1], separateArrival[2])

var startOfDayTime = Date(Year(Now()), Month(Now()), Day(Now()), 0, 0, 0)

//arrival_time to number of seconds elapsed since start of day
var arrivalSeconds = DateDiff(arrivalTimeAware, startOfDayTime, 'seconds')
return arrivalSeconds

Build expressions (web map)

The following expressions assume that you're already familiar with Arcade FeatureSets, and FeatureSetByPortalItem() released in Arcade 1.8. If you'd like to familiarise yourself with Featuresets refer to this excellent blog written by Paul Barker.

After you've added the bus stops feature layer to a web map, build the following expression to return information relevant to the upcoming buses in the next 60 minutes (3,600 seconds).

  • Here is a web map already built for your convenience .

Expression for upcoming buses in the next 60 minutes
//query features from hosted table - 'stopsTimesTripsRoutesCalendar' in ArcGIS Online
var portal = Portal("https://www.arcgis.com")
var gtfsTable = FeatureSetByPortalItem(portal,"38ee59b7d5bc4173ab8786bd58ae274a", 0)

var stopId = $feature["stop_id"]

var startOfDayTime = Date(Year(Now()), Month(Now()), Day(Now()), 0, 0, 0)
//seconds elapsed since start of day
var secondsElapsed = DateDiff(Now(), startOfDayTime, 'seconds')

//return curr_date as an integer in the format 'YYYYMMDD' #HowItShouldBe
var curr_date = Number(Text(Now(),'YMMDD'))

//filter statement (SQL) - access variables with @
//if you'd like to change the time interval, change '3600' seconds to something else in statement - 'arrivalSeconds <= (@secondsElapsed + 3600)'
var filterStatement = 'arrivalSeconds >= @secondsElapsed AND arrivalSeconds <= (@secondsElapsed + 3600) AND stop_id = @stopId AND @curr_date >= start_date AND @curr_date <= end_date'

//filter the gtfsTable by the filter statement
//order results by arrivalSeconds in ascending order
var filtered = OrderBy(Filter(gtfsTable, filterStatement),'arrivalSeconds ASC')

var popupResult = ''

var weekDays = ['sunday','monday','tuesday','wednesday','thursday','friday','saturday']
//This variable is used within the for loop to determine whether a bus is operational on a given weekDay (e.g. returns 1 if operational, 0 if not).
var currWeekdayOpr = weekDays[Weekday(Now())]

//Iterate over the filtered results to show desried fields in popup
for (var f in filtered){
   if (f[currWeekdayOpr] == 1){
       popupResult += Left(f.arrival_time, 5) + " - " + f.route_long_name +
       When(f.route_type == 712, Concatenate(" (",f.trip_headsign,")"), Concatenate(" (",f.route_short_name,")")) +
       When(f.wheelchair_accessible == 1 && f.bikes_allowed == 1, " - ",
       f.wheelchair_accessible == 1 && f.bikes_allowed == 0," - ",
       f.wheelchair_accessible == 0 && f.bikes_allowed == 1," - ","") + TextFormatting.NewLine + TextFormatting.NewLine
   } else{
       popupResult += ""
   }
}

IIF(IsEmpty(popupResult), "No upcoming buses in the next hour" + TextFormatting.NewLine + TextFormatting.NewLine, popupResult)

You can also use a similar expression with a slightly modified filterStatement to query buses departed in the last x minutes. The statement below queries buses departed in the last 20 minutes (1,200 seconds).

var filterStatement = 'arrivalSeconds >= (@secondsElapsed - 1200) AND arrivalSeconds < @secondsElapsed AND stop_id = @stopId AND @curr_date >= start_date AND @curr_date <= end_date'
Complete expression for buses departed in the last 20 minutes
//query features from hosted table - 'stopsTimesTripsRoutesCalendar' in ArcGIS Online
var portal = Portal("https://www.arcgis.com")
var gtfsTable = FeatureSetByPortalItem(portal,"38ee59b7d5bc4173ab8786bd58ae274a", 0)

var stopId = $feature["stop_id"]

var startOfDayTime = Date(Year(Now()), Month(Now()), Day(Now()), 0, 0, 0)
//seconds elapsed since start of day
var secondsElapsed = DateDiff(Now(), startOfDayTime, 'seconds')

//return curr_date as an integer in the format 'YYYYMMDD' #HowItShouldBe
var curr_date = Number(Text(Now(),'YMMDD'))

//filter statement (SQL) - access variables with @
//if you'd like to change the time interval, change '1200' seconds to something else in statement - 'arrivalSeconds >= (@secondsElapsed - 1200)'
var filterStatement = 'arrivalSeconds >= (@secondsElapsed - 1200) AND arrivalSeconds < @secondsElapsed AND stop_id = @stopId AND @curr_date >= start_date AND @curr_date <= end_date'

//filter the gtfsTable by the filter statement
//order results by arrivalSeconds in ascending order
var filtered = OrderBy(Filter(gtfsTable, filterStatement),'arrivalSeconds ASC')

var popupResult = ''

var weekDays = ['sunday','monday','tuesday','wednesday','thursday','friday','saturday']
//This variable is used within the for loop to determine whether a bus is operational on a given weekDay (e.g. returns 1 if operational, 0 if not).
var currWeekdayOpr = weekDays[Weekday(Now())]

//Iterate over the filtered results to show desried fields in popup
for (var f in filtered){
   if (f[currWeekdayOpr] == 1){
       popupResult += Left(f.arrival_time, 5) + " - " + f.route_long_name +
       When(f.route_type == 712, Concatenate(" (",f.trip_headsign,")"), Concatenate(" (",f.route_short_name,")")) +
       When(f.wheelchair_accessible == 1 && f.bikes_allowed == 1, " - ",
       f.wheelchair_accessible == 1 && f.bikes_allowed == 0," - ",
       f.wheelchair_accessible == 0 && f.bikes_allowed == 1," - ","") + TextFormatting.NewLine + TextFormatting.NewLine
   } else{
       popupResult += ""
   }
}

return popupResult

Final thoughts

Once you’ve built the pop-ups to your heart's content, you can further highlight them by using configurable app templates. Click here to see how I’ve extended the above web map using the NearBy configurable app where users can search for bus stops by stop numbers, stop names or addresses.

Gotchas - FeatureSetByPortalItem() function is a great way to pull in data from another layer without needing to add that layer to your map. But make sure that the same sharing privileges are shared across the layer in the map and the layer you're pulling data from.

Learn more - if you like what you see, check out these carefully crafted Arcade resources by esri staff members. And if you do happen to be visiting this year's Developer Summit keep an eye out for Arcade tech sessions presented by Lisa Berry and Paul Barker.

Finally, stay tuned to Part 2 - where we'll take this solution "all the way to town"

 

Cheers! - Gee Fernando

Did you know that you can customise popups based on time and dates? With Arcade you can .

This can come in handy when displaying opening hours for restaurants, cafes and other facilities. If you’re unfamiliar with Arcade - please refer to these ArcGIS Blogs, as this post assumes some prior knowledge.

Additional Arcade resources

Pop Up Variations

 

Let’s get started

First, find or create a data-set with opening hours (preferably for all days of the week). For this example I’ll be using Access Canberra locations (sourced from - dataACT). Please ensure opening hours are saved as numbers or text field types.

Time Types

 

Build expressions

Within the pop-up configuration window - build the following expressions or feel free to follow along with this web map.

Opening Hour Expressions

 

hoursOfOperationToday {expression/expr0}

This expression will return the current weekday alongside its opening hours.

For example:

Thursday: 08:30-16:30

var weekDays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']

//Returns the current weekday. Values range from 0-6 where sunday is 0 and saturday is 6
var currentWeekDay = Weekday(Now())

//Return weekday followed by opening hours
var hoursOfOperationToday = weekDays[currentWeekDay] + ": " + $feature[weekDays[currentWeekDay]]

return hoursOfOperationToday

 

hoursOfOperationRestOfWeek {expression/expr1}

This expression will return the remaining weekdays alongside their opening hours.

For example:

Friday: 08:30-16:30
Saturday: Closed
Sunday: Closed
Monday: 08:30-16:30
Tuesday: 08:30-16:30
Wednesday: 08:30-16:30

var weekDays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday','Monday','Tuesday','Wednesday','Thursday','Friday'];

//Returns the current weekday. Values range from 0-6 where sunday is 0 and saturday is 6
var currentWeekDay = Weekday(Now())

var hoursOfOperationRestOfWeek = ""

//Iterate over the weekdays and opening hours for the remaning 6 days of the week
for(var i = currentWeekDay + 1; i < currentWeekDay + 7; i++){
    hoursOfOperationRestOfWeek += weekDays[i] + ": " + $feature[weekDays[i]] + TextFormatting.NewLine
}

return hoursOfOperationRestOfWeek

 

openCloseStatus {expression/expr2}

This expression will return whether the shopfront is Open, Closed, Opens soon or Closing soon based on opening hours and the time displayed on users' device .

var weekDays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']

//Returns the current weekday. Values range from 0-6 where sunday is 0 and saturday is 6
var currentWeekDay = Weekday(Now())

//Change 'Closed' to 00:00-00:00 to be consistent with the rest of opening hours information
var formattedOpeningHours = When($feature[weekDays[currentWeekDay]] == "Closed", "00:00-00:00", $feature[weekDays[currentWeekDay]])

//Separate Opening hours and minutes into an array
var separateOpening = Split(Replace(formattedOpeningHours,'-',':'),':')

//Assign hours and minutes to opening and close times
var startTime = Date(Year(Now()),Month(Now()),Day(Now()),separateOpening[0],separateOpening[1])
var endTime = Date(Year(Now()),Month(Now()),Day(Now()),separateOpening[2],separateOpening[3])

When(Now() > startTime && Now() < endTime && Now() > Dateadd(endTime, -1, 'hours'), "Closes soon:",
Now() > startTime && Now() < endTime, "Open",
Now() < startTime && Now() > Dateadd(startTime, -1, 'hours'), "Opens soon",
"Closed")

 

openCloseStatusColour {expression/expr3}

If you'd like to re-iterate the openCloseStatus values with added colour - rewrite and replace previous expression's return values with hexadecimal colour values.

For example:

#239B56 ⋅ Open

#CB4335 ⋅ Closed

#2ECC71 ⋅ Opens soon

#EC7063 ⋅ Closing soon

//First 15 lines the same as - openCloseStatus {expression/expr2}

When(Now() > startTime && Now() < endTime && Now() > Dateadd(endTime, -1, 'hours'), "#EC7063",
Now() > startTime && Now() < endTime, "#239B56",
Now() < startTime && Now() > Dateadd(startTime, -1, 'hours'), "#2ECC71",
"#CB4335")

Now use this expression to replace the colour code within the popup HTML. For more information on this topic - refer to Bring Colors From Your Map Into Your Pop-up Using Arcade written by Lisa Berry.

Inserting Colour Expressions into HTML

 

closingOrOpeningTime {expression/expr4}

This expression can look a little daunting at first, but like any other piece of code - go through one line at a time and use your own test environment to test and experiment .

It will return the:

  • closing time, if the Access Canberra shop front is Open or Closes soon.
  • opening time for the current day, if it Opens soon, or Closed (before hours).
  • and next opening day and timeif it's Closed (after hours), Closes soon or Closed for the whole day.
var weekDays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday','Monday','Tuesday','Wednesday','Thursday','Friday'];

//Returns the current weekday. Values range from 0-6 where sunday is 0 and saturday is 6
var currentWeekDay = Weekday(Now())

//Change 'Closed' to 00:00-00:00 to be consistent with the rest of of opening hours information
var formattedOpeningHours = When($feature[weekDays[currentWeekDay]] == "Closed", "00:00-00:00", $feature[weekDays[currentWeekDay]])

//Separate Opening hours and minutes into an array
var separateOpening = Split(Replace(formattedOpeningHours,'-',':'),':')

var startTime = Date(Year(Now()),Month(Now()),Day(Now()),separateOpening[0],separateOpening[1])
var endTime = Date(Year(Now()),Month(Now()),Day(Now()),separateOpening[2],separateOpening[3])

var openCloseStatus = When(Now() > startTime && Now() < endTime && Now() > Dateadd(endTime, -1, 'hours'), "Closes soon:",
Now() > startTime && Now() < endTime, "Open",
Now() < startTime && Now() > Dateadd(startTime, -1, 'hours'), "Opens soon",
"Closed")

//If openCloseStatus is Closed (before hours), return current day's opening time
//Else if openCloseStatus is Closed (after hours), Closes soon or Closed for the whole day, return next opening day and time
var nextOpening = ""
if (openCloseStatus == "Closed" && $feature[weekDays[currentWeekDay]] != "Closed" && Now() < startTime){
    nextOpening = "Opens " + LEFT($feature[weekDays[currentWeekDay]],5)
} else if ((openCloseStatus == "Closed" || openCloseStatus == "Closes soon:") && $feature[weekDays[currentWeekDay + 1]] != "Closed"){
    nextOpening = "Opens " + LEFT($feature[weekDays[currentWeekDay + 1]],5) + " " + weekDays[currentWeekDay + 1]
} else if (openCloseStatus == "Closed" || openCloseStatus == "Closes soon:") {
    for(var i = currentWeekDay + 1; $feature[weekDays[i]] == "Closed"; i++){
        nextOpening = "Opens " + LEFT($feature[weekDays[i + 1]],5) + " " + weekDays[i + 1]
    }
}

When(openCloseStatus == "Open", "⋅ " + RIGHT($feature[weekDays[currentWeekDay]],5),
openCloseStatus == "Opens soon", "⋅ " + LEFT($feature[weekDays[currentWeekDay]],5),
openCloseStatus == "Closes soon:", RIGHT($feature[weekDays[currentWeekDay]],5) + " ⋅ " + nextOpening,
"⋅ " + nextOpening)

 

Final thoughts

Once you’ve built the pop-ups to your heart's content you can further highlight them by using configurable app templates. Click here to see how I’ve extended the above web map using the NearBy configurable app.

Nearby Access Canberra GIF

 

Tips - Make sure to take advantage of Test your expressions feature to check whether return values look correct. If you have admin privileges to your computer you could also adjust time/date to test various return values based on opening hours.

Test Expressions

Challenge - As you may have figured out, these expressions are not time-zone aware. And in most instances this wouldn't be a problem - as the intended maps and apps are localised.

But, I'd still love to hear your thoughts around how you'd go about this. Please use the comments section below for ideas.

 

Cheers! - Gee Fernando