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.
Thanks! I’d been wanting to play with VE. I thought I’d need an API key (like Google) and hadn’t gotten around to it. What do you use to get longitude/latitude? I found Microsoft’s TerraServer http://terraserver.microsoft.com/ to be a tad off. I suppose I could massage the coordinates around ’til I stumbled across the right spot.
http://www.bob-taylor.com/5526figueroa.htm
🙂
I would recommend Yahoo’s Geocoding web service. It seems to the best of the big 3 (MSFT, GOOG, and YHOO).
However, I usually use Microsoft Mappoint for bulk geocoding. It says that 5526 Figueroa is at 34.10844 ° N, 118.19526 ° W
Robbie,
Wow, thanks! This is awesome. I’m looking forward to playing with this! 2007 will definitely bring about even more interesting map mash-ups.
Hey Robbie!
What are the chances NWMLS will let public sites into the “Property History” button? Clearly one of the most useful, as it shows any and every time the property was EVER listed in the mls along with the detail of events during each and every listing. One of the most valuable tools that I use from the agent side…would be great for consumers if that could make it to a Public Site.
Robbie-
I love it and was wondering if you could explain the vepoint code a bit more. Is there a way we can add a pin at the long/lat point? or get driving directions from the map? Last question, what aboutthe aerial view vs the hybrid. Is there a code line for that?
Pingback: Mash-up 102 - Virtual Earth Pushpins | Rain City Guide | A Seattle Real Estate Blog...
This is great! Thanks. If you know anyone who’d be interested in helping my company create a mash up using Virtual Earth please have them contact me at info@realasave.com. Take care!
Good one….