My First Popfly Mashup

UPDATE: I missed the fact that the Virtual Earth Recenter block allows me to set the zoom and altitude.  Using that, there was no need to write any JavaScript at all to enable this mashup!

I got access to the Popfly site and just built my first mashup.  This is a very cool development platform, and even as an alpha it works great.  I wanted to do something with mapping, so I decided to map job postings from Indeed.com.  The screenshot below shows the final "application".

Here are the steps I went through:

• Added a User Input block to the project and set it up to ask for a keyword, a ZIP code, and a number of results.
• Added the Indeed Jobs block and connected it to the User Input block.
• Added the Virtual Earth block and connected it to the Indeed Jobs block.

Most of the connection fields were set up correctly by the application itself.  I barely had to do anything else!  However, I didn’t like the fact the I was looking at the results from such a high altitude by default, and I also wanted to zoom into the ZIP code’s area.  To do that, I simply added a few more blocks:

• I passed the ZIP code from the User Input block to a GeoNames block to get the latitude and longitude for the ZIP code.
• I connected a Virtual Earth Recenter block to the GeoNames block and told it to recenter the map on the ZIP code’s lat/long.

Now I had the map view the way I wanted it.  I decided that I wanted to display not just the job title in the hover over the pushpins, but also the name of the company and the location.  This was the only place where I needed to write JavaScript code. By switching to the Advanced View for the Virtual Earth block, I was able to alter the JS (you get a view of the generated JS to start from) to do what I wanted:

data["Virtual Earth"] = new Array();
data["Virtual Earth2"] = new Array();
for (var i=0; i<data["Indeed Jobs"].length; i++)
{
     try
     {
          data["Virtual Earth"][i] = virtualEarth.addPushpin(data["Indeed Jobs"][i].latitude, data["Indeed Jobs"][i].longitude, "", "<i>" + data["Indeed Jobs"][i].jobTitle + "</i> with " + data["Indeed Jobs"][i].company + " in " + data["Indeed Jobs"][i].city, data["Indeed Jobs"][i].description);
          call__Piane_Virtual_Earth_Recenter();
          data["Virtual Earth2"][i] = virtualEarth.setMapView(data["Indeed Jobs"][i].latitude, data["Indeed Jobs"][i].longitude, 10, 25, data["Indeed Jobs"][i].id, "");     
}
     catch (ex)
     {
          environment.reportErrorInLoop(i, ex);
     }
}

The end result looks slick, and it was pretty easy to set up.  I could just as easily have used a SharePoint list as the source for the pushpin locations.  The final result is below.