Author: 
Gfw
What you will need before you begin:
1) Visual Studio 2005
Disclaimer: Let me start of by saying that I am not an expert at C#, JavaScript, Virtual Earth or Web Services. I merely needed to have a few maps on one of my websites. I started using the Yahoo Traffic API a few years ago and because of its simplicity I have continued to incorporate it into a few of the web sites that I build. I was using a Virtual Earth control that in its ‘new life’ sells for $500 so I decided to ‘roll my own code’ with the help of a lot of examples already on the web, it only took a few days. This is merely an attempt to make it easier for someone else to get started and add traffic reports to their website. Thanks to both Microsoft for Virtual Earth and Yahoo for their traffic API.
I have tried to document almost every line of the code used in this application using C#/JavaScript comments ‘//’ in order to explain exactly what the line of code the does, or at least what it is supposed to do, so there really isn’t much to explain beyond the code – I’m sure that some may say that it isn’t much an article. However, I prefer putting the explanation directly in the code so that it is available long after this short article will have disappeared. Because the comments are in the code, there will be more spelling errors and my spelling isn’t that great to start with. If it gives you a little help, then I have served my purpose. If you actually use any of the JavaScript, you may want to remove all the comments before publication or merely compress at http://yyyz.net/CSharpCode/JavaScriptMinifier.aspx - it will also remove the comments and you should see about a 40% reduction in code size.
What you will learn if you follow the code:
· How to interact with the REST Yahoo Traffic API using C#
· How to use a Web Service to send data to the requesting JavaScript method
· How to use JavaScript to position the traffic incidents on Virtual Earth
· How to use the AJAX pageLoad and pageUnload events to load and dispose of the map
· How to attach an event to the Virtual Earth Map to freeze the position
· How to change the cursor style from ‘default’ to ‘wait’ to ‘crosshair’ – we use the wait cursor while the points are loading
You can start by merely unzipping the download to a folder named VirtualEarthAndYahoo. Open VS2005, the open an existing Web Site and browse to and open the folder. Let’s look at the site structure.
In the web site’s root folder you will find:
· Default.aspx – that page that generates the map. The script and service references have been added to this page. This should be set as the start page. The only thing done in the code behind is to set the title on the page.
· PointImage.png & SaveStar.png – Two images used for the Pushpins to indicate traffic severity.
· Web.Config – I made no changes to the VS2005 generated Web.Config file.
My suggestion is to review the code in the order presented below.
There are three folders to browse:
App_Code contains the following:
· CYahooTrafficREST.cs - A Class that does the interaction with the Yahoo site to obtain traffic information. In this file there is a string variable (string AppId) – you will need to place your Yahoo ID/Key in that string or the sample website may not run. If you walk through the code, you will see how we interact to the Yahoo Traffic API to get traffic incidents for downtown Chicago.
· UnixDate.cs - a small helper class used to convert the UNIX date returned by Yahoo to a .Net DateTime type. Found on a web search - thanks to the person that originally wrote the code - it works.
· YahooTraffic.cs - the code part of the (YahooTraffic.asmx) web service called by the JavaScript. This class takes the traffic items returned by Yahoo in CYahooTrafficREST.cs and passes them off to the calling JavaScript code. All records passed to the JavaScript are delimited with the ‘~’ character and all fields within a record are delimited with a ‘|’ character.
JavaScript contains:
· YahooTraffic.js - the JavaScript code that interacts with the web service. Not a lot of code and I’m sure that maybe it could be more efficient, but it will show how to use JavaScript to interact with a simple web service.
WebService contains:
· YahooTraffic.asmx –The asmx file associated with the web service.
If you have added your Yahoo Id/Key (in CYahooTrafficREST.cs), merely run the program and you should see the map and the traffic report for North Clark Street in Chicago.
Please note the traffic API covers only a limited number of US cities. To change the map location to a location that you want to use, open the YahooTraffic.js file. Change the lat/long coordinates to those of your choice …
var Eclat = 41.9027;
var Eclon = -87.6318;
And also change …
// Add a Pushpin for where I live in Chicago
NewPushpin(Eclat,Eclon,'The Elm at Clark Condominiums','1122 N Clark Street<br />Chicago, IL 60610','');
Make sure that you read the Yahoo disclaimers. You are limited to 50,000 hits per day so you may want to consider caching the results returned from Yahoo. There will be less strain on your server and it will also probably make Yahoo happier and reduce your number of daily hits.
Happy coding!
Gfw