Last active
December 6, 2017 23:36
-
-
Save blech/91be55abfd8dbf848bcf46c8555e4b09 to your computer and use it in GitHub Desktop.
Muni new train finder
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>Muni New Train Finder</title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } | |
| </style> | |
| <!-- this is probably better | |
| http://sftransitriders.org/lrv4/ --> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bG1pc29uIiwiYSI6ImxTZVVRck0ifQ.ge5y2pZnmMwU9RLNmWTopQ'; | |
| var map = L.mapbox.map('map', 'mapbox.streets') | |
| .setView([37.75, -122.45], 13); | |
| map.on('ready', function() { | |
| console.log("ready"); | |
| // the layer has been fully loaded now, and you can | |
| // call .getTileJSON and investigate its properties | |
| var url = 'http://webservices.nextbus.com/service/publicXMLFeed?command=vehicleLocations&a=sf-muni&r=N' | |
| var d = new Date(); | |
| var seconds = Math.round(d.getTime() / 1000); | |
| $.ajax({ | |
| url: url+"&t="+seconds, | |
| cache: false, | |
| success: function(xml){ | |
| $(xml).find('vehicle').each(function(){ | |
| if ($(this).attr('id') >= "2000") { | |
| var lat = $(this).attr('lat'); | |
| var lon = $(this).attr('lon'); | |
| console.log(lat, ",", lon); | |
| L.marker([lat, lon], { | |
| icon: L.mapbox.marker.icon({ | |
| 'marker-size': 'medium', | |
| 'marker-symbol': 'bus', | |
| 'marker-color': '#fa0' | |
| }) | |
| }).addTo(map); | |
| } | |
| }); | |
| }}); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment