Mash-up 102 – Virtual Earth Pushpins

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.

function loadmap()
{
var vemap = new VEMap(’VEMap’);
var vepoint = new VELatLong(40, -100);
vemap.LoadMap(vepoint, 4, ‘r’);
}

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…

var veMiami = new VELatLong(25.9577745, -80.2391839);
var veMiamiPin = new VEPushpin(‘SuperBowl’, veMiami);
vemap.AddPushpin(veMiamiPin);

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…

var veSeattle = new VELatLong(47.5950437, -122.3327744);
var veSeattleDetails = “<img xsrc=’thumbnail.jpg’><br>In a game for the ages, <a xhref=’http://sports.yahoo.com/nfl/recap?gid=20070106026′>Seattle beats Dallas</a> on fumbled snap by Tony Romo for a 19 yd field goal and a game saving tackle by big play Babs.”;
var veSeattlePin = new VEPushpin(‘Seahawks’, veSeattle, ‘http://espn.go.com/i/teamlogos/nfl/sml/trans/sea.gif’, ‘Seattle 21, Dallas 20’, veSeattleDetails);
vemap.AddPushpin(veSeattlePin);

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.

Mash-up 101 – Virtual Earth

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>
<head>
<title>Mash-up 101: Virtual Earth</title>
</head>
<body>
This is my first <b>Virtual Earth</b> mash-up.
</body>
</html>

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.

<html>
<head>
<title>Mash-up 101: Virtual Earth</title>
<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js" ></script>
</head>
<body onload="loadmap()">
<script>
function loadmap()
{
alert("Are you ready for some mash-ups?");
}
</script>
<div id="VEMap" style="position: relative; border: solid 1px black; width: 600; height: 400"></div>
This is my first <b>Virtual Earth</b> mash-up.
</body>
</html>

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…

<html>
<head>
<title>Mash-up 101: Virtual Earth</title>
<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js" ></script>
</head>
<body onload="loadmap()">
<script>
function loadmap()
{
var vemap = new VEMap('VEMap');
var vepoint = new VELatLong(47.62, -122.349);
vemap.LoadMap(vepoint, 17, 'a');
}
</script>
<div id="VEMap" style="position: relative; border: solid 1px black; width: 600; height: 400"></div>
This is my first <b>Virtual Earth</b> mash-up.
</body>
</html>

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.

Required Reading…

Another list of 10:

  1. Worth reiterating: Polly’s comments should be required reading for all agents (including the comments within the post about her comments! 🙂 ).
  2. Claudia Wicks lets us know about this “genealogy” site geared toward homes instead of people… The site includes maps, photos, etc.
  3. Also, are press releases still valuable? A quick search on Claudia shows that a recent press release she put out about being one of the Top Woman Real Estate bloggers dominates the coverage of her name on a google search. Fascinating.
  4. Artemi just emailed me to let me know that he just released a major upgrade to his real estate search site for England. The features that stick out for me are the simplicity, the tags for each property, and the natural language search (like the fact that the site also pre-fills in the search box with relevant tags). Great stuff…
  5. Interesting to read Jim’s perspective on the new website he is building with Ubertor. From what I’ve seen, the website definitely suffices as far as websites go, but if I was searching for an agent, I’d say his blog does a much better job selling himself.
  6. Searchlight had a follow up to their renting is for suckers article that describes some reasons a person should not buy a house. I can’t tell if they read my comment, but they clearly addressed some of the issues I brought up.
  7. Joel gives some insight into the art of being good enough
  8. And then follows it up with news that Prudential is jumping on the Zillow API bandwagon.
  9. My take? Here are the ingredients for housingmaps style publicity: map. geocode. data1. data2.
  10. Jim’s worth noting column reminded me that I really wanted to mention DataPlace at some point. I saw a presentation of this tool at Where2.0 and was very impressed with the massive amount of neighborhood, demographic, socio-economic, etc. data that the Fannie May Foundation has manage to squeeze into their interface (and it is all free!). To give an overview, check out the massive amount of mortgage information available for the Seattle-Bellevue area or better yet, check out the map that I was able to easy build on post on my site of home ownership rates in the area: