Mashup Tutorials, Tools, Builders and Samples

Using technologies such as Ajax, Javascript, JSON, Google Maps, GeoMonkey, and Popfly.

Resources to help you build enterprise mashups and consumer mashups.     Digg    Technorati:  mashup json  ajax   popfly  googlemaps  geomonkey


Getting Involved with Mashups

This page intends to help you get started with building mashups. You may do this as a hobby or this may be something you need to do for your job. Either way, the skills and tools covered on this page will get you down the path of building out a mashup application.

I personally have done both: I have built mashups for my own amusement, but I also talked with customers about building enterprise mashups for corporate projects. At Oracle (and BEA), my former employer, we were building products to help customers successfully deploy enterprise mashups.

- Peter Laird, from Boulder Colorado, employed by Tendril, a Smart Grid startup (also recently at Oracle, and BEA Systems)


Featured Mashup Tutorials

This is a list of the tutorials and demos described in my articles and blogs:


Ajax-Powered Google Maps Mashup   Start here!!!

Intended for newbies to mashups starting with minimal web programming skills. This example shows how easy it is to build a Google Maps mashup using the following technologies: HTML, JSON, Javascript, Ajax, and the Google Maps API.


Building Mashups with Greasemonkey

These tutorials show how to build a mashup using Greasemonkey, a Firefox plugin,  to combine two web sites (O'Reilly and BEA) together in a powerful combination. Later blogs discuss when Greasemonkey is appropriate for the enterprise, and the issues to be aware of. Technologies: Firefox, Greasemonkey, JavaScript, XmlHttpRequest.


Google Maps Construction Tool for the Non-Technical User

Schmapplets is a tool that allows a non-techie to build a Google Maps based mashup. If you want to get Mom going on creating mashups, Schmapplets is the tool to use. Mom still won't have any idea about what you do for your job, but that's a much bigger problem.


Building a Mashup with SnapLogic and Oracle

This tutorial shows an integration with Oracle WebLogic Portal and a data mashup tool called SnapLogic.The integration uses RESTful APIs to achieve the integration.

Building a Data Driven Microsoft Popfly Mashup 

This tutorial shows how to build a Microsoft Popfly mashup using a data feed that we build. This mashup uses: Popfly, JSON and Javascript technologies. Note that Popfly requires you to install the Microsoft Silverlight plugin into your browser. You will be prompted to do so before viewing the mashup.

Note: as of early 2009, Microsoft has end of lifed Popfly. Use of this tool is no longer recommended.


BEA WebLogic + Microsoft Popfly = Enterprise Mashups

This tutorial integrates our previous work with Microsoft Popfly to include an enterprise data service provided by BEA WebLogic Portal. This shows the promise of enterprise mashups within Popfly.


BEA WebLogic Portal + + Excel = Enterprise Data Mashups

In this blog entry I explore an approach that allows spreadsheet data to be managed by IT, and then visually mashed up with other data sets. This solution combines the Content Management capabilities of WebLogic Portal with the data mashup features of

What's New


Maker of a mashup tool I blogged on. I saw it at Web 2.0 Expoin 2008 and was impressed. It looks to be highly useful as a data feed engine (a la Yahoo Pipes).

User Created Google Maps

Google Maps allows for users to plot their own maps, including scrawl line art on the page. Not technically a mashup, but something along the same lines.  I have created a visitor guide to the Oracle HQ  in Redwood Shores:

Mashup Keyword Search Data for SEO

I have attached 1 year worth of search analytics data for this site that shows what people are searching on to get here. If you have a mashup tool it may be interesting data for doing SEO on your site.


Mashup Related References


Enterprise Mashup References


Mashup Creation Tools and Builders


Mashup Lists


Other Mashup Tutorials

Yahoo Pipes Tutorial

This is a quick tutorial showing how to use Yahoo Pipes to aggregate a RSS feeds. Pipes allows for transforms to be applied, as well as multiple RSS feeds to be aggregated.

Adobe Flex, Yahoo Weather, Yahoo Answers Mashup Tutorial 

The hosted working example is not, well, working. But this tutorial looks promising as a simple effort to build a mashup in Flex. It accepts a zip code, and then retrieves the weather, and then looks to Yahoo Answers to find questions relevant to the current weather situation.


Interesting Sample Mashups

AP News

My personal favorite sample mashup, it mashes up an Associated Press news wire, with Yahoo geocoding, and Google Maps. When I need to explain what a mashup is, this is a great example. Be sure to click on news stories on the right to have the map respond.

GeoMonkey, Wayfaring

These tools allow the everyman to create a Google Maps mashup using a list of places that you choose. Good for non-programmers to map out their favorite restaurants, clean bathrooms, or whatever spot they choose in a city. They provide a nice visual tool in the browser.


This mashup sample allows you to overlay polygons onto Google Maps to define areas of interest. The BEA Boulder office is marked on this entry:


This sample mashup shows the power of social computing to measure the going wages for people - all mapped out of course.