New Bus Icons in Go Transit App

I just released version 1.6.1 of Montclair for all the Go Transit cities. This includes a minor visual change of a new icon for the bus.

Previously, I was using Availtec’s Icon Factory, which lets you specify a color and heading, and it generates a .png image of that color with an arrow indicating the direction the bus is going. It has worked well, and looks nice enough, but I don’t like depending upon a 3rd party service, especially for cities that don’t use Availtec.

After some deliberation, I decided I wanted to do everything client side. I would have a single SVG icon that the client would load in javascript and would manipulate the stroke/fill colors and rotate the arrow to the heading. This works quite well, and the result is a nice clear image that we only have to load once!

This code works by loading the SVG through the DOMParser, then modifying attributes, reserializing it, then returning it as a data: url that is base64 encoded.

// load the svg
let xml = new DOMParser().parseFromString(svg.data, 'image/svg+xml');
// update the attributes //

// 1. the gradient
// stop1
let stop1 = xml.querySelector('#stop958');
stop1.style.stopColor = '#' + this.color;

...

// 5. The bearing, set its rotation
let bearing = xml.querySelector('#bearing');
bearing.setAttribute('transform', `rotate(${this.heading}, 250, 190)`);

// 6. Serialize and generate a data url with base64 encoded data
let serialized = new XMLSerializer().serializeToString(xml);
const url = 'data:image/svg+xml;base64,' + btoa(serialized);

Here’s the result:

New Bus Icons using custom Icon Factory

Go Transit App Updates

I have released a new version of the Montclair software, 1.6.0, that includes some major improvements to seeing estimated arrivals of buses at stops.

When selecting a stop, the app now goes into a full screen split mode with the estimated arrivals and the map. Clicking on one of the estimated arrivals will show you where that specific bus relative to your stop and will track the bus until it arrives. This makes seeing your next bus super simple!

This version will automatically roll out to your favorite “Go Transit” city app!

Go Tuscaloosa

I have added support for Tuscaloosa, Alabama’s transit system as part of my Go Transit series of apps. You can view Go Tuscaloosa in your browser or install it in the Apple or Google app stores.

‎Go Tuscaloosa
‎Go Tuscaloosa
Developer: Marcus Dillavou
Price: Free
Go Tuscaloosa
Go Tuscaloosa
Developer: line72
Price: Free

For a full list of cities and features, see the Go Transit App website.

Go Memphis and Go Nashville

I have added two more cities to the Go Transit Apps series, Go Memphis and Go Nashville. Both are available through the web, or in the Android Play Store and Apple App Store.

Go Memphis

‎Go Memphis
‎Go Memphis
Developer: Marcus Dillavou
Price: Free
Go Memphis
Go Memphis
Developer: line72
Price: Free

Go Nashville

‎Go Nashville
‎Go Nashville
Developer: Marcus Dillavou
Price: Free
Go Nashville
Go Nashville
Developer: line72
Price: Free

For a full list of cities and features, see the Go Transit App website.

More cities supported by Go Transit

I have been working on adding support for more cities. The following new cities now have Go Transit Apps:

Go Akron, OH

‎Go Akron
‎Go Akron
Developer: Marcus Dillavou
Price: Free
Go Akron
Go Akron
Developer: line72
Price: Free

Go Athens, GA

‎Go Athens, GA
‎Go Athens, GA
Developer: Marcus Dillavou
Price: Free
Go Athens, GA
Go Athens, GA
Developer: line72
Price: Free

Go Grand Rapids, MI

‎Go Grand Rapids
‎Go Grand Rapids
Developer: Marcus Dillavou
Price: Free
Go Grand Rapids
Go Grand Rapids
Developer: line72
Price: Free

Go Huntsville, Alabama

‎Go Huntsville
‎Go Huntsville
Developer: Marcus Dillavou
Price: Free
Go Huntsville
Go Huntsville
Developer: line72
Price: Free

Go Montgomery, AL

‎Go Montgomery, AL
‎Go Montgomery, AL
Developer: Marcus Dillavou
Price: Free
Go Montgomery, AL
Go Montgomery, AL
Developer: line72
Price: Free

You can also find all of these in the Google Play Store or the Apple App Store.

For a full list of cities and features, see the Go Transit App website.

See Stops and Arrival Estimates in Go Transit Apps

I have been making several improvements to the montclair code base, which is the software that powers all the Go Transit apps.

Go Transit now shows the stops of the selected route
See the stops for the Highland #12

First, for the selected routes, you can now see where all the stops are. This helps people who are unfamiliar with the system know where to pick up a bus that is near by.

See the arrival times of buses for the selected stop
Stop Arrival Times

Selecting a stop on the map will show you the estimated arrival time of buses for that stop! This is a live view that is continuously updated as the arrival estimates change.

If multiple buses use this stop, view all their arrival times
Arrival Times of a Stop with Multiple Buses

If multiple buses go through the same stop, then the app will show the arrival estimates for all the buses. This is especially useful in cases where routes overlap and you have multiple options.

All of these changes have already been pushed out, and any apps you have should automatically update!

Announcing the Go Transit Apps

During a recent visit to Steamboat Springs, Colorado, I quickly became frustrated with the app for the free bus system. I thought to myself that it would be really nice to have my Montclair app available for other cities. With that, the Go Transit series of apps were born.

I started off building out github actions for the montclair, montclair-pwa-android, and montclair-pwa-ios projects. The github actions will automatically generate a compiled build when the repository is tagged.

The next step was to build a transmogrifier. The transmogrifier takes a configuration, then pulls down a specific version of montclair, montclair-pwa-android, and montclair-pwa-ios, and replaces all the necessary names, strings, icons, and other information. The new versions are then pushed to their own repositories and tagged, which automatically kicks off the white labeled builds.

All that is left it to create a custom configuration (see Steamboat for an example). The assets projects all have github actions too, and each time a commit is pushed, it will then run the transmogrifier.

When all the builds are done, they can be uploaded to my website hosting provider, the Google Play Store, and the Apple App Store.

So far I have created white label builds for:

Go Birmingham, AL

‎Go Birmingham
‎Go Birmingham
Developer: Marcus Dillavou
Price: Free
Go Birmingham
Go Birmingham
Developer: line72
Price: Free

Go Mobile, AL

‎Go Mobile, AL
‎Go Mobile, AL
Developer: Marcus Dillavou
Price: Free
Go Mobile
Go Mobile
Developer: line72
Price: Free

Go Steamboat Springs, CO

‎Go Steamboat
‎Go Steamboat
Developer: Marcus Dillavou
Price: Free
Go Steamboat
Go Steamboat
Developer: line72
Price: Free

Go Indianapolis, IN

‎Go Indianapolis
‎Go Indianapolis
Developer: Marcus Dillavou
Price: Free
Go Indianapolis
Go Indianapolis
Developer: line72
Price: Free

Go Raleigh, NC

‎Go Raleigh
‎Go Raleigh
Developer: Marcus Dillavou
Price: Free
Go Raleigh
Go Raleigh
Developer: line72
Price: Free

For more information, see the Go Transit App website.