Introduction
Today, I had to build a sample demo using Microsoft Virtual Earth to simulate vehicle tracking and geo fencing.
The term geo fencing was a little bit new to me, you can have a look here for more details.
Using the code
My sample here consists of two parts, one is the live tracking of moving objects based on geospatial data [Longitude, Latitude], and the second part is about geo fencing a moving object to a limited geographic area.
During my research on how to calculate geospatial data for a specific point on the map, I came across the following sample which helped me a lot to get the test data for my sample.
Now, let’s have a look at our sample and how it works:
First, we need to build our default.aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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"> <head runat="server"> <title>Vehicle Tracking System</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="javascript" type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>1:
2: <script language="javascript" type="text/javascript" src="scripts/Tracking.js"></script>
</head>
<body onload="GetMap();">
<table width="100%" border="0" cellpadding="0" cellspacing="10">
<tr>
<td id="tabsContainer">
<a onclick='StartTracking();'>Vechile Tracking Demo</a>
<a onclick='StartGeoFencing();'>Geo Fencing Demo</a>
<br />
<div id="traceArea"></div>
</td>
</tr>
<tr>
<td>
<div id="myMap"></div>
</td>
</tr>
</table>
</body>
</html>
Then, we need to build the Tracking.js which contains all the JavaScript code for our demo:
// The Map Object var map = null; function GetMap() { map = new VEMap('myMap'); var centerat = new VELatLong(29.511604, 47.6061625); map.LoadMap(centerat,12,VEMapStyle.Road ,false); map.SetZoomLevel(9); } function StartTracking() { // Vechile one // Create sperate layer for that vechile var layer = new VEShapeLayer(); map.AddShapeLayer(layer); // Add the intial position AddPushpin(29.791604, 47.7061625,'Vehicle 999001',"Time: " + new Date().toTimeString(),layer,'auto1.gif'); // Add the addtional positions window.setTimeout(function() { AddPushpin(29.807604, 47.7141625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},1000); window.setTimeout(function() { AddPushpin(29.803604, 47.7201625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},2000); window.setTimeout(function() { AddPushpin(29.801604, 47.7281625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},3000); window.setTimeout(function() { AddPushpin(29.830604, 47.7331625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},4000); window.setTimeout(function() { AddPushpin(29.870604, 47.7451625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},5000); window.setTimeout(function() { AddPushpin(29.890604, 47.7601625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},6000); // Vechile two var layer2 = new VEShapeLayer(); map.AddShapeLayer(layer2); AddPushpin(29.711604, 47.8061625,'Vehicle 999002',"Time: " + new Date().toTimeString(),layer2,'orange_car_icon.gif'); window.setTimeout(function() { AddPushpin(29.707604, 47.8141625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},1000); window.setTimeout(function() { AddPushpin(29.703604, 47.8201625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},2000); window.setTimeout(function() { AddPushpin(29.701604, 47.8281625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},3000); window.setTimeout(function() { AddPushpin(29.695604, 47.8331625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},4000); window.setTimeout(function() { AddPushpin(29.685604, 47.8451625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},5000); window.setTimeout(function() { AddPushpin(29.680604, 47.8601625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},6000); // Vechile three var layer3 = new VEShapeLayer(); map.AddShapeLayer(layer3); AddPushpin(29.660604, 47.6601625,'Vehicle 999003',"Time: " + new Date().toTimeString(),layer3,'shippingVechile.png'); window.setTimeout(function() { AddPushpin(29.670604, 47.6451625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},1000); window.setTimeout(function() { AddPushpin(29.685604, 47.6331625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},2000); window.setTimeout(function() { AddPushpin(29.701604, 47.6281625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},3000); window.setTimeout(function() { AddPushpin(29.703604, 47.6201625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},4000); window.setTimeout(function() { AddPushpin(29.707604, 47.6141625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},5000); window.setTimeout(function() { AddPushpin(29.711604, 47.6061625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},6000); } function StartGeoFencing() { // Load the map on the required location var centerat = new VELatLong(29.34524, 47.66744); map.LoadMap(centerat,12,VEMapStyle.Road ,false); map.SetZoomLevel(11); // Create the layer for the vechile var layer = new VEShapeLayer(); map.AddShapeLayer(layer); // Add the points AddPushpin(29.429, 47.48891,'Vehicle 999231',"Time: " + new Date().toTimeString(),layer,'car-icon.gif'); window.setTimeout(function() { AddPushpin(29.42541, 47.53011,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},1000); window.setTimeout(function() { AddPushpin(29.42182, 47.57543,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},2000); window.setTimeout(function() { AddPushpin(29.41943, 47.61526,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},3000); window.setTimeout(function() { AddPushpin(29.37516, 47.63036,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},4000); window.setTimeout(function() { AddPushpin(29.35841, 47.65233,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},5000); window.setTimeout(function() { AddPushpin(29.34524, 47.66744,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},6000); window.setTimeout("alert('The vehicle 999231 crossed to Al Jahra boundries');",6100); } function AddPushpin(pLat,pLong,title,desc,layer,imgName) { // Clear the layer shapes ClearLayer(layer); // Create the shape object var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(pLat, pLong)); shape.SetCustomIcon("<img src='images/" + imgName +"'/>"); shape.SetTitle(title); shape.SetDescription(desc); layer.AddShape(shape); } function ClearLayer(layer) { // Delete all shapes in a layer layer.DeleteAllShapes(); }
As you see all the test data I got it from the Location Chooser sample.
Now. let’s see some screenshots from our demo:
The initial screen
The vechile tracking demo:
As you see the the vechiles images keep on moving according to the coordinates I gave to it from the JavaScript, sure you can retrieve these data from a database or a web service.
The next screen shot shows a moving vechile that suppose to not cross a specific boundary.
When the car cross that boundary which is [Al Jahra] boundary, an alert appears to the user to tell about that error.
We can use the sample basics to provide a near real time tracking for any moving objects.
The objects itself must use some technique like GPS to tell the application about its current location.
I’m working now on some more advanced geo fencing techniques using Microsoft Virtual Earth and ArcGIS, I’ll post about it soon.
You can download the sample code here.
I hope that helped
Ahmed