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.
data["Virtual Earth"] = new Array();
data["Virtual Earth2"] = new Array();
for (var i=0; i<data["Indeed Jobs"].length; i++)
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);
data["Virtual Earth2"][i] = virtualEarth.setMapView(data["Indeed Jobs"][i].latitude, data["Indeed Jobs"][i].longitude, 10, 25, data["Indeed Jobs"][i].id, "");
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.