<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
	"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" 
	 xmlns:xlink="http://www.w3.org/1999/xlink"
	 xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 a3:scriptImplementation="Adobe"
	 viewBox="380443 -277501 190000 190000"
	 xml:space="preserve" preserveAspectRatio="xMidYMid meet"
	 onload="init(evt)">
<title>gritechnologies.com - GPS tracking using SVG - Example 2</title>
<desc>GPS tracking using SVG - Example 2</desc>
<metadata>
	author: Richard Bennett mail@richardinfo.com 
	created: May 30 2002
	this file was created using Code-Genie texteditor 
	Copyright Richard Bennett 2002/2003
</metadata>
<image id="background" width="200000px" height="200000px" xlink:href="../images/backgroundmap.png" 
		style="image-rendering:optimizeSpeed" transform="matrix(0.977361 0.009773 0.004848 0.969687 374295.752393 -282622.677087)" />
<g id="viewer">
	<ellipse cx="450" cy="450" rx="900" ry="900"
	 style="fill:rgb(234,168,26);stroke:rgb(0,0,0);stroke-width:20;fill-opacity:0.6"/>
	<g id="pointer">
		<rect x="0" y="0" width="900" height="900"
			 style="fill:none;stroke:none"/>
		<path style="stroke-linejoin:bevel;fill:rgb(234,168,26);stroke:rgb(0,0,0);stroke-width:20;fill-opacity:0.6"
			d="M950 0 L950 950 L0 950 C650 950 950 450 950 0"/>
	</g>
	<text id="trackName" x="-320px" y="700px" style="fill:rgb(0,0,0);font-size:700;font-family: Arial;">1234</text>
</g>	

<script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
function init(evt){
	if (!window.svgDocument)svgDocument = evt.target.ownerDocument;
	VehicleViewer=svgDocument.getElementById("viewer")
	VehiclePointer=svgDocument.getElementById("pointer")
	VehicleName=svgDocument.getElementById("trackName")

	getURL("data.xml",loaded);
}
function loaded(obj){
	if(obj.success){
    	var frag = parseXML(obj.content, svgDocument) 
    	//make an instance of our Vehicle widget, passing the ID as argument.
    	vehicle=new Vehicle(frag.firstChild.getAttribute("id"))
    	vehicle.parseData(frag.firstChild.firstChild.getData())
    }
}
var count=0
function plotVehicle(){
	vehicle.moveTo(count)
	count++;if(count>vehicle.seconds.length)count=0
	setTimeout("plotVehicle()",(vehicle.seconds[count]/20))
}

//The Vehicle widget:*********************************************
function Vehicle(id){
	this.id=id
	this.lon=[]
	this.lat=[]
	this.xfeet=[]
	this.yfeet=[]
	this.seconds=[]
	this.compas=[]
	this.lastDate=0
	//Set the vehicle name:
	VehicleName.firstChild.data=this.id
}
Vehicle.prototype.parseData=function(string){
	var t=string.split("|")
	for(i in t){
		var s=t[i].split(",")
		//fill the arrays with data:
		this.lat[i]=s[1]
		this.lon[i]=s[2]
		this.compas[i]=s[3]
		//Do the projection:
		var lat1=44.500622 //basepoint
    	var lon1=-95.299650 //basepoint
    	var lat2=this.lat[i]
    	var lon2=this.lon[i]
    	var latDist=Math.abs(lat1-lat2)*364618.5
    	var lonDist=Math.abs(lon1-lon2)*364618.5
    	var avgLat=((lat1*1+lat2*1)/2)*0.017453292519
    	lonDist=lonDist*Math.cos(avgLat)
		//and add the new values:
		this.xfeet[i]=lonDist
		this.yfeet[i]="-"+latDist
		//get the elapsed time from the timestamp:
		if(this.lastDate==0){
			this.seconds[i]=55
			this.lastDate=new Date(parseInt(s[0]+"000")).getTime()
		}else{
			var diff=new Date(parseInt(s[0]+"000")).getTime()
			this.seconds[i]=diff-this.lastDate
			this.lastDate=diff
		}
	}
	plotVehicle()
}
Vehicle.prototype.moveTo=function(i){
	var trans  = "translate(" + this.xfeet[i] + "," + this.yfeet[i] + ")";
	var vs=450 //is the viewerSize
	var offst = "translate(-"+vs+",-"+vs+")";
	var comb = trans+" scale(3) "+offst
	VehicleViewer.setAttribute("transform", comb)
	//turn the pointer with the direction.
	var rotate="translate(450,450) rotate("+(this.compas[i]-135)+") "
	VehiclePointer.setAttribute("transform", rotate)
}
//end of Vehicle widget*********************************************

]]></script>
</svg>