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.

After reading Dustin’s Blog Posts on a Map?, RedFin’s big coding contest, and the lack of “more interesting things” to blog about (Sorry, I can only whine about the MLS before I start repeating myself), I’ve decided to show folks how to create a simple Real Estate mash-up. I want to upgrade Zearch to the latest Virtual Earth technology (I’m still using version 2, but the current version is version 4) during the Christmas break, so I figured I might as well share the knowledge I’ll be gaining from that experience.

Mash-up 101: Virtual Earth

Prequisites: Basic Computer Literacy, HTML 101

Hello class, welcome to Mash-up 101. In today’s session we will learn how create web page that contains a Virtual Earth map control. It’s easier than you might think!

First you need to fire up your favorite text editor (Professionally, I usually use SlickEdit 11 or Visual Studio 2005, but I’ll use the world famous Notepad text editor for today’s class). Then and create an empty web page and save it to your desktop.

HTML (which stands for hypertext markup language). HTML is the language used for creating web pages (it what you see, when you click View Source in your favorite web browser). All those funny <html>, <head>,<title>, <body>, and <b> things you typed in are HTML tags. When a web browser loads a web page, it reads the tags to determine how a web page should appear and behave. If the following is over your head, you should to take HTML 101 before you read any further.

OK, now that we have a simple page, we need to create our map control. First we need add a <div> tag that will be the container for our map when we are finished and we need to add a <script> tag which will download the map control’s code onto the page. Next we need to add an event handler to the <body> tag so the browser will call our code and create the <script> block that contains it.

Now, you have a boring page with an empty rectangle that pops up an alert! Big deal you say? Well, hang on sports fans, here comes the cool part. Pay attention now.

We now need to change our loapmap function so it will create a map of our choosing. The following Javascript code will create an aerial map around the Space Needle.

var vemap = new VEMap(‘VEMap’);
var vepoint = new VELatLong(47.62, -122.349);
vemap.LoadMap(vepoint, 17, ‘a’);

The first line of code creates a Virtual Earth map control. The second line of code defines a latitude & longitude (in this case, a couple yards south of the Space Needle). The last line of code tells the map control to create a map view that is an aerial map, a 100 yards or so above the Space Needle. Put it all together, and you’re code should look something like this…

Word of warning, WordPress is a lousy HTML code editor. It changes and breaks things after you save them. (Or at least Dustin’s deployment of it on RCG does). Anyway, if you have trouble getting things to work make sure you replace all the forward, backward quotation marks with the standard quotation marks or apostrophies. Otherwise, goto http://www.annaluther.com/mashup.html to see what a working version of this example looks like.

Assuming there’s a demand for another class, future classes will cover the joys of pushpins, how to create a Google Maps mash-up or other more advanced topics.