Featured Mashup: Sun Safaris
Where? http://www.sunsafaris.com
Developer: In-house team

The Site

Cape Town, South Africa-based Sun Safaris specializes in non-hunting southern African safaris, vacations and honeymoons. A strong, attractive Internet presence is vital to the company’s business. A key element of the site is a large collection of detailed interactive maps covering all destinations the company offers. Site visitors can view locations, routes, camps, and lodging information by zooming into the destination of interest and clicking on relevant icons. The maps are built on Microsoft® Virtual Earth™, part of the Windows Live™ network of Internet services. The map shown here illustrates a national park in Botswana (outlined in yellow). Hovering over the park icon brings up a window with a brief description of the park and a link to more detailed information.

Why the Windows Live Platform?

According to Sun Safaris’ Lance Harcourt, site developers chose Virtual Earth over competing mapping solutions for a number of reasons:

• Superior end-user experience with intuitive navigation and smooth transitions.
• More accurate coordinates for items like park boundaries, roads, and landmarks.
• The option of delivering maps without advertising. This protects against competing ads on their site, and offers end users a “clean slate” without distractions. “This was a compelling business advantage and also helps keep the site attractive,” says Harcourt.
• Clear, easy to use SDK’s and API’s and the abundance of online support and user forums.
• No extra investment in developer training was needed to deploy Windows Live Services.

Programming Environment

Sunsafaris.com was developed using all Microsoft tools: the Microsoft .NET framework 3.5, Visual Studio 2008, ASP.NET AJAX, and Microsoft SQL Server 2005 running on Windows 2003 Server. Developers used both Visual Basic .NET and C# to program the site.

Under the Hood

The following code draws park outlines. The function is passed an array of Virtual Earth coordinates (lat longs) by some code which calls a web service (not shown for brevity), and the VElatLong is added to an array. The code adds the coordinates contained in mylat, mylon to an array, and then passes them to the draw function.

var points = new Array;  
//add a point
var myPoint = new VELatLong(mylat, mylon);  
points.push(myPoint); //add to the array
  
//add the other other points from the webservice using the same technique.
//draw the park outline
DrawPark(points, false);

//actually draw the outline - points is an array of VElatlong and highlight indicates the 
//outline is to be done with a fill to draw attention to the shape 
function DrawPark(points, highlight) 
{
//poly is used to hold the points
poly = new VEPolyline(id,points);
if (highlight == false)
    {
    //normal version
    poly.SetWidth(2);
    poly.SetColor(new VEColor(255,249,22,1.0));
    }
else
    {
    //highlighted version
    poly.SetOutlineWidth(3);
    poly.SetOutlineColor(new VEColor(210,120,110,1.0));
    poly.SetFillColor(new VEColor(255,0,0,0.25));
    }
//draw the pretty polygon
map.AddPolyline(poly);
  
}