My latest mashup – Denver Traffic Camera Map

My latest mashup “Denver Traffic Camera Map”, is online.

The mashup grew out of a curiosity to take the new ASP.Net Virtual Earth control for a spin. The DenverGov traffic camera web-page is currently a static map and I wanted to see what it would take to use the VE control to display the same data. And it turned out to be pretty easy to create a prototype – approximately 2 hours.

Most of the time spent in creating the prototype was spent in collecting the data: manually clicking through each link on the traffic camera page and saving it to a text file. For this prototype, I wanted to test out the SQL Server database that came with my website hosted on Verio (http://www.revertoself.com/). So, I created a table in the database provided to me. This was done in SQL Server Management Studio 2008 (SMS2008). The data was loaded into the table using insert statements in SMS2008 (check out this post if you have problems opening the Verio SQL Server database in SMS 2008).

Once the data was loaded into SQL Server, I was able to create a data-set in Visual Studio. Visual Studio’s data-set creation wizard had no problems creating the data-set. Once the data-set was created, all I had to was create push-pins for each row in the table and load them into Virtual Earth.

foreach(SamplesTrafficCams.dnvr_traffic_camsRow dr in dt)
{
    LatLongWithAltitude latLong = new LatLongWithAltitude(Convert.ToDouble(dr.l_lat), Convert.ToDouble(dr.l_long));
    Shape shape = new Shape(ShapeType.Pushpin, latLong);
    shape.Description = "<b>" + dr.st_location + "</b>" + "<br/>" + 
        "<a href=\"" + dr.web_page + "\">" + 
        "<img src=\"" + dr.thmb_nail + "\" height=95 width=150/>";
    shape.CustomIcon = "image/cam.png";
    trafficMap.AddShape(shape);
}

dt is a typed DataTable that is retrieved using the table-adapter created using Visual Studio. The code then enumerates over the tables data, creating the pushpins from each field in the table. Once the push-pins are created, you simply add each one to the VE map (trafficMap in the above code).

The ASP.Net Virtual Earth control is very easy to use and allows you to create simple mash-ups very quickly.

One problem I had was in trying to display the latitude and longitude values when one clicks on the map within the client (browser). This is very easy using server-side events, but I wanted to do this in the browser and eliminate the round-trip caused by using a server side event on the ASP.Net control. To do this, I needed access to the VirtualEarth map control in JavaScript. (The reason I needed access to the VE control is that I needed to call PixelToLatLong to get the Lat/Long location of the point at which the user clicked). The control that you get in sender, does not give you access to the PixelToLatLong method. Instead I found that if you used $find method on the VE ASP.Net control, it gives you access to VE control inside it. You can then call any VE method available on the control.

The following snippet shows how I did it:

function OnMapClick(sender, args) 
{
    var map = $find("trafficMap");
    var loc = args.get_MapEvent();
    var ll = map.PixelToLatLong(new VEPixel(loc.mapX, loc.mapY));
    var lbl = document.getElementById("textMapInfo");
    lbl.value = roundNumber(ll.Latitude, 5) + "," + roundNumber(ll.Longitude, 5);
}

Links:

http://www.verio.com/about/newsroom/pr/index.cfm?fuseaction=press&Year=07&id=118067678025721

http://www.revertoself.com/

Virtual Earth SDK