After last month’s Mash-up 101 – Virtual Earth and RedFin’s recent switch to Virtual Earth, it’s time for another mash-up class. Last time, we created a simple aerial Virtual Earth map (centered above the Seattle Space Needle).

This time, we will create a simple road map (that is bigger and centered above the continental US) which has pushpins for the Seahawks road to SuperBowl XLI. So first of all, we need to change our map view, like so.

You’ll notice that the vepoint object has a different latitude & longitude this time. I just picked some random point above the middle of the US that looked good. The point in question is a few miles north of Norton, Kansas (which is located halfway between the middle of the US and the middle of nowhere). I also called vemap.LoadMap method with different parameters this time. The first parameter is the center point of the map (but you already figured that out). The second parameter is the zoom level. Valid values are from 1-19. A 1 will zoom out to the entire earth, while a value of 19 will zoom in to house/street level. Since we just want the continental US, we’ll use a zoom level of 4. The last parameter is the map type. ‘a’ is an aerial map, ‘r’ is a road map, and ‘h’ is a hybrid map. You can also use ‘o’ for oblique (aka bird’s eye view), if you are zoomed in near street level.

Now, we need to add a simple pushpin for the location of the SuperBowl XLI. To create a simple pushpin, we need to add the following code to our loadmap function like so…

In the above code fragment, the veMiami object contains the location of Dolphins Stadium in Miami (nothing new there). The second & third lines are the interesting ones. In the second line, the VEPushpin object takes a least 2 parameters. The first parameter is a unique ID and the second parameter is the location of the pushpin (Dolphins Stadium in this case). Now that we’ve created our pushpin, we need to add it to our map via the AddPushpin call.

You should now see a red thumbtack on a map (unless you are using Firefox 2). Unfortunately, there’s a minor bug in current version of the VE map control that causes it to use the wrong drawing code on Firefox 2. Fortunately, there’s an easy fix described on Via Virtual Earth. (Which is a site I highly recommend you visit if your serious about Virtual Earth development). Anyway, assuming you’ve gotten your thumb tack to show up, it’s time for a complex pushpin. This time we’re going to put a Seahawk logo at Qwest Field with an HTML popup balloon. Time for more code…

In the first line, we create a VELatLong object for the location of Qwest Field. The second line, contains the HTML that we want to appear in our pushpin’s pop-up balloon (the above picture of Tony Romo and a brief description of the play of the game). The third line creates the pushpin, except this time we have more parameters. The third parameter is the url to the icon of the pushpin (aka the seahawks logo). The fourth parameter is the title of our pop-up balloon, and the last parameter is the HTML for the details section of our balloon. Finally, we add the pin to the map. Assuming it all works you should see something like this…

[photopress:mashup2.gif,full,centered]

Otherwise, goto http://www.annaluther.com/mashup2.html to see what a working version of this example looks like (Firefox work-arounds and all). See ya next time.