Commute progress tracker prototype - http://codepen.io/johan/pen/fujzI - This is a work in progress. Next few steps:* render time arcs of all discrete transit steps, angle by duration* render space arcs of all discrete transit steps, angle by duration, ..

<!-- codepen doesn't like depending on this(?) -->

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,geometry"></script>

​

<div id="map"></div>

<a id="progress"></a>

<div id="transit-wpr">

  <button id="transit">Toggle transit layer</button>

</div>

​

<div id="panel-wpr">

  <div id="info">

    <div>

      <h2>Transit directions</h2>

    </div>

    <div> 

      <label>from:</label>

      <input class="input" id="from" value="North Berkeley BART Station, Berkeley, CA, USA">

    </div>

    <div>

      <label>to:</label>

      <strong>414 Brannan Street, San Francisco, CA, USA</strong>

    </div>

    <div>Depart at <select id="depart"></select></div>

    <div class="btn">

      <button id="go">Get Directions</button>

    </div>

  </div>

  <div id="panel"></div>

</div>

​