RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Against the Browser's Will: Make Mashups Talk Across Domains

With all the great Web service APIs out there today, making mashups to extend public Web-based apps is a new passion for many developers. But cross-domain restrictions, built into all major browsers, are an aggravating foe. Learn to use a PHP proxy or JSON to eliminate your mashup frustrations.

aps are not only very useful, but they are also cool! In recent months, we have seen a lot of innovation in the area of online maps. Today we are far beyond the time when Photoshop was the most efficient way to overlay data onto a map within your homepage. There are a couple of different new solutions to choose from if you want to embed interactive maps. The "oldest" developer product is Google Maps. Microsoft offers Virtual Earth. And my employer, Yahoo!, offers Yahoo! Maps! This is all really good stuff!

These solutions and tools enable third-party developers to create applications that overlay all sorts of location-based data onto commercial-quality map implementations. I want to highlight two great examples: Housingmaps.com was one of the first popular applications that uses Google Maps to create a so-called mashup. In this example, the user gets Craigslist's housing posts displayed onto a map. The Local Event Browser is another example that shows what can be done by combining various data sources.

This article will discuss the basics of creating a mashup. The three ingredients you need to build your applications are:

  • A mapping solution that provides an API for use by third parties
  • Access to the data source
  • A way to get around the browser's cross-domain restriction

There are essentially two approaches to get data on a map. The most common way is to manipulate the data dynamically; all mapping solutions allow the user to manipulate the overlays dynamically. However, Yahoo's Maps API supports an additional method: you can create a GeoRSS file and refer to it when the map loads. Passing in a GeoRSS file is the easier of the two solutions—so long as you don't have to deal with cross-domain restrictions.

Dealing with Cross-Domain Restrictions
Cross-domain restrictions are the primary foe of the mashup: Browser security only allows calls to the same domain as the originating web page, which restricts where you can retrieve data from during runtime. Originally, this restriction was designed to protect content owners from web applications that pulled data from their sources. Unfortunately, this makes it harder to use Web services since, most of the time, the data source and the mashup do not live on the same domain.

This article will cover ways to overlay data on a map and discuss different options to get around the browser cross-domain restriction. I'll walk through the following solutions:

  • GeoRSS Solution
  • PHP Proxy Sample
  • JSON—Proxy-free mapping with the dynamic script tag

GeoRSS is an XML-based format based on RSS 2.0 but which adds latitude and longitude elements that specify the location of an item: <geo:lat> and <geo:long>. Yahoo! Maps took it one step further and added additional elements that support a street address, city, ZIP, etc. on top of longitude and latitude. The GeoRSS file that contains the data to overlay onto the map can be hosted on any public accessible server. ACME GeoRSS Map Viewer is an application that drills down further into the different additions from the RSS standard.

Listing 1 describes two groups of items where each group has a specific image associated to it. Below the group definitions, are the item definitions with locations specified. Each item is assigned to a group, which specifies where the image is on the map.

To display the information in Listing 1, I will use the Yahoo! Maps Ajax API. The only things that need to be done are to create a 'div' for the map on the web page, create a new map, and then call a function that overlays the GeoRSS data. To run the code on your own page, copy Listing 1 into a file and point your web page to your own GeoRSS file. The Web page code for my example application, mapGeoRSS.html, is shown below.

<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=devxsample"></script>
<style type="text/css">
#mapContainer { 
    height: 600px; 
    width: 600px; 
<div id="mapContainer"></div>

<script type="text/javascript">
  // Create a map object 
  var map = new  YMap(document.getElementById('mapContainer'));
  // Display the map centered on given address 
  map.drawZoomAndCenter("San Diego ", 5);
  // Overlay data from GeoRSS file 
  map.addOverlay(new YGeoRSS('http://theurer.cc/code/devx/georss.xml'));

Once you have your page up and running, you also need to sign up with Yahoo to get an application ID. After you have your own ID, you should replace the appid in line three of the web page code above with your own.

This approach is great if you are looking for a simple way to get data on a map without writing your own code. However, the solution is fairly static. The GeoRSS file could be generated upon request, but after that, there is no way to dynamically manipulate the data in case the user pans or zooms. I'll discuss some of the more dynamic solutions in the second part of this article.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date