<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<a href="http://gpsgate.com/" id="gpsgate" alt="gpsgate tracking">
<img src="http://apps.gpsgate.com/images/ggc_small.gif" /> GPS Tracking</a>
<title>GpsGate Web Services - Tracks Example</title>
<script src="http://maps.google.com/maps?file=api&v=2.&key=ABQIAAAAQoA7cjYV3Erx1od1HNJfWRSkX3zeHlDk9eUXlfEjL-txMrh-IBRqvL6La7xJ_e0FliAyIO3y1KHLUg" type="text/javascript"></script>
<script type="text/javascript" src="http://apps.gpsgate.com/Services/GpsTracking.ashx?xssproxy&appId=1&namespace=MyService"></script>
<script type="text/javascript">
// The Google map object
var map = null;
// Google polyLine (track)
var pLine = null;
// Select box with a gateUsers tracks
var selectTrack = null;
// Global variables to hold data that we receive from the server
var lastUpdated = new Date();
var arrTracks = [];
var userDictionary = [];
var markerDirectory = [];
// Get only users online last 60min
var lastOnlineThreadsHoldMinutes = 60;
// Check for position updates each 10sek
var updateIntervalMS = 10000;
// Name of the GpsGate.Com group to receive data from
var groupName = 'McKinney';
// Start it up!
function load()
{
// Get the select box for tracks
selectTrack = document.getElementById('selTracks');
// init the last update time stamp
lastUpdated.setMinutes(lastUpdated.getMinutes() - lastOnlineThreadsHoldMinutes);
// Init google map
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 1);
// Let's get the users from a group and place them on a google map!
getUpdatedUsers();
}
function getUpdatedUsers()
{
// Get users who has been online last 60min in group 'gpsgate.com' from the server
GpsGate.Server.MyService.getUpdatedUsersInGroup(groupName, lastUpdated, getUpdatedUsersInGroup_callback);
// Callback function
function getUpdatedUsersInGroup_callback(result)
{
// Set last update to the time when the query was executed on the server
// this will make next call to only get users with new positions since this call
lastUpdated = result.queryTimeStamp
lastUpdated.setMinutes(lastUpdated.getMinutes() -5);
// Iterate through the result of users
for(var i = 0; i < result.users.length; i++)
{
var user = result.users[i];
// Add user to dictionary
userDictionary[user.username] = user;
}
// if we got any new users, repaint the map
if(result.users.length > 0)
{
// Repaint the map with new positions
repaintMap();
}
// make a new call to the server in 10sek
setTimeout(getUpdatedUsers, updateIntervalMS);
}
}
function getTracks(user)
{
// Get tracks for the user from the server
GpsGate.Server.MyService.getTracksByUser(groupName, user.username, getTracksByUser_callback);
function getTracksByUser_callback(result)
{
if(result.tracks.length > 0)
{
// Set the returned tracks to our array of tracks
arrTracks = result.tracks;
// Clear tracks in the select box
while (selectTrack.options.length > 0)
selectTrack.options[0] = null;
for(var i = 0; i < arrTracks.length; i++)
{
// Add each track to the select box
var test = arrTracks[i].bounds.minTime.toLocaleString() + ' - ' + arrTracks[i].bounds.maxTime.toLocaleString();
var value = arrTracks[i].id;
var item = new Option(test, value);
try
{
selectTrack.add(item, null);
}
catch(ex)
{
try
{
selectTrack.add(item);
}
catch(ex2)
{
selectTrack.add(item, i);
}
}
}
}
}
}
function getTrackData(track)
{
// Get all the points in a track from the server.
GpsGate.Server.MyService.getTrackData(groupName, track.id, track.bounds.minTime, track.bounds.maxTime, getTrackData_callback);
function getTrackData_callback(result)
{
// Clear old track
if(pLine != null)
map.removeOverlay(pLine);
var arrTrackPoints = result.trackPoints;
var arrGlatLng = [];
// Create Google GLatLng's from the returned track data
for (var i = 0; i < arrTrackPoints.length; i++)
{
arrGlatLng.push(new GLatLng(arrTrackPoints[i].lat, arrTrackPoints[i].lng));
}
// Create a Google polyline
pLine = new GPolyline(arrGlatLng, '#30FF00', 5, 0.8);
map.addOverlay(pLine);
// Zoom to track
var gBounds = pLine.getBounds();
var zoom = map.getBoundsZoomLevel(gBounds);
map.setCenter(gBounds.getCenter(), zoom);
}
}
function repaintMap()
{
for(var username in userDictionary)
{
// Get the user from dictionary
var user = userDictionary[username];
// Get the latest position from the user
var lat = user.trackPoint.position.latitude;
var lng = user.trackPoint.position.longitude;
// Create a marker
var point = new GLatLng(lat, lng);
var marker = markerDirectory[username];
if(marker == null)
{
marker = new GMarker(point);
// Add InfoWindow when click on marker
GEvent.addListener(marker, "click",
GEvent.callbackArgs(marker, function(user)
{
getTracks(user);
displayUserInfo(user);
},
user
));
markerDirectory[username] = marker;
map.addOverlay(marker);
}
else
{
marker.setPoint(point);
}
}
}
function displayUserInfo(user)
{
document.getElementById('usrName').innerHTML = user.username;
document.getElementById('lastUpd').innerHTML = user.trackPoint.utc.toLocaleString();
}
function btShowTrack_click()
{
// Get trackPoints from thew server
getTrackData(arrTracks[selectTrack.selectedIndex]);
}
</script>
<style type="text/css">
<!--
.text
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
.blue-link
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #466f93;
text-decoration:none;
}
-->
</style>
</head>
<body onload="load()" >
<div style="border-bottom:solid 1px #466f93; margin-bottom:10px; width:500px" class="text">
<p>
This example displays the users from the public group "GpsGate.com" that have been online the last hour. You can click on any user that has agreed to share tracks in the GpsGate.com group to see the track history.
<br/><br/>
Note: If you want to share your tracks you need to login on GpsGate.com and make your tracks visible in the menu "Preferences/Track Settings".
</p>
</div>
<table class="text">
<tr>
<td>
<div id="map" style="width:500px; height:300px"></div>
</td>
<td style="vertical-align:top">
<table>
<tr>
<td>Tracks:</td>
</tr>
<tr>
<td>
<select id="selTracks">
<option>Click on user to load tracks</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" value="Show track" onclick="btShowTrack_click()" />
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td colspan="2">
<strong>User info</strong>
</td>
</tr>
<tr>
<td>
Username:
</td>
<td>
<span id="usrName"></span>
</td>
</tr>
<tr>
<td>
Last updated:
</td>
<td>
<span id="lastUpd"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<a href="http://gpsgate.com/" id="gpsgate" alt="gpsgate tracking" class="blue-link" target="_blank"><img src="http://apps.gpsgate.com/images/ggc_small.gif" hspace="0" vspace="0" align="texttop" class="blue-link" style="border:none;" /><span class="blue-link"> GPS Tracking</span></a>
</body>
</html>