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
very interesting post ahmad , keep the good work 🙂
Thanks Yassmeen
Congrats for the promotion 🙂
Keep it going
Hi Ahmed..
awesome coding.. could you pls let me know how can I get lat long value from database/webservice in realtime vehicle tracking..
Please guide me if possible..
Hi Prats,
Thank you.
This can be done using a web service or http handler that returns JSON.
You can check my samples on my post http://tech.ahmedshokr.com/2009/04/23/aspnet-ajax-40-deep-dive-live-meeting-presentation-and-samples/
It’s based on ASP.NET AJAX 4.0 but the only deference is with the client templates.
If you need a working sample on ASP.NET AJAX 1.0 JSON, please let me know.
Hi I am interested in your geofence code
I am using a virtual earth control for visual studio
and i want the user to create boundaries or zones so if the vehicle travels outside the zones or into the zones it will trigger which zone the driver is in. It will be used for a taxi application
regards
Max
nice brother Ahmad,
I have tried your code but unfortunately its not working properly……
Its only displaying the map not more than that….
if I want to display the same as you said then what should i do for it…
I need a similiar application like I wanna track the vehicles and the user defines the Area on map… For Example Boss want to track their employees where they are right now……
Please Can you help me for it…..