Mashups

Multimap Case Study

JonB — Wed, 25 Jun 2008 18:57:00 GMT

Featured Site: Multimap
Where? http://www.multimap.com/
Developer: Multimap

The Site

Online since 1996, London-based Multimap.com is one of Europe's most popular mapping sites, serving more than 10 million users each month. The site offers street-level maps of the United Kingdom, Europe the United States and much of Asia Pacific; road maps of the world; door-to-door travel directions; aerial photographs; and local information. Multimap also provides “white label” mapping services for other web sites, including basic mapping, proximity searching, routing, aerial images, and local information. Recently, Multimap has begun to integrate on its website Microsoft® Virtual Earth™ and Windows Live™ Messenger, two components of the Windows Live network of internet services. Together, these services enable users to view geotagged information—such as the sender’s location or a business address—and to interact while using maps. The example shows a Messenger conversation taking place based on users being able to see where each other are on Virtual Earth Bird’s Eye imagery.

Why the Windows Live Platform?

The integration of Multimap with Windows Live Services provides several key benefits, according to Matthew Quinlan, Head of Product Marketing at Multimap.

The IM capability can drive traffic and increase stickiness by encouraging users to stay on the Multimap site while carrying on a conversation. The participants can also click on geotagged elements—for example, the recipient’s location, a business address or geo-tagged Wikipedia content—and receive further information without leaving the Multimap environment.
Differentiated content and ad delivery. “We can deliver highly targeted advertising, based on knowing where the participants in a messaging session are located, and even show a user the nearest places to buy advertised goods on the map when they click on an ad,” Quinlan explains.
Access to over 300 million existing Windows Live ID users worldwide immediately increases the reach of Multimap site to a much larger group of users and advertisers than they had previously.

Programming Environment

The integration of Windows Live Services was done using JavaScript developed on a Macintosh computer and debugged with Firebug.

Under the Hood

The code below illustrates how a Windows Live Messenger user can geotag themselves, and update their personal message by clicking on a map on multimap.com. This allows other users to see where they are on the Multimap website, and to start a Messenger conversation.

function addContextMenu()
  
{ MMWCore.UI.Mapviewer.map.addEventHandler( 'contextMenu', function ( type, target, menu, pos, step ){ items = [{ label :
 'Set your location on Live', onclick : function (){ setLonLatForUser( pos ); getPostCode( pos ); menu.remove(); }, 
className : 'MMaddmarker' }]; menu.addItemsJSON( items ); }); } function getPostCode( pos ){ $.ajax({ type: "GET", url:
 "ppc.htm?lat=" +pos.lat+ "&lon=" + pos.lon, success: function (response){ setPersonalMessage( response + " 
("+pos.lat+","+pos.lon+") http://www.multimap.com/maps/"); } }); } function setPersonalMessage( text )
{ MSLiveGlobals.user.get_presence().set_personalMessage( text ); }

Fishticuffs Case Study

JonB — Wed, 11 Jun 2008 13:00:00 GMT

Featured Mashup: Fishticuffs
Where? http://www.fishticuffs.co.uk/
Developer: Thin Martian

The Site

Created by London-based digital media agency Thin Martian, Fishticuffs illustrates how easy it is to promote online social interaction through innovative use of Microsoft® Windows Live™ network of Internet services. Fishticuffs is a nonviolent combat game—played within the Windows Live Messenger environment—that uses animated fish as weapons of choice. Clicking PLAY on the site's home page opens the visitor's Windows Live Contacts list, ready to invite a friend to a round of virtual bashing (shown on the graphic). In an innovative extension of the game, the player's comparative scores and ranking among his or her Windows Live contacts can be exclusively viewed on social network sites Bebo and Facebook through a downloadable application. The rankings make the game more competitive among friends, and encourages them to install the application and establish contact. The social network application also increases the game's reach to a world-wide group of other players by listing a global ranking at the end of each game." Fishticuffs is the first 'crossover' application that illustrates how to provide a content platform for Live Messenger," explains Thin Martian's James Clarke. "It creates reach and stickiness for the service by tapping into Windows Live contacts from social networking sites." The results are impressive: after only one month, over a million minutes of Fishticuffs have been played, all games initiated through Windows Live Messenger.

Why the Windows Live Platform?

Clarke and colleague Ian Routledge cite security as a key benefit of Windows Live services for this application. Contact information is only exposed if the player agrees to share it. "We wanted to provide a viral but secure means for people to connect online through this game," says Clarke. "The combination of Windows Live Contacts control, Windows Live ID, and Windows Live Messenger was perfect for that." Another advantage of Windows Live Services was ease of use, enabling rapid and cost-effective application development. A strong Microsoft developer network and online support also provided helpful support.

Programming Environment

Microsoft Visual Studio 2008 was used for the scripts and JavaScript. The scripts (for saving and loading user and game data) were programmed in either classic ASP or ASP.NET. The Facebook and Bebo applications are written in ASP.NET in C#.

Under the Hood

The following code illustrates how Fishticuffs is launched when the PLAY button is clicked on the homepage.

flash.external.ExternalInterface.call("PlayGame");
function PlayGame()
{
   // Check the browser version
   if (navigator.appName === "Microsoft Internet Explorer" && navigator.appVersion >= 6)
   {
     // Running IE 6 or later so try and launch the game. (MSNMessenger.P4QuickLaunch only works from IE :))
     var obj;
     try
     {
       // Try and create the MSNMessenger.P4QuickLaunch ActiveXObject
       obj = new ActiveXObject("MSNMessenger.P4QuickLaunch");
     }
     catch (e)
     {
       // Can't so set it to null
       obj = null;
     }
     // Check to see if we can launch the app
     if (obj != null)
     {
       // The activeX object is not null, so launch the app.
       obj.LaunchApp('20575602', '');
     }
     else
     {
       // The user doesn't have (or isn't running) WLM
       alert("You must have Windows Live Messenger to play the game.");
   }
   }
     else
     {
       // Running another browser so tell the user
       alert("Please reload this page in Internet Explorer\n\nOr choose Fishticuffs from the games menu in Windows Live 
      Messenger.");     
     }
} // PlayGame

iBloks Case Study

JonB — Wed, 14 May 2008 13:00:00 GMT

Featured Mashup: iBloks Video Messenger
Where? http://www.ibloks.com/
Developer: iBloks, Inc.

The Site

Founded by entertainment and software industry innovators, iBloks began in 2005 with a vision for social innovation and personalized self-expression. The company’s latest offering, iBloks Video Messenger, enables site visitors to watch and share videos while logged into Microsoft® Windows Live Messenger, a component of the Windows Live™ network of Internet services. iBloks Video Messenger is designed to connect online video enthusiasts and instant messenger customers with an integrated 3D viewing and communication offering. Site visitors can view videos and share comments with each other in real time, eliminating the delay of sharing and viewing when done through email or when posted onto social network sites. Viewers can also post their multimedia experiences as a “widget” on their web pages, blogs or social network pages. The video application and user interface was developed using another Windows Live Services component, the Microsoft Silverlight™ multimedia development platform.

Why the Windows Live Platform?

Silverlight and Windows Live Messenger provide an ideal application platform for iBloks Video Messenger, according to Julia Miller, founder and CEO of iBloks. “Our vision is to combine multimedia consumption with viewer interactivity,” says Miller, an IT and business veteran who held sales/marketing and general management positions at SegaNet and Xbox Live and executive positions at Apple, Microsoft, Pepsi and Citibank. “Silverlight provides an extremely high-quality video experience, and Windows Live Messenger gives us the IM component, along with a huge established user base.”

Miller cites several further advantages of Windows Live Services:

Live Services provides a proven, scalable platform that increases iBloks’ reach to over 300 million Windows Live Messenger users around the world.
Modular web services can be deployed with re-usable code, enabling fast development cycles: the iBloks Video Messenger was created in under 60 days by leveraging previous work.
Clear, easy to use API’s enable quick application development with minimal additional investment.
Strong third-party Microsoft Partner developer network and online support.
Ad-free services provide a quality environment for targeted advertising.

Programming Environment

The iBloks Video Messenger application was developed with Microsoft Visual Studio 2008 and Windows Presentation Foundation (WPF), using a combination of C#, JavaScript, and other programming languages.

Under the Hood

The iBloks Video Messenger can be deployed throughout the web as a widget. This enables anyone to take advantage of the iBloks technology without writing any code. Simply paste this HTML code into the page:

<iframe width="632" height="655" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"
src="http://www.ibloks.com/services/videomessenger/" name="iBloks - Live In 3D" title="iBloks - Live In 3D">

<!-- Alternate content for non-supporting browsers -->

Your browser is not able to render this page properly.
<a href="http://www.ibloks.com/services/videomessenger/">Click here to continue.</a>

</iframe>

Films for Learning Case Study

JonB — Wed, 30 Apr 2008 19:04:00 GMT

Featured Site: Films for Learning
Where? http://www.filmsforlearning.org/
Developer: Altius Consulting

The Site

Films for Learning is an innovative approach to education that combines collaborative moviemaking, video learning and social networking. Peter Roe and Mark Richardson, educators from the acclaimed Dorset, UK Thomas Hardye School, believed that educational films could have more impact by being shorter and more engaging to typical students. Roe and Richardson further thought that student-produced films would create a double learning experience, advancing the subject for both the student filmmakers and the viewers. “You can’t make a film about something if you don’t understand it,” explains Richardson. The Films for Learning website currently features about 150 student-made educational films on varied topics—including photosynthesis, Darwinism, and French—that are available for classroom and personal use. The site is powered by Microsoft ® Silverlight™ browser plug-in development tool and Windows Live ID identity authentication system, two components of the Microsoft Windows Live™ network of Internet services. Silverlight provides the rich multimedia viewing experience for the viewer, and Live ID provides secure authentication for Films for Learning members who wish to upload content.

Why the Windows Live Platform?

Roe cites a number of benefits of Windows Live services. “First, there is the quality of Silverlight conversion from the original video source,” says Roe. “There is nothing else out there at the moment that compares, especially at full screen. It makes for a very compelling viewing experience.” Other advantages of the Windows Live Platform include:

Ease of use enables fast development at minimal cost.
Strong security provided by Windows Live ID. Every submitted video undergoes rigorous review to make sure it is appropriate for the intended audience. “We have to provide a safe, secure educational resource,” says Roe. “We needed a strong authentication and registration process for uploaded content, and Live ID provides that.”
A strong third-party Microsoft Partner developer network and online support provides helpful technical support.

Programming Environment

Developers at Altius (http://altiusconsulting.com/) used Microsoft Virtual Studio 2008, .NET 3.5, Team Foundation Server 2008, and Microsoft Expression Suite (specifically Blend) to create the site. The database was Microsoft SQL Server 2005 (Standard Edition). The code-behind is primarily in C#, and Silverlight in JavaScript. Many of the children who create the films use Microsoft Windows MovieMaker, a download that provides tools to create, edit, and share home movies.

Under the Hood

The following JavaScript code illustrates the prompt for Windows Live ID sign in, and the associated page code for the control to redirect to the Windows Live login site.

<live:IDLoginView ID="LoginView" runat="server" ApplicationIDConfigKey="wll_appid" ApplicationSecretConfigKey="wll_secret"
 PromptOnAssociation="false">

<AnonymousTemplate>
  <div id="logged-in-user">
    <a href="mailto:info@filmsforlearning.org">Contact Us</a>&nbsp;&nbsp;
  </div>
  <div id="home-login-panel">
    <div id="home-login-body">
      <p id="already-member">Already a member?</p>
    </div>
  </div>
  <div style="display: block;" id="anonymous-user">
    <uc1:Login ID="Login" runat="server" />
      <span id="sign-in-or-sign-up">or</span>
    <uc1:Signup ID="Signup" LinkText="Upload your first film here" runat="server" />
  </div>
</AnonymousTemplate>

</live:IDLoginView>

Sun Safaris Case Study

JonB — Mon, 14 Apr 2008 20:47:00 GMT

Sun Safaris uses Virtual Earth to provide detailed maps and travel information for their southern African safaris, holidays and honeymoon getaways. ...(read more)

MindTouch Deki Wiki Case Study

JonB — Thu, 27 Mar 2008 16:00:00 GMT

Featured Site: MindTouch Deki Wiki
Where? http://wiki.mindtouch.com/
Developer: MindTouch

The Site

MindTouch Deki Wiki (a combination of Japanese and Hawaiian words for “smart” and “quick”) is the Web’s most popular commercially supported wiki platform for creating content and mashups using a wiki interface. The free, open source application is an easy to use program for authoring, aggregating, organizing, and sharing almost any kind of content. Enterprises can build online communities and in-house Intranets, create collaborative applications, or add wiki capabilities to existing applications. Deki Wiki leverages the Microsoft™ Windows Live™ network of Internet services. In the example, a visitor to the wiki can read a restaurant review and immediately get a map and driving directions from any starting point to the restaurant. The map and directions are obtained dynamically from Microsoft Virtual Earth™ mapping software, using a few simple calls (see below).

Why the Windows Live Platform?

Windows Live services provide a number of benefits:

Clear APIs, SDKs, and the large repository of technical documentation available on Microsoft’s http://dev.live.com/ website.
A large, helpful online developer community.
Very fast startup (several hours from software download to demo pages).
No additional training or investment needed to deploy Live Services.
Fully compatible with Microsoft development environment.

Programming Environment

MindTouch developed Deki Wiki on the Microsoft .NET framework with the Visual Studio® development system. The application logic is implemented in C#, while the presentation layer is handled independently using PHP. This makes it possible for a designer to alter the user interface quickly and without compromising the application’s business logic.

Under the Hood

The following code snippet uses DekiScript, the built-in scripting language developed by MindTouch to create visually rich and interactive pages in Deki Wiki. The snippet shows how controls, map, and directions are placed on a wiki page so that a visitor can easily find a restaurant. DekiScript embraces the new programming model of information subscribers and publishers, which enables editors to easily create mashups with web-services and widgets.

{{ live.map{ address: args.address, title: args.title, description: args.description, 
    kind: 'road', publish: @directions, subscribe: @from, zoom: 15 } }}


{{ dhtml.form{ inputs: [ { label: args.label ?? 'Driving from:', field: 'from' }, 
{ field: 'to', value: args.address, hidden: true } ], 
    button: 'Get directions to ' .. args.title, publish: @from } }}


{{ dhtml.table{ columns: [ { label: 'Directions', field: 'text' }, { label: 'Distance', field: 'info' } ], 
    subscribe: @directions } }}

Featured Mashup: Burien Streetcar 1911 Survey Map

kevinle — Thu, 06 Dec 2007 00:26:00 GMT

Where? Burien Streetcar 1911 Survey Map

Developer: Robert Ketcherside

The Mashup

Created by Seattle native and local history buff Rob Ketcherside, Burien Streetcar features an overlay of a current digital map with a 1911 map detailing plans for a streetcar line that once connected the city of Burien (near present-day Seattle-Tacoma Airport) with Seattle. Ketcherside combined historic maps from county archives with Virtual Earth™, state-of-the-art mapping software powered by the Microsoft Windows Live™ Platform. MapCruncher, an application from Microsoft Research, was used to import and align the maps, enabling the combination of road and aerial imagery from Virtual Earth with the archival 1911 streetcar map.

Why the Windows Live Platform?

Windows Live was the only integrated platform that enabled map overlays without having to invest in 3^rd-party add-ins or expensive graphics applications. While Windows Live can serve as foundation for very complex web sites, Burien Streetcar illustrates how easy it is to build straightforward mashups in a few easy steps.

Programming Environment

Developer Ketcherside used a simple text editor (Microsoft Notepad) to create and edit the code for Burien Streetcar.

Under the Hood

Virtual Earth and MapCruncher work together to generate the final displayed mashup. MapCruncher registers the archival streetcar map (which can be submitted in a variety of vector or raster image formats) to the global coordinate system. It then processes the result to fit a Mercator projection, and generate a set of image tiles that are seamlessly combined with Virtual Earth road or aerial imagery. The resulting “crunched layers” are returned for display.

The following code snippet shows how to call Virtual Earth and MapCruncher:

<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5" type="text/javascript"></script>
     <script src="http://research.microsoft.com/mapcruncher/scripts/v5/CrunchControl.js" type="text/javascript"></script>

The layered map results are stored on the web site:

<div id="Map"></div>
<div style="display:none">
<a id="CrunchedLayers" href="http://www.zombiezodiac.com/rob/hplb/maps/1911/MapLayers.crunched.xml">CrunchedLayers</a>
</div>

Featured Mashup: The Group Inc. Real Estate

Admin — Fri, 20 Jul 2007 18:37:00 GMT

Where? The Group Inc. Real Estate

Developers: Active Website

The Mashup

The Group Inc. Real Estate, a leading independent real estate broker in northern Colorado , needed to increase its web presence to protect market share. The solution was a compelling new website by Active Website (www.activewebsite.com). The site features map-based property searches powered by the Microsoft Windows Live™ Platform, a suite of resources, tools, and services that enable developers and enthusiasts to quickly create compelling web applications. Prospective homebuyers can thoroughly research an upcoming move locally or from out of town. Monthly unique site visitors have increased about 4 times to nearly 80,000 per month, and conversion from visitors to sales leads is up dramatically to between 1,200 to 1,500 per month.

Why the Windows Live Platform?

The Windows Live Platform was the clear choice for an enterprise-ready solution. For example, Virtual Earth was the only ad-free mapping service suitable for commercial clients, has an excellent application programming interface (API), and a comprehensive feature set that is unavailable elsewhere.

Programming Environment

Active Website uses Microsoft ASP.NET, Microsoft Visual Basic, Jscript (for back-end coding), and JSON. JavaScript is used for AJAX communication. Developers typically use Zend or DreamWeaver to create and manage code on their desktops.

Under the Hood

The following code illustrates how a Virtual Earth map-based real estate search is done on the website for The Group, Inc.

/* Map Search */
searchProperties: function(){ //Fire off Ajax request for XML list of properties matching search parameters
	var options = {
		method: 'post',
		parameters: this.parameters,
		onComplete: function(response, json){this.plotSearchResults(response, json);}.bind(this)
	};
	var myAjax = new Ajax.Request(this.urls.propertySearch, options);
}
plotSearchResults: function(response, json) { // Ajax response handler. Creates all the Pushpins and added them to the map
	try {
		this.interface.removePins(this.propertyPins);
		var bJSON = response.responseText;
 		bJSON = bJSON ? eval('(' + bJSON + ')') : null;
		this.propertyPins = this.createPushpinsFromJSON(bJSON);
		this.interface.addPushpin(this.propertyPins);
	} catch(e) {this.debug(e);}
}
createPushpinsFromJSON: function(json){ // Loops though a JSON object and creates an array of pushpins
	}
	var pins = new Array();
	json.property.each(
		function(iter){
			var icon = //Based on Zoom Level and Property Type
			var title = //Street Address
			var details = //Complex Regular Expression Replace
			var pin = this.interface.createPushPin(iter.mls,
                              MapSearch.LatLong(iter.LatLong.Latitude,
                              iter.LatLong.Longitude, this.options.mapType),
                              icon, title, details);
			pins.push(pin);
		}.bind(this)
	);
	return pins;
}
/* Interface */
createPushPin: function(id, latLongObj, icon, title, details){ //
	try {
		var pin = new VEShape(VEShapeType.Pushpin, latLongObj);
		pin.SetTitle(title);
		pin.SetDescription(details);
		pin.SetCustomIcon(icon);
	} catch (e) {this.debug(e);}
	return pin;
}
addPushpin: function(pins){
	if(AWUtilities.Test.isArray(pins)){
		for (var r=0; r < pins.length; r++){
			try {
			   this.mapObj.AddPushpin(pins[r]);
			} catch(e) {this.debug(e);}
		}
	} else {
		try {
			this.mapObj.AddPushpin(pins);
		} catch(e) {this.debug(e);}
	}
}

Featured Application: Business IT Online

Admin — Tue, 15 May 2007 04:05:00 GMT

http://www.businessitonline.com/small-business-software.aspx

Developer: Mark O’Farrell (company founder)

Company: FarrellSoft

The Application

With a fully-integrated suite of Web-based software modules, Business IT Online is a great resource for small business owners seeking a simple and affordable IT solution for a flexible workplace.

Why Windows Live?

David Cruickshank explains, “The Windows Live strategy really excites us. Small businesses often lose productivity by having many places to get key information. What is great about the Windows Live Platform is that it enables people to get what they need from one place.”

Programming Environment

Farrellsoft uses Microsoft Visual Studio.NET, ASP.NET and JavaScript to create the Business IT Online modules.

So, What Have You Done for Me Lately?

Farrellsoft has begun using the Windows Live Platform to incorporate time-saving automation into their business processes. The example below shows how the Windows Live Contacts control is used to pull data from an online Windows Live or Hotmail contacts list directly into the header of a Farrellsoft invoice.

Under the Hood

The following code fragment shows how to transfer new customer contact information to an invoice header using the Windows Live Contacts control (see the results at right).

function onData_createdoc(p_contacts) {
	//Check the data
	if (p_contacts.length > 0) {
		//Name
		document.getElementById('tbxContactName').value=p_contacts[0].firstName+" "+p_contacts[0].lastName;
		//Business name
		document.getElementById('tbxCompanyName').value=p_contacts[0].businessName;
		//Address
		document.getElementById('tbxCustAddr1').value=p_contacts[0].businessStreet;
		document.getElementById('tbxCustAddr2').value=p_contacts[0].businessCity;
		document.getElementById('tbxCustTownCity').value=p_contacts[0].businessState;
		document.getElementById('tbxCustCountry').value=p_contacts[0].businessCountry;
		document.getElementById('tbxCustPostcode').value=p_contacts[0].businessPostalCode;
	}
{

Featured Mashup: Atlas

Admin — Tue, 15 May 2007 03:53:00 GMT

http://www.freshlogicstudios.com/Products/Atlas/

Developers: Shawn Miller and Jacob DuBray

Company: Fresh Logic Studios

The Mashup

Built on Microsoft Virtual Earth and Windows LiveTM API’s and web services, Atlas is a free, web-based showcase for mapping and searching technologies. With more than one million hits per day, Fresh Logic Studios serves over 250,000 pages and a gigabyte of data to site visitors daily.

Why Windows Live?

“We really like Live.com--I visit the site at least three times a day," reports Miller. "Compared to other platforms, it's more developer-friendly, has better APIs, and gets us to our vision faster.

Programming Environment

Programming Environment Fresh Logic Studios uses ASP.NET and C# 2.0 for the backend. “We use lots of XML andAJAX,” says Miller. “We have been huge supporters of web standards (XHTML/CSS/ECMAScript) for years.”

Putting It All Together

Miller and co-founder Jacob DuBray developed a platform that could easily combine several data sources on one map in a consistent and attractive user interface. Current data sources include: Eventful.com (Events); Flickr.com (Photos); Yahoo.com (Traffic) and a locally hosted GPS tracking service.

Code

The following code shows how a GPS view can be created.

// Build URI for updating GPS device location using HTTP GET
StringBuilder uri = new StringBuilder
("https://atlas.freshlogicstudios.com/Services/Gps/Gps.asmx/UpdateGpsDeviceLocation");
uri.AppendFormat("?email={0}", "user@domain.com");
uri.AppendFormat("&password={0}", "bigboy");
uri.AppendFormat("&gpsDeviceId={0}", "12345678-90ab-cdef-ghij-klmnopqrstuv");
uri.AppendFormat("&latitude={0}", "43.75"); 
uri.AppendFormat("&longitude={0}", "-99.71");
uri.AppendFormat("&altitude={0}", "1000.0");
uri.AppendFormat("&heading={0}", "360.0");
uri.AppendFormat("&speed={0}", "55.0");
uri.AppendFormat("¬es={0}", "User defined data (i.e. Temperature is 67 F)");
// Update GPS device location using HTTP GET
System.Net.WebClient myWebClient = new System.Net.WebClient();
myWebClient.DownloadString(uri);