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);}
	}
}