1<!DOCTYPE HTML> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <title>Suze Shardlow :: Boris_bikes</title> 7 <link rel="shortcut icon" href="/images/favicon/favicon.png"> 8
8<script src="https://kit.fontawesome.com/b77d94a82e.js" crossorigin="anonymous"></script>
8 9 <link rel="stylesheet" href="/assets/css/main.css"> 10 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 11 12 <meta name="theme-color" content="#ff0000" /> 13 <meta name="msapplication-navbutton-color" content="#ff0000"> 14 <meta name="apple-mobile-web-app-capable" content="yes"> 15 <meta name="apple-mobile-web-app-status-bar-style" content="#ff0000"> 16 17 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 66 bytes, lines 17-18
17 18 <script async src="https://www.googletagmanager.com/gtag/js?id=
18UA-108081564-1
vendor: 14 bytes, lines 18-19
18"></script> 19
19<script> 20
vendor: 143 bytes, lines 20-24
20window.dataLayer = window.dataLayer || []; 21 function gtag() { dataLayer.push(arguments); } 22 gtag('js', new Date()); 23 24 gtag('config', '
24UA-108081564-1
vendor: 6 bytes, lines 24-25
24'); 25
25</script>
25 26 <!-- Begin Jekyll SEO tag v2.8.0 --> 27<title>Boris_bikes | suze.dev</title> 28<meta name="generator" content="Jekyll v3.9.5" /> 29<meta property="og:title" content="Boris_bikes" /> 30<meta name="author" content="@SuzeShardlow" /> 31<meta property="og:locale" content="en_UK" /> 32<meta name="description" content="A map showing the locations of the Boris Bike (officially called Santander Cycle) stations. Data is pulled from the Transport for London (TfL) API and shown on a map using the Google Maps API." /> 33<meta property="og:description" content="A map showing the locations of the Boris Bike (officially called Santander Cycle) stations. Data is pulled from the Transport for London (TfL) API and shown on a map using the Google Maps API." /> 34<link rel="canonical" href="https://suze.dev/coding_projects/boris_bikes/" /> 35<meta property="og:url" content="https://suze.dev/coding_projects/boris_bikes/" /> 36<meta property="og:site_name" content="suze.dev" /> 37<meta property="og:image" content="https://suze.dev/images/coding_projects/boris_bikes/boris_bikes.jpg" /> 38<meta property="og:type" content="article" /> 39<meta property="article:published_time" content="2024-05-30T15:03:13+00:00" /> 40<meta name="twitter:card" content="summary_large_image" /> 41<meta property="twitter:image" content="https://suze.dev/images/coding_projects/boris_bikes/boris_bikes.jpg" /> 42<meta property="twitter:title" content="Boris_bikes" /> 43<meta name="twitter:site" content="@SuzeShardlow" /> 44<meta name="twitter:creator" content="@SuzeShardlow" />
45<script type="application/ld+json"> 46{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"@SuzeShardlow"},"dateModified":"2024-05-30T15:03:13+00:00","datePublished":"2024-05-30T15:03:13+00:00","description":"A map showing the locations of the Boris Bike (officially called Santander Cycle) stations. Data is pulled from the Transport for London (TfL) API and shown on a map using the Google Maps API.","headline":"Boris_bikes","image":"https://suze.dev/images/coding_projects/boris_bikes/boris_bikes.jpg","mainEntityOfPage":{"@type":"WebPage","@id":"https://suze.dev/coding_projects/boris_bikes/"},"url":"https://suze.dev/coding_projects/boris_bikes/"}</script>
46 47<!-- End Jekyll SEO tag --> 48 49</head> 50 51<body class="is-preload"> 52 <div id="wrapper"> 53 <div id="main"> 54 <div class="inner"> 55 <header id="header"> 56 57 <a href="/coding_projects" class="logo"><strong>Coding projects</strong> by Suze Shardlow</a> 58 59 60 61 62 <ul class="icons"> 63 <span class="label share-label">Share this content</span> 64 65 <li> 66 <a target="" 67 href="https://twitter.com/intent/tweet?text=Check out by @SuzeShardlow&url=https://suze.dev/coding_projects/boris_bikes/" 68 class="icon fa-twitter"></a> 69 </li> 70 71 <li> 72 <a target="" 73 href="https://www.linkedin.com/shareArticle?mini=true&url=https://suze.dev/coding_projects/boris_bikes/&title=&source=suze.dev by Suze Shardlow" 74 class="icon fa-linkedin-in"></a> 75 </li> 76 77 <li> 78 <a target="" 79 href="https://wa.me/?text=Check out by Suze Shardlow https://suze.dev/coding_projects/boris_bikes/" 80 class="icon fa-whatsapp"></a> 81 </li> 82 83 <li> 84 <a target="" 85 href="mailto:?subject=Check out by Suze Shardlow&body= https://suze.dev/coding_projects/boris_bikes/" 86 class="icon fa-envelope"></a> 87 </li> 88 89 </ul> 90 91 92 93 94 <div class="align-right"> 95
95<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>
vendor: 1 bytes, line 95
95
96<script 97 type='text/javascript'>kofiwidget2.init('Buy me a coffee!', '#ff0000', 'SuzeShardlow'); kofiwidget2.draw();</script>
97 98 99 </div> 100</header> 101 <section id="banner"> 102 <div class="content"> 103 <header class="main"> 104 <h1>Boris Bikes</h1> 105 <h2>A little JavaScript app I built in one evening using the TfL and Google Maps APIs.</h2> 106 107 </header> 108 </section> 109 <span class="image main"><img src="/images/coding_projects/boris_bikes/boris_bikes.jpg"></span> 110 <div class="blogpost"> 111 <p>A map showing the locations of the Boris Bike (officially called Santander Cycle) stations. Data is pulled from the Transport for London (TfL) API and shown on a map using the Google Maps API.</p> 112 113<p><a href="http://suze.dev/boris_bikes">Try it out!</a></p> 114 115<p><a href="https://github.com/SuzeShardlow/boris_bikes">View code</a></p> 116 117<p>I created a web page showing a Google Map and then replaced the custom Google Maps markers to show Boris Johnsonâs head on the map at the location of each Boris Bike docking station.</p> 118 119<p>His head shows in full colour if there is more than one bike at the docking station, or in black and white if there are 0 or 1 bikes at the docking station (thus saving the user a wasted journey).</p> 120 121<p>When each head is clicked, an info window showing the name of each docking station, the number of available bikes and the number of spaces appears.</p> 122 123 </div> 124 125 126<div class="subscribe-area"> 127 128 <ul class="icons icons-bottom"> 129 <span class="label share-label">Share this content</span> 130 131 <li> 132 <a target="" 133 href="https://twitter.com/intent/tweet?text=Check out by @SuzeShardlow&url=https://suze.dev/coding_projects/boris_bikes/" 134 class="icon fa-twitter"></a> 135 </li> 136 137 <li> 138 <a target="" 139 href="https://www.linkedin.com/shareArticle?mini=true&url=https://suze.dev/coding_projects/boris_bikes/&title=&source=suze.dev by Suze Shardlow" 140 class="icon fa-linkedin-in"></a> 141 </li> 142 143 <li> 144 <a target="" 145 href="https://wa.me/?text=Check out by Suze Shardlow https://suze.dev/coding_projects/boris_bikes/" 146 class="icon fa-whatsapp"></a> 147 </li> 148 149 <li> 150 <a target="" 151 href="mailto:?subject=Check out by Suze Shardlow&body= https://suze.dev/coding_projects/boris_bikes/" 152 class="icon fa-envelope"></a> 153 </li> 154 155 </ul> 156 157 158 159 <form class="subscribe-bottom-form" 160 action="https://tinyletter.com/theshardlowdown" method="post" target="popupwindow" 161 onsubmit="window.open('https://tinyletter.com/theshardlowdown', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true"> 162 <label class="subscribe-cta" for="tlemail">Subscribe to get new content in 163 your inbox:</label> 164 <input class="subscribe-input" type="text" name="email" 165 placeholder="[email protected]" id="tlemail" /> 166 <input type="hidden" value="1" name="embed" /> 167 168 <input class="subscribe-button" type="submit" value="Subscribe" /> 169 170</form> 171 172 173 174 175</div> 176 177 178 <hr /> 179 180 181 182 <div id="disqus_thread"></div>
183<script> 184 185 /** 186 * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. 187 * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/ 188 189 var disqus_config = function () { 190 this.page.url = page.url; // Replace PAGE_URL with your page's canonical URL variable 191 this.page.identifier = page.headline; // Replace PAGE_IDENTIFIER with your page's unique identifier variable 192 }; 193 194 (function () { 195 var d = document, s = d.createElement('script'); 196 s.src = 'https://suze.disqus.com/embed.js'; 197 s.setAttribute('data-timestamp', +new Date()); 198 (d.head || d.body).appendChild(s); 199 })(); 200</script>
200 201<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by 202 Disqus.</a></noscript> 203 204 205 206 207 </div> 208 </div> 209 <div id="sidebar"> 210 <div class="inner"> 211 <nav id="menu"> 212 <header class="major"> 213 <h2>Look around...</h2> 214 </header> 215 216 <ul> 217 218 219 220 221 <li><a href="/" class="">Home</a> 222 </li> 223 224 225 226 227 228 229 <li> 230 231 232 233 <span class="opener ">About</span> 234 235 <ul> 236 237 238 <li><a href="/about" class="">About Me</a> 239 </li> 240 </li> 241 242 243 <li><a href="/bio" class="">Bio</a> 244 </li> 245 </li> 246 247 </ul> 248 249 250 251 252 253 254 255 256 <li><a href="/blog" class="">Writing</a> 257 </li> 258 259 260 261 262 263 264 <li><a href="/public_speaking" class="">Public Speaking</a> 265 </li> 266 267 268 269 270 271 272 <li><a href="/coding_projects" class="menu-highlight">Coding Projects</a> 273 </li> 274 275 276 277 278 279 280 <li><a href="/sketchnotes" class="">Sketchnotes</a> 281 </li> 282 283 284 285 286 287 288 </ul> 289 290
290<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>
vendor: 1 bytes, line 290
290
291<script 292 type='text/javascript'>kofiwidget2.init('Buy me a coffee!', '#ff0000', 'SuzeShardlow'); kofiwidget2.draw();</script>
292 293 294 295 </nav> 296 297 <footer id="footer"> 298 <header class="major"> 299 <h2>Find me!</h2> 300 </header> 301 302 <ul class="icons"> 303 304 <li> 305 <a href="https://twitter.com/intent/follow?screen_name=suzeshardlow" class="icon fa-twitter" rel="me"><span class="label"></a> 306 </li> 307 308 <li> 309 <a href="https://linkedin.com/in/SuzeShardlow" class="icon fa-linkedin-in" rel="me"><span class="label"></a> 310 </li> 311 312 <li> 313 <a href="https://github.com/SuzeShardlow" class="icon fa-github-alt" rel="me"><span class="label"></a> 314 </li> 315 316 <li> 317 <a href="https://hachyderm.io/@suze" class="icon fa-mastodon" rel="me"><span class="label"></a> 318 </li> 319 320 <li> 321 <a href="https://www.youtube.com/channel/UCWSMhdjbGea46ugbKF31CDA" class="icon fa-youtube" rel="me"><span class="label"></a> 322 </li> 323 324 <li> 325 <a href="" class="icon fa-envelope email" rel="me"><span class="label"></a> 326 </li> 327 328 329 <form " 330 action="https://tinyletter.com/theshardlowdown" method="post" target="popupwindow" 331 onsubmit="window.open('https://tinyletter.com/theshardlowdown', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true"> 332 <label class="subscribe-cta-nav" for="tlemail">Subscribe to get new content in 333 your inbox:</label> 334 <input class="subscribe-input-nav" type="text" name="email" 335 placeholder="[email protected]" id="tlemail" /> 336 <input type="hidden" value="1" name="embed" /> 337 <div class="align-right"> 338 <input class="subscribe-button-nav" type="submit" value="Subscribe" /> 339 </div> 340</form> 341 342 <div class="h-card"> 343 344 <p class="copyright"> 345 © <a class="p-name u-url u-uid" href="/"> 346 <span class="p-given-name">Suze</span> 347 <span class="p-family-name">Shardlow</span></a> 2017-2024. All rights reserved. 348 <span class="p-country-name">United Kingdom</span>. 349 Layout: <a href="http://html5up.net" target="_blank">HTML5 UP</a> 350 351 <section style="display: none;"> 352 <ul> 353 <li class="p-honorific-prefix">Ms</li> 354 <li class="p-nickname">SuzeShardlow</li> 355 <li class="p-gender-identity">F</li> 356 <li class="u-email email">#</li> 357 <li class="u-photo"><img src="/images/p_data/suze.jpg"></li> 358 <li class="p-job-title">Developer Relations Strategist</li> 359 </ul> 360 </section> 361 362 </div> 363 364</footer> 365 366 367 </div> 368</div> 369 </div> 370 371
371<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
vendor: 1 bytes, line 371
371
372<script src="/assets/js/browser.min.js"></script>
vendor: 1 bytes, line 372
372
373<script src="/assets/js/breakpoints.min.js"></script>
vendor: 1 bytes, line 373
373
374<script src="/assets/js/util.js"></script>
vendor: 1 bytes, line 374
374
375<script src="/assets/js/main.js"></script>
vendor: 1 bytes, line 375
375
376<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
376 377 378</body> 379 380</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.