in General .NET

Using Microsoft Virtual Earth for Vehicle Tracking and Geo Fencing Sample

Posted on by Ahmed Shokr

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

Tags: , , ,

+12 years of experience total IT industry experience including collage time and freelance jobs.
+7 years of professional work experience in designing and implementing Microsoft Business Productivity Solutions.
+5 years of professional work experience in SharePoint implementations from MCMS 2002 to the latest version.
+4 years of professional work experience as presales and technology advisory.
Strong record in consultation and presales with associated Gulf business understanding and market analysis.
Worked closely with Microsoft Kuwait & Qatar Offices SSPs, PTAs, PAMs and SAMs.
Extensive experience in BizTalk Server 2009, SSAS, PerformancePoint Services and Excel Services.
Active member in the Virtual Technology Specialist and Customer Immersion Experience programs.
Strong record in team leading and projects technical management.

7 comments

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

    Reply

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

    Reply
  4. Pingback: 2010 in review « Junior geek in techy world

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

    Reply

Leave a Reply to max parsons Cancel reply

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

Gravatar
WordPress.com Logo

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

Google photo

You are commenting using your Google 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 )

Cancel

Connecting to %s