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

Advertisements

7 thoughts on “Using Microsoft Virtual Earth for Vehicle Tracking and Geo Fencing Sample

  1. 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..

  2. 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

  3. 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…..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s