Strava Flyby

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <title>Strava 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: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" /> <script type='text/javascript' src='/assets/0ebe5520486e4b85e57ee9c72a5ad8bd.js'></script> <link rel='stylesheet' type='text/css' href='/assets/02bfec0208aa219a1deeed56a382f098.css' /> <script type='text/javascript' src='/assets/ba83958dcd954e1d9c2e15fac2e3a2f6.js'></script> <link rel='stylesheet' type='text/css' href='/assets/07558177ddbc9611c3d9c8d2dfb7755f.css' /> <script type='text/javascript' src='/assets/11d9e6a1775c20f82c03a9a00bce40ad.js'></script>  <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="full-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> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <div id="lightbox" class="row"> <div id="lightbox-wrap"> <div id="lightbox-inner"> <div id="lightbox-close">×</div> <div id="lightbox-form"> <div class="alert alert-warning" style="padding-top:15px; padding-bottom:5px;"> <h4>Enter a Strava activity ID: </h4> </div> <form class="form-inline" role="form" id="activity-form" align="center" style="padding-left: 50px; padding-right: 30px;"> <div class="form-group" style="margin:10px;"> <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> <a href="/flyby"><b>(Help?)</b></a> </div> <div> <label> eg: <a href="/flyby/viewer/#117975259,dtgHB8j7Bwf4CQgHUywIBy4uCAc2MQgHADYIB5Y9CAeDPwgHtUAIB4hLCAebTggHDXkIBwCqCAeG3AgH">http://www.strava.com/activities/<b>117975259</b>   </a> </label> </div> </form> </div> </div> </div> </div> <div id="sidebar"> <div id="playback-controls" style="padding-top: 10px;"> <div class="section" style="padding-bottom: 0px; padding-top: 6px;"> <input type="button" class="btn btn-sm btn-default button-play" id="play" value="\u25b6\ufe0e" title="Play or Pause (keybinding: Space ' ' )"/> <input type="button" class="btn btn-sm btn-default seek-button" id="time_back" value="≪" title="Seek Backwards (keybinding: Comma ',' )"/> <input type="button" class="btn btn-sm btn-default seek-button" id="time_forward" value="≫" title="Seek Forwards (keybinding: Period '.' )"/> <span style="display: inline-block; width: 120px"> <span id="playback_time" style="padding-left: 8px;" title="Time of Day"></span> <span id="speed_display" style="float: right" title="Playback speed multiplier"></span> </span> <div class="toggle-triangle carat up-carat" id="sidebar-toggle" title="Toggle Activity List Visibility"></div> </div> <div style="padding-bottom: 0px; padding-top: 0px; width: 100%; height: 10px;display: table;"> <span style="width: 70%; display: table-cell;" title="Adjust Playback Time (keybindings: , and .)"> <div id="time_slider" style="margin: 10px;"></div> </span> <span style="width: 30%; display: table-cell;" title="Adjust Playback Speed (keybindings: [ and ]"> <div id="speed_slider" style="margin: 10px;"></div> </span> </div> </div> <div class="content" style="display: block; padding-top: 0px;"> <div id="activity-list" style="overflow: scroll; overflow-y: scroll; overflow-x: hidden;"> <div id="table_loading" align="center" style="display: none">  <b>Loading...</b> </div> <div id="table_error" align="center" style="display: none"> </div> <table id="activity_table" class="table table-hover table-striped table-condensed" style="display: none; margin-bottom: 0px;"> <thead> <tr> <th title="Check to show stream and playback activity concurrently" align="right" style="padding-left: 8px; padding-bottom: 2px;"> <input type="checkbox" id="select_all_activities" title="Toggle select all activities"> </th> <th align="center" style="padding-left: 40px;"> Athlete </th> <th title="Is the activity a flyby? (did the other person pass close to you at some point)"> F </th> <th class="sortable" data-sort="int" title="Correlation score-- percentage of primary activity that the other activity was close."> C </th> <th class="sortable" data-sort="int" title="Spatial Correlation score-- similarity of activity, regardless of time. High score means that the other activity covered similar roads."> S </th> <th class="sortable" data-sort="int" title="Activity Distance (miles)"> D </th> </tr> </thead> <tbody> </tbody> </table> </div> <div class="info hidden-xs"> <div class="section" align="left" style="padding-top: 10px"> <div class="view-preferences"> <div class="view-preference"> <input type="checkbox" id="hide_markers" /> <label for="hide_markers">Flyby Locations</label> </div> <div class="view-preference"> <input type="checkbox" id="hide_different_activity_type" /> <label for="hide_different_activity_type" id="activity_type_filter_text" > Hide Others </label> </div> </div> <br /> Find who you passed or flyby'd. Playback multiple activities together. <br /> <a href="/flyby/" id="help" target="_blank">More Info</a> • <a id="change-activity">Change Activity</a> </div> </div> <div class="section labs-disclaimer hidden-xs"> A <strong>Strava Labs</strong> project, <a href="/">learn more.</a> </div> </div> </div> <div id="controls" class="hidden-xs"> <div type="button" id="zoomUp" class="btn btn-default btn-sm control-zoomUp">+</div> <div type="button" id="zoomDown" class="btn btn-default btn-sm control-zoomDown">-</div> </div> <div id="compare-toggle-outer"> <span id="compare-new-text" style="display: none">  <b style="color:#fc4c02">New!</b> Compare time and distance gaps and view elevation</span> <div id="compare-toggle" class="toggle-triangle carat up-carat"> </div> </div> <div id="compare-outer" style="display: none"> <div id="compare-graph" class="noselect"> <div id="compare-info-text"><b style="color:#fc4c02">New!</b> Compare time gaps. <a href="/flyby">More info</a></div> <div id="delta-slider" title="Adjust Time Ahead axis limits. Default: dynamic resize"></div> <div id="zoom-slider" title="Adjust compare distance window zoom and position"></div> </div> </div> <div id="mapholder"> <div id="map"></div> </div>  <div class="modal fade" id="flybyModal" tabindex="-1" role="dialog" aria-labelledby="flybyModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="flybyModalLabel">Welcome to Flyby</h4> </div> <div class="modal-body"> <p> Athletes use this Strava Labs feature to play back activities and see who they flew by on the road or trail. Before you dive in, a few reminders: </p> <ul> <li>Flyby sharing is turned off by default for all Strava athletes.</li> <li>When this setting is turned off, no one will be able to see your activities by using this feature.</li> <li>To share your activities on Flyby, change your Flyby <a href="https://www.strava.com/settings/privacy">privacy controls</a> to “Everyone.” All of your activities that are also set to “Everyone” will then be publicly viewable on Flyby. </li> <li>Regardless of your Flyby setting, any individual activity set to “Only Me” or “Followers Only” will also not show up on Flyby.</li> <li>You are in control of what you share on Strava and can change your controls at any time at <a href="https://www.strava.com/settings/privacy">strava.com/settings/privacy</a></li> </ul> <div class="flybyModalVisibilityPreference"> <input type="checkbox" id="flybyModalDontShowAgain" /> <label for="flybyModalDontShowAgain">Don't show this again</label> </div> </div> </div> </div> </div> <link rel='stylesheet' type='text/css' href='/assets/af83b0cdfa947728f0dc9cab401ae2f5.css' /> <link rel="stylesheet" href="../css/flyby.css" /> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script> <script type='text/javascript' src='/assets/57e538b23700eb2a0ff95d9577b96ec1.js'></script> <script> document.addEventListener("DOMContentLoaded", function(event) { // check localstorage to see if user has permanently dismissed the modal const flybyModalDismissed = window.localStorage.getItem('flybyModalDismissed'); if (JSON.parse(flybyModalDismissed)) { return; } $('#flybyModal').modal('show'); }) $('#flybyModal').on('hide.bs.modal', function (e) { // update localstorage if user has checked the "Don't show this again" checkbox if ($('#flybyModalDontShowAgain').is(':checked')) { window.localStorage.setItem('flybyModalDismissed', 'true'); } }); </script> <script type="text/javascript" src="/flyby/js/mustache.min.js"></script> <script type='text/javascript' src='/assets/78a2ce731c39b76efe02943492024854.js'></script> <script id="activity_template" type="x-tmpl-mustache"> <tr title="{{name}}"> <td align="left" style="padding-left: 8px; padding-top: 4px;" id="activity-checkbox-{{id}}"> <input type="checkbox" class="activity_select"> </td> <td style="padding-left: 6px;"> <a href="http://www.strava.com/activities/{{id}}" target="_blank"> <img data-src="{{avatar}}" class="athlete-avatar" style="border-color: {{streamColor}}" src="//d3nn82uaxijpm6.cloudfront.net/assets/avatar/athlete/medium-989c4eb40a5532739884599ed662327c.png" > {{shortFirstName}} </a> </td> <td style="cursor: pointer">{{flyby_text}}</td> <td style="background-color:rgba(156, 255, 153,{{correlation.correlation}});" align="center"> {{corr_human}} </td> <td style="background-color:rgba(153, 172, 255,{{correlation.spatialCorrelation}});" align="center"> {{scorr_human}} </td> <td style="background-color:rgba(255, 153, 153,{{distance_ratio}});" align="center"> {{dist_miles}} </td> </tr> </script> <script id="marker_template" type="x-tmpl-mustache"> <div class="athlete-marker" style="opacity: {{opacity}}"> <a href="http://www.strava.com/activities/{{activityId}}" target="_blank"> <img class="athlete-avatar" src="{{avatar}}" title="{{firstName}} - {{title}}" style="border-color: {{color}};"> </a> </div> </script> </body> </html>

CINXE.COM

Strava Flyby