Using Microsoft Virtual Earth for Vehicle Tracking and Geo Fencing Sample

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

image 

The vechile tracking demo:

image

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.

 image

When the car cross that boundary which is [Al Jahra] boundary, an alert appears to the user to tell about that error. 

image

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