Home ›

At the Forge - Creating Mashups

Issue 147

From Issue #147
July 2006

Jul 01, 2006  By Reuven M. Lerner
 in
It's a crime not to mashup two or more Web services to deliver more than they can deliver separately.

Last month, we started to look at the Google Maps API, which allows us to embed dynamic (and Ajax-enabled) maps into our Web applications. That article demonstrated how easy it is to create such maps, with markers on the screen.

This month, we try something far more ambitious. Specifically, we're going to join the ranks of those creating mashups, combinations of Web services that often (but not always) have a mapping component. A mashup is a combination of two or more Web APIs in a novel way, making information more accessible and informative than it would be on its own.

One of the first mashups I saw was the Chicago crime map. The Chicago Police Department publishes a regular bulletin of crimes that have taken place within the city, and their approximate locations. Using this map, you can determine how safe your block is from crime, as well as look for patterns in other areas of the city. This mashup took information from the Chicago Police Department's public information and displayed it on a Google Maps page.

I was living in Chicago at the time it came out, and (of course) used the listing to find out just how safe my neighborhood was. The information always had been available from the police department, but it was only in the context of a mapping application that I really was able to understand and internalize this data. And indeed, this is one of the important lessons mashups have taught us—that the synthesis of information and an accessible graphic display, can make a great deal of difference to end users.

When mapping software was first made available, there was no official way to use the maps for unofficial purposes. A number of enterprising developers looked at the JavaScript used to create the maps and reverse-engineered APIs for their own use. Google, as well as Yahoo and MapQuest, have since released APIs that make it possible for us to create mapping applications using their systems. This has made mashups with maps even more popular than ever, with a growing number of Web sites and blogs examining them.

This month, I demonstrate a simple mashup of Google Maps with Amazon's used-book service. The application will be relatively simple. A user will enter an ISBN, and a Google map of the United States will soon be displayed. Markers will be placed on the map indicating several of the locations where used copies of the book are available. Thus, if copies of a book are available in New York City, Chicago and San Francisco, we will see three markers on the map, one in each city. In this way, we'll see how two different Web APIs, from two different companies, can be brought together to create an interesting and useful display for end users.

This month's code examples assume you already have signed up for an Amazon Web services ID, as well as for a Google Maps ID. Information on where to acquire these IDs is available in the on-line Resources for this article.

A Simple Map

Our first challenge is to create a map that contains one graphic marker for each location in a list. We already saw how to do this last month using PHP. This month, we begin by converting the program to ERB, an ASP- or PHP-style template that uses Ruby instead of another language. You can see the file, mashup.rhtml, in Listing 1.

Listing 1. mashup.rhtml, the First (Simple) Version of Our Map

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script
src="http://maps.google.com/maps?file=api&v=1&key=
↪ABQIAAAAQQK9JhAXQ9eq-G55q\gu
↪1ExTnGAXa-Bs2i826H4DeSQaC3Vqy-xSjDFaTYAO0N5YPQWIEeUbqJMhhbA"
    type="text/javascript"></script>
  </head>
  <body>
    <h2>Here is your map</h2>
    <div id="map" style="width: 400px; height: 400px"></div>
    <script type="text/javascript">

    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(-87.740070, 42.037030), 13);

    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());

<% array = [-87.740070, -87.730000] %>
<% array.each_with_index do |item, index| %>

    var myMarker<%= index %> = new GMarker(new GPoint(<%= item %>,
42.037030));
    map.addOverlay(myMarker<%= index %>);

<% end %>
    </script>
<h2>Here are the locations</h2>
<ul>
<% array.each do |item| %>
    <li><%= item %></li>
<% end %>
</ul>

  </body>
</html>

One way to parse ERB files correctly on a server is by running Ruby on Rails, which uses ERB as a default templating mechanism. But for a small mashup like this, using Rails would be overkill. So, I decided to use a simple ERB (Embedded Ruby, for HTML-Ruby templates) by itself.

To make this work, I installed eruby in the cgi-bin directory of my server (see Resources). I then told Apache that any file with an .rhtml extension should be parsed with eruby: 

AddType application/x-httpd-eruby .rhtml
Action application/x-httpd-eruby /cgi-bin/eruby

After restarting the server, I was able to create HTML-Ruby templates without any problems, so long as they had an .rhtml extension. The file in Listing 1, mashup.rhtml, was a simple attempt at using my HTML-Ruby template to create a map. As with all Google Maps applications, our final output will be a page of HTML, including some JavaScript that invokes functions downloaded from the Google Maps server. Our Ruby code will be outputting JavaScript code, which will then execute in the user's browser.

To demonstrate that we can indeed do this for two fixed points, the ERB file defines an array of two latitudes, both within a short distance of my home in Skokie, Illinois: 


<% array = [-87.740070, -87.730000] %>

Next, we iterate over the elements of this array, using the each_with_index method to get both the array element and the index within the array that we are currently on: 


<% array.each_with_index do |item, index| %>

Now that we have both the latitude and a unique number for it, we can output some JavaScript: 


var myMarker<%= index %> = new GMarker(new GPoint(<%= item%>, 42.037030));
map.addOverlay(myMarker<%= index %>);

What is happening in the above code isn't hard to understand, but it might be a bit complicated when you first read it. Basically, each iteration of our loop declares a new JavaScript variable. The first iteration creates myMarker0, and the second creates myMarker1. This is possible because we have the index of the current Ruby array element, and because we have made sure not to insert any spaces between myMarker and the Ruby output <%= index %>.

The myMarkerX variable is then defined to be a new instance of GMarker—that is, a marker on the Google map—located at a point defined by the latitude (the item variable) and longitude (a fixed value, 42.037030).

Finally, so that the user can see exactly where all of the points are, we print some text at the bottom of the page. The result is a map with two markers on it, and the location of each marker is listed in text.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

crime mashup

GFL's picture
Submitted by GFL (not verified) on Tue, 06/06/2006 - 22:07.

Another crime mashup for you:
http://www.newhavencrimelog.org/

Error

cbier's picture
Submitted by cbier on Wed, 05/31/2006 - 21:58.

I get this error when I try to run the code from listing 3:

undefined method `text' for nil:NilClass
(
NoMethodError
)

The error is from this line:

next if geocoder_xml.root.nil?

Thanks for writing great articles. At the Forge is one of my favorite articles.

Error

Reuven Lerner's picture
Submitted by Reuven Lerner on Wed, 06/28/2006 - 01:08.

Hi, cbier. Sorry that it took a while to respond, but I only realized recently that people were asking questions of me on this forum!

The error message tells us that we're trying to invoke a method -- the "text" method -- on nil. Now, we obviously don't have a literal nil in the code, so that means our variable must have a nil value, and we're trying to invoke an unknown method on it.

My guess, and I can't prove it, is that Amazon gave you back a city for which there wasn't any geocoder information. (Maybe the city name was spelled incorrectly?) Thus you got nil back. But then you tried to invoke a method on it. Where? I'm not sure, but I'm guessing that we needed to do a bit more testing -- checking that geocoder_response wasn't nil, and that geocoder_xml wasn't nil, either.

Reuven
Senior Columnist, Linux Journal

Senior Columnist, Linux Journal

Webcast
More Resources
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers

Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions