Skip to content

Instantly share code, notes, and snippets.

@kaezarrex kaezarrex/index.html
Last active Aug 29, 2015

Embed
What would you like to do?
lies???
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="google_canvas"></div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src="main.js"></script>
</body>
</html>
var first = true,
args,
agency,
callName,
vehiclesUrl;
function parseArgs() {
args = (window.location.hash || '#demo/102').slice(1).split('/');
agency = args[0];
callName = args[1];
vehiclesUrl = 'http://feeds.transloc.com/3/vehicle_statuses.jsonp?agencies=' + agency + '&callback=?';
}
function updateUserPosition(position) {
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
userMarker.setPosition(geolocate);
userCircle.setCenter(geolocate);
userCircle.setRadius(position.coords.accuracy);
if (first) {
map.setCenter(geolocate);
first = false;
}
}
function loopVehiclePosition() {
$.getJSON(vehiclesUrl, function(data) {
var i,
vehicle;
for (i = 0; i < data.vehicles.length; i++) {
vehicle = data.vehicles[i];
if (vehicle.call_name == callName) {
vehicleMarker.setPosition(new google.maps.LatLng(vehicle.position[0], vehicle.position[1]));
}
}
setTimeout(loopVehiclePosition, 1000);
}).fail(function () {
console.error('done broke');
setTimeout(loopVehiclePosition, 1000);
});
}
window.addEventListener('hashchange', parseArgs);
parseArgs();
if(!!navigator.geolocation) {
var map,
userCircle,
userMarker,
options,
vehicleMarker;
var mapOptions = {
zoom: 17,
mapType: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('google_canvas'), mapOptions);
vehicleMarker = new google.maps.Marker({map: map});
userMarker = new google.maps.Marker({
map: map,
icon: {
url: 'https://feeds.transloc.com/markers/stop.png?c=5599ff&s=8',
anchor: new google.maps.Point(8, 8)
}
});
userCircle = new google.maps.Circle({
map: map,
radius: 10,
fillColor: '5599ff',
fillOpacity: 0.5,
strokeOpacity: 0
});
options = {
enableHighAccuracy: true,
maximumAge: 1
};
navigator.geolocation.watchPosition(updateUserPosition, console.error, options);
loopVehiclePosition();
} else {
document.getElementById('google_canvas').innerHTML = 'No Geolocation Support.';
}
html,
body,
#google_canvas {
width: 100%;
height:100%;
margin:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.