Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 29, 2015 22:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/db4eb50913db235e7daa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/db4eb50913db235e7daa to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/qigeveqefa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.string/3.2.2/underscore.string.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
$(document).ready(function() {
setInterval(
function() {
getBusData(8180);
},
15000
);
function getBusData(busNumber) {
var busUrlFormat = 'http://webservices.nextbus.com/service/publicXMLFeed?command=vehicleLocations&a=%s&r=%s&t=%d';
var busAgency = 'ttc';
var routeTag = '';
var time = 0;
var mapUrl = s.sprintf(busUrlFormat, busAgency, routeTag, time);
var config = {
url: mapUrl,
dataType: 'xml',
crossDomain: true
};
$.ajax(config).always(
function() {
//console.log('Always');
}
).then(
function(data, textStatus, jqXHR) {
var ourBus = data.querySelector(
'vehicle[id="' +
busNumber +
'"]'
).attributes;
var location = {
lat: parseFloat(ourBus.lat.value),
long: parseFloat(ourBus.lon.value)
};
console.log('Found Location: ', location);
drawMap(
location.lat,
location.long
);
},
function(jqXHR, textStatus, errorThrown) {
console.log('No');
}
);
}
function drawMap(lat, long){
var mapsUrlFormat = 'https://maps.googleapis.com/maps/api/staticmap?center=%s&zoom=%d&size=%dx%d&markers=%s';
var mapsUrlFormat2 = 'https://maps.googleapis.com/maps/api/staticmap?zoom=%d&size=%dx%d&markers=%s';
var center = 'Davisville,Toronto,Ontario';
var zoom = 16;
var sizex = 400;
var sizey = 400;
var mColor = 'blue';
var mLabel = 'Bus';
//var lLat = 43.6991;
//var lLong = -79.393082;
var mLocation = s.sprintf('|%f,%f', lat, long);
var markerFormat = 'color:%s|label:%s%s';
var markers = encodeURI(s.sprintf(markerFormat, mColor, mLabel, mLocation));
var mapsUrl = s.sprintf(mapsUrlFormat, center, zoom, sizex, sizey, markers);
var mapsUrl2 = s.sprintf(mapsUrlFormat2, zoom, sizex, sizey, markers);
var imageElement = $('<img>').attr('src', mapsUrl2);
$(document.body).append(imageElement);
}
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function() {
setInterval(
function() {
getBusData(8180);
},
15000
);
function getBusData(busNumber) {
var busUrlFormat = 'http://webservices.nextbus.com/service/publicXMLFeed?command=vehicleLocations&a=%s&r=%s&t=%d';
var busAgency = 'ttc';
var routeTag = '';
var time = 0;
var mapUrl = s.sprintf(busUrlFormat, busAgency, routeTag, time);
var config = {
url: mapUrl,
dataType: 'xml',
crossDomain: true
};
$.ajax(config).always(
function() {
//console.log('Always');
}
).then(
function(data, textStatus, jqXHR) {
var ourBus = data.querySelector(
'vehicle[id="' +
busNumber +
'"]'
).attributes;
var location = {
lat: parseFloat(ourBus.lat.value),
long: parseFloat(ourBus.lon.value)
};
console.log('Found Location: ', location);
drawMap(
location.lat,
location.long
);
},
function(jqXHR, textStatus, errorThrown) {
console.log('No');
}
);
}
function drawMap(lat, long){
var mapsUrlFormat = 'https://maps.googleapis.com/maps/api/staticmap?center=%s&zoom=%d&size=%dx%d&markers=%s';
var mapsUrlFormat2 = 'https://maps.googleapis.com/maps/api/staticmap?zoom=%d&size=%dx%d&markers=%s';
var center = 'Davisville,Toronto,Ontario';
var zoom = 16;
var sizex = 400;
var sizey = 400;
var mColor = 'blue';
var mLabel = 'Bus';
//var lLat = 43.6991;
//var lLong = -79.393082;
var mLocation = s.sprintf('|%f,%f', lat, long);
var markerFormat = 'color:%s|label:%s%s';
var markers = encodeURI(s.sprintf(markerFormat, mColor, mLabel, mLocation));
var mapsUrl = s.sprintf(mapsUrlFormat, center, zoom, sizex, sizey, markers);
var mapsUrl2 = s.sprintf(mapsUrlFormat2, zoom, sizex, sizey, markers);
var imageElement = $('<img>').attr('src', mapsUrl2);
$(document.body).append(imageElement);
}
});</script></body>
</html>
Raw
jsbin.qigeveqefa.js
$(document).ready(function() {
setInterval(
function() {
getBusData(8180);
},
15000
);
function getBusData(busNumber) {
var busUrlFormat = 'http://webservices.nextbus.com/service/publicXMLFeed?command=vehicleLocations&a=%s&r=%s&t=%d';
var busAgency = 'ttc';
var routeTag = '';
var time = 0;
var mapUrl = s.sprintf(busUrlFormat, busAgency, routeTag, time);
var config = {
url: mapUrl,
dataType: 'xml',
crossDomain: true
};
$.ajax(config).always(
function() {
//console.log('Always');
}
).then(
function(data, textStatus, jqXHR) {
var ourBus = data.querySelector(
'vehicle[id="' +
busNumber +
'"]'
).attributes;
var location = {
lat: parseFloat(ourBus.lat.value),
long: parseFloat(ourBus.lon.value)
};
console.log('Found Location: ', location);
drawMap(
location.lat,
location.long
);
},
function(jqXHR, textStatus, errorThrown) {
console.log('No');
}
);
}
function drawMap(lat, long){
var mapsUrlFormat = 'https://maps.googleapis.com/maps/api/staticmap?center=%s&zoom=%d&size=%dx%d&markers=%s';
var mapsUrlFormat2 = 'https://maps.googleapis.com/maps/api/staticmap?zoom=%d&size=%dx%d&markers=%s';
var center = 'Davisville,Toronto,Ontario';
var zoom = 16;
var sizex = 400;
var sizey = 400;
var mColor = 'blue';
var mLabel = 'Bus';
//var lLat = 43.6991;
//var lLong = -79.393082;
var mLocation = s.sprintf('|%f,%f', lat, long);
var markerFormat = 'color:%s|label:%s%s';
var markers = encodeURI(s.sprintf(markerFormat, mColor, mLabel, mLocation));
var mapsUrl = s.sprintf(mapsUrlFormat, center, zoom, sizex, sizey, markers);
var mapsUrl2 = s.sprintf(mapsUrlFormat2, zoom, sizex, sizey, markers);
var imageElement = $('<img>').attr('src', mapsUrl2);
$(document.body).append(imageElement);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment