<?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 200000 200000"
	 xml:space="preserve" preserveAspectRatio="xMidYMid meet"
	 onload="init()" onzoom="catchZoom()">
<title>www.richardinfo.com - GPS tracking using SVG - Example 4</title>
<desc>GPS tracking using SVG - Example 4</desc>
<metadata>
	author: Richard Bennett mail@richardinfo.com 
	created: May 30 2002
	this file was created using Code-Genie texteditor 
	Copyright Richard Bennett 2002
</metadata>
<image id="background" width="200000px" height="200000px" xlink:href="../images/backgroundmap.png" 
		transform="matrix(0.977361 0.009773 0.004848 0.969687 374295.752393 -282622.677087)" />
<image id="detail" width="200px" height="200px" xlink:href="images/pk.jpg" />
		
<g id="viewer">
	<ellipse cx="450" cy="450" rx="900" ry="900"
	 style="fill:orange;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:orange;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[
var svgns = "http://www.w3.org/2000/svg";

function init(){
	if (!window.svgDocument)svgDocument = evt.target.ownerDocument;
	VehicleViewer=svgDocument.getElementById("viewer")
	VehiclePointer=svgDocument.getElementById("pointer")
	VehicleName=svgDocument.getElementById("trackName")
	mapLoader=svgDocument.getElementById("detail")

	getURL("data.xml",loaded);
}
function catchZoom(){
	clearTimeout(plot) 
	border=true
	plotVehicle()
}
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
var border=false
function plotVehicle(){
	if(border){
		loadMap(vehicle.xfeet[count],vehicle.yfeet[count],vehicle.lon[count],vehicle.lat[count])
		border=false
	}
	vehicle.moveTo(count)
	count++;if(count>vehicle.seconds.length)count=0
	var ms=(vehicle.seconds[count]/10)
	plot=setTimeout("plotVehicle()",ms)
}
function loadMap(lonDist,latDist,LONGITUDE,LATITUDE){
	vehicle.lastxfeet=lonDist
	vehicle.lastyfeet=latDist
	//We set some default values. These should always have the same proportion to each other,
	//so we can devide all three, or multiply all three by the same amount.
	//Mulitplying times 2 loads large map (large area), deviding by two loads small maps (modem users)
	var startSize=120000
	var startZoom=60
	var startRes=350 
	
	//We use the currentScale to get a usable multiplication coeficient.
	c=(svgDocument.rootElement.currentScale/2)+0.8
	
	var res=Math.round(startRes+((startRes/8)*c))
	var zoom=Math.round(startZoom/c)
	//As we have to pass integers in the URL, we check what the rest was, to adjust the display size accordingly:
	var zoomRest=(zoom/(startZoom/c))
	//Load the map passing the coords and size
	mapLoader.setAttribute("xlink:href","http://msrvmaps.mappoint.net/isapi/MSMap.dll?ID=3XNsF.&C="+parseFloat(LATITUDE)+","+parseFloat(LONGITUDE)+"&L=USA0409&CV=1&A="+zoom+"&S="+res+","+res+"&O=-0,0");
	
	//Calculate what size to display the map at + set size:
	var width=((startSize/c)*zoomRest)+res*2
	var height=((startSize/c)*zoomRest)+res*2
	mapLoader.setAttribute("width",width)
	mapLoader.setAttribute("height",height)
	vehicle.mapLoaderSize=width
	//Calculate what location to display the map at + move:
	var xVal=parseInt(lonDist)-(width/2)
	var yVal=parseInt(latDist)-(height/2)
	var cont="translate("+xVal+" "+yVal+")"
	mapLoader.setAttribute("transform", cont)
	//Set the viewers size:
	vehicle.setSize(c)
}
//The Vehicle widget:*********************************************
function Vehicle(id){
	this.id=id
	this.lon=[]
	this.lat=[]
	this.xfeet=[]
	this.yfeet=[]
	this.seconds=[]
	this.compas=[]
	this.lastDate=0
	this.viewerZoom=1
	this.lastxVal=0
	this.lastyVal=0
	this.mapLoaderSize=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()
	loadMap(this.xfeet[0],this.yfeet[0],this.lon[0],this.lat[0])
}
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("+(4.5/this.viewerZoom)+") "+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)
	//Load a new map if the edge is reached:
	var difx=Math.abs(this.lastxfeet-this.xfeet[i])
	var dify=Math.abs(this.lastyfeet-this.yfeet[i])
	var offset=(this.mapLoaderSize/2)-(this.mapLoaderSize*0.1)
	if(difx>offset||dify>offset)loadMap(this.xfeet[i],this.yfeet[i],this.lon[i],this.lat[i])
	//Scroll main window:
	var d=svgDocument.rootElement
	if(this.xfeet[i-1]){
		if(d.currentScale>1){
			var difx=(this.xfeet[i-1]-this.xfeet[i])
			var dify=(this.yfeet[i-1]-this.yfeet[i])
			var cof=(200000/Math.min(window.innerHeight,window.innerWidth))/d.currentScale
			d.currentTranslate.y+=(dify/cof)
			d.currentTranslate.x+=(difx/cof)
		}
	}else{
		d.currentTranslate.y=1
		d.currentTranslate.x=1
		d.currentScale=1
	}
}
Vehicle.prototype.setSize=function(i){
	this.viewerZoom=0.3+(svgDocument.rootElement.currentScale/2)
	var comb = "scale("+(4.5/this.viewerZoom)+")"
	VehicleViewer.setAttribute("transform", comb)
}
//end of Vehicle widget*********************************************

]]></script>
</svg>