Seattle Movie Finder: An AJAX- and REST-Powered Virtual Earth Mashup
by Dare Obasanjo
March 01, 2006
I am a big fan of movies, especially summer blockbusters. Last summer I saw Fantastic Four, War of the Worlds, Batman Begins and Mr. and Mrs. Smith. Every Friday I visit sites like MSN Movies and IMDB to learn what new movies are available in my neighborhood and in what theaters they will be showing. However, I dislike the user interface of every movie website I've ever used, particularly when it comes to determining what movies are showing in my vicinity. Few, if any, of these sites give a good visual representation of the proximity of the theaters to my location. And it's often hard to tell how many different theaters are showing the movie I want to see that weekend.
I've always wanted a user interface that was map-based for browsing movie theater locations, and now thanks to the availability of the Virtual
Earth Standard Map Control SDK I've been able to build one for myself. The Virtual Earth control enables developers to build applications using the same technology that powers Windows
Live Local. It took me a few hours to figure out the Virtual Earth API and within a day I had produced the Seattle Movie Finder web page at http://www.25hoursaday.com/moviefinder. (I think this article describing Dare's mashup is generally interesting and useful, even though the service itself is currently hosted on a dynamic IP and is subject to going down. --Editor) The web page gives me a list of movies currently showing in the Seattle area, what movie theaters they are playing in, and their showtimes.
In this article, I explore how I built the Seattle Movie Finder application using XML, ASP.NET, and the Virtual Earth API.
Overview of Integrating with MSN Virtual Earth Using JavaScript
The first thing I had to learn was how to embed a Virtual Earth map on a web page. This turned out to be quite straightforward. The first step is to include the Virtual Earth map control and associated style sheet into your web page. Once the map control is included in your page, creating an instance of the map control simply requires invoking the Msn.Ve.MapControl constructor. The following example creates a 600 by 400 map centered on Seattle, Washington.
<html>
<head>
<title>My Virtual Earth Sample</title>
<![if !IE]><script src="http://local.live.com/JS/AtlasCompat.js"></script><![endif]>
<link href="http://dev.virtualearth.net/standard/v2/MapControl.css" type="text/css" rel="stylesheet" />
<script src="http://dev.virtualearth.net/standard/v2/MapControl.js"></script>
<script>
var map = null;
function OnPageLoad()
{
var params = new Object();
params.latitude = 47.71;
params.longitude = -122.32;
params.zoomlevel = 10;
params.mapstyle = Msn.VE.MapStyle.Road;
params.showScaleBar = true;
params.showDashboard = true;
params.dashboardSize = Msn.VE.DashboardSize.Normal;
params.dashboardX = 5;
params.dashboardY = 5;
map = new Msn.VE.MapControl(document.getElementById("myMap"), params);
map.Init();
}
</script>
</head>
<body onload="OnPageLoad()">
<div id="myMap" style="WIDTH: 600px; HEIGHT: 400px; OVERFLOW:hidden"> </div>
</body>
</html>
This example should be straightforward to follow. The first few lines include directives to include the Virtual Earth JavaScript control as well as the associated CSS style sheet. There is also a conditional statement which loads some Microsoft
Atlas libraries if the user's browser is not Internet Explorer. The OnPageLoad() method contains the code for creating an instance of a Virtual Earth map, specifying the parameters for the embedded map, and making it visible on the page.
[1] [2] [3] [4] [5] Next