CINXE.COM
Flyby
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <title>Flyby</title> <link rel='icon' type='image/png' href="/favicon-32x32.png" sizes='32x32'> <link rel='icon' type='image/png' href="/favicon-96x96.png" sizes='96x96'> <link rel='icon' type='image/png' href="/favicon-16x16.png" sizes='16x16'> <meta property="og:title" content="Strava Activity Playback" /> <meta property="og:site_name" content="Strava Labs" /> <meta property="og:url" content="http://labs.strava.com/flyby/" /> <meta property="og:description" content="Find who you passed or flyby'd. Playback multiple activities together." /> <meta property="og:image" content="http://labs.strava.com/assets/img/tile-flyby.png" /> <link rel='stylesheet' type='text/css' href='/assets/07558177ddbc9611c3d9c8d2dfb7755f.css' /> <script type='text/javascript' src='/assets/11d9e6a1775c20f82c03a9a00bce40ad.js'></script> <!-- Cookie Policy Banner --> <script src='https://www.strava.com/cookie-banner.js' type='text/javascript'></script> <script type='text/javascript'> jQuery(document).ready(function () { typeof StravaCookieBanner !== 'undefined' && StravaCookieBanner.render() }); </script> </head> <body> <div style="border-bottom: 1px solid #EEE" id="header"> <div class="container"> <nav id="strava-nav" class="navbar navbar-default navbar-static-top"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand"> <img src="/assets/img/strava-labs-logo@2x.svg" alt="Strava Labs" /> </a> <div class="navbar-header pull-right collapsed-sharing"> <ul class="nav navbar-nav navbar-right" style="margin: 0; margin-right: 10px"> </ul> </div> </div> <div class="collapse navbar-collapse" id="navbar-collapse" style="border-top: 0px"> <ul class="nav navbar-nav navbar-left" style="margin-left: 15px"> <li ><a href="/projects">Projects</a></li> <li ><a href="https://medium.com/strava-engineering">Blog</a></li> <li ><a href="https://developers.strava.com">Developers</a></li> <li ><a href="https://www.strava.com/?utm_source=flyby">Strava.com</a></li> <li ><a href="https://www.strava.com/careers">Careers</a></li> </ul> <ul class="nav navbar-nav navbar-right collapse-sharing" style="margin-right: 0"> </ul> </div> </nav> </div> </div> <script src="js/activity_form_submit.js"></script> <style type="text/css"> .float-text { margin: 10px; position: relative; float: left; } </style> <div class="container" style="margin-top: 20px"> <div class="row"> <div class="col-md-4"> <h3>Flyby</h3> </div> <div class="col-md-8"> <form class="form-inline" role="form" id="activity-form" align="right" style="padding-left: 50px;"> <div class="form-group" style="margin:10px 0px;"> <input type="text" class="form-control" id="activityId" placeholder="Activity URL or ID" name="activityId"> <button type="submit" class="btn btn-default btn-orange" id="submit">View</button> </div> <div> <label> eg: <a href="/flyby/viewer/#117975259,dtgHB8j7Bwf4CQgHUywIBy4uCAc2MQgHADYIB5Y9CAeDPwgHtUAIB4hLCAebTggHDXkIBwCqCAeG3AgH">http://www.strava.com/activities/117975259</a> </label> </div> </form> </div> </div> <div class="row"> <div class="col-md-12"> <hr style="height: 0px; border: 1px solid #eee; margin-top: 0" /> <div class="alert alert-info" align="center"> <b>Examples:</b> <a href="/flyby/viewer/#130432764?c=u0cgmr7y&z=9&t=1JIewG&a=_D7GB3L8xQd_eL8HfbvDCID45AwrWL8HX3HEBw&x=mo-u">Paris-Roubaix</a> <a href="/flyby/viewer/#289240549?c=drt0hx9g&z=E&t=1LDGSh&a=5XU9EZF9PhF4lEIRCihDEYuTShG_KXsRVfxLEcqHTxEdZD0R&x=10AC&compare=t">Boston Marathon</a> <a href="/flyby/viewer/#66326148?c=9q8zhw00&z=F&t=1HtiBd&a=hA70A3QQ9ANwI_QDwh70A3ge9APsNfQDCyr0A34f9ANIK_QDhBr0A_n68wOaEfQDlgP0Axsk9AMl-_MDwyj2A-BD9APBSvQDCBn0A5sX9AOuH_QDGA_0A58C9AM&x=KtLe&compare=t">Hawk Hill Raid</a> <a href="/flyby/viewer/#125674852?c=9qfqzh4u&z=E&t=1JE6ul&a=ZKV9Bx7RfAdfOHoHBrx6B05legc&compare=t">Skiing at Squaw</a> <a href="/flyby/viewer/#54969070?c=9q9q9fny&z=B&t=1Hb-bO&a=7sJGA0_IRgNbC0cDaQdHAxw8UgOGR1cDMdxOA5boRgNDPF0D5MNPA_GPTgMj1EYD&x=nnuk&y=e&compare=t">Tour of California</a> </div> </div> </div> <h4 align="center"><b style="color:#fc4c02">New!</b> View elevation and compare time and distance gaps</h4> <hr style="height: 0px; border: 1px solid #eee; margin-top: 0" /> <div class="row"> <div class="col-md-6 col-sm-12 col-xs-12"> <ul style="line-height: 25px"> <li>See the elevation profile of your activity</li> <li>Time ahead/behind lines of selected activities</li> <li>Zoomable distance axis follows your activity during playback</li> </ul> </div> <div class="col-md-6 col-sm-12 col-xs-12"> <ul style="line-height: 25px"> <li>Improved playback accuracy and speed controls</li> <li>Now showing time of day instead of elapsed time</li> <li>New color theme and Mapbox/OpenStreetMap map</li> </ul> </div> </div> <div class="row"> <div id="compare" class="col-md-10 col-md-offset-1"> <a href="/flyby/viewer/#423818878?c=9q9r3xk5&z=H&t=1MDE5G&a=fvZCGXj2QhnB-EIZ&x=NqVN&y=o&compare=t"><img src="./flyby-compare.png"></a> </div> </div> <div class="row fancyp"> <div class="col-md-6 col-sm-6 col-xs-12"> <p> The new compare tool displays distance and elevation along your activity. Selected activities are projected onto your activity path along all sections where you traveled the same path. </p> <p> The colored circles show the projected positions of selected activities. Each colored line plots the time gaps between a selected activity and the main activity. The main activity appears as a flat black line. </p> </div> <div class="col-md-6 col-sm-6 col-xs-12" style="padding-bottom:30px;"> <p> In the example above, near mile 10 red was 3 minutes ahead of black. Had red stopped at mile 10, black would have caught up in 3 minutes. </p> <p> Near mile 10, black accelerates and drops blue. Black is now moving the fastest. At the time shown as red nears mile 11, black is only about 30 seconds behind. <a href="/flyby/viewer/#423818878?c=9q9r3xk5&z=H&t=1MDE5G&a=fvZCGXj2QhnB-EIZ&x=NqVN&y=o&compare=t">View this example</a>. </p> </div> </div> <div class="row"> <hr style="height: 0px; border: 1px solid #eee; margin-top: 0" /><br> <div style="width: 860px; height: 650px; margin: auto"> <div style="float: left; width: 180px; text-align: left"> <div class="float-text" style="padding-top: 10px; height:180px"> <b>Playback Controls</b><br> Play/pause, and step through time. Change play speed and seek to any time in your activity. </div> <div class="float-text" style="height: 150px"> <b>Activity List</b><br> A list of other Strava Athletes you crossed paths with (+ the main activity). Check to add to the playback. </div> <div class="float-text" style="padding-top: 70px; height: 100px"> <b>Flyby Locations</b><br> See exactly where you passed by others on your activity. </div> </div> <div style="width: 500px; float: left;"> <a href="/flyby/viewer/#117975259,dtgHB8j7Bwf4CQgHUywIBy4uCAc2MQgHADYIB5Y9CAeDPwgHtUAIB4hLCAebTggHDXkIBwCqCAeG3AgH"><img src="flyby-big.png" width="500"></a> </div> <div style="float: left; width: 180px; text-align: left"> <div class="float-text" style="top: 50px;"> <b>The Map</b><br> Shows the position at the given time and full path of every selected activity. </div> </div> </div> </div> <div class="row" align="left"> <h4>Activity Attributes</h4> <hr style="height: 0px; border: 1px solid #eee; margin-top: 0" /> <table class="table"> <thead> <tr> <th style="width: 10%">Attribute</th> <th>Explanation</th> </tr> </thead> <tbody> <tr> <td> <b>F</b>lyby </td> <td> A (✓) means that this activity was a flyby with the primary activity. This means that the activity was within 50 meters of you at some point, and did not ride with you for an extended period of time (has a low correlation). </td> </tr> <tr> <td style="background-color:#CFC"> <b>C</b>orrelation </td> <td> Percentage of time that this activity was close to the primary activity. Correlations over 30% are considered group activity matches in Strava. </td> </tr> <tr> <td style="background-color: #CCF"> <b>S</b>patial Correlation </td> <td> Time independent similarity of activity to the primary activity. An activity travelling the same course will have a high spatial correlation regardless of the speed or start time of the activity. </td> </tr> <tr> <td style="background-color: #FCC"> <b>D</b>istance </td> <td> Total distance of each activity in miles. </td> </tr> </tbody> </table> </div> </div> <link rel="stylesheet" href="css/landing.css" /> <div id="footer" class="footer"> <div class="container"> <div style="padding: 30px 0px; max-width: 600px"> <b>Strava Labs</b> is where Strava engineering occasionally releases side projects independent of our product and share our processes and stories. Projects may be added, removed or break at any time, so use them at your own risk. <br /><br /> <span style="color: #999"> drew -at- strava.com </span> </div> </div> <div style="background-color: #333; padding: 20px 0"> <div class="container"> <a href="https://www.strava.com?utm_source=labs"> <div class="logo"></div> </a> <div class="item"> © 2018 Strava </div> <div style="display: inline-block"> <div class="item"> <a href="https://strava.com/terms?utm_source=labs">Terms of Service</a> </div> <div class="item"> <a href="https://strava.com/privacy?utm_source=labs">Privacy Policy</a> </div> <div class="item"> <a href="http://twitter.com/StravaEng">@StravaEng</a> </div> </div> <br style="clear: both" /> </div> </div> </div> </body> </html>