blech · December 6, 2017 23:36
diff --git a/index.html b/index.html
 <!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>
	<!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>