Last month, Bing concluded the Decode with Jay-Z campaign – a campaign which ambitiously brought every page of Jay-Z’s new book, Decode, into both the real world – on New Orleans rooftops, Miami swimming pools, Manhattan billboards – and into an online contest built on the Bing Maps platform. In order to provide an immersive game experience which would hook the user into a scavenger hunt for over 200 pages, our development partner – Vertigo – leveraged the Bing Maps API and created new ways to customize the Bing Maps experience for the Jay-Z brand.

Bing Maps was a central grounding element in the Decoded marketing campaign. Visitors answered questions and then navigated through both aerial and StreetSide views to solve clues and discover pages. Decoded provided contextual geographical and subject-matter content, and Bing Maps provided the surface area in which to experience the game. Users learned to navigate Bing Maps views as they competed to win prizes.

To bring the creative vision of the campaign to life, Vertigo’s development team made a number of modifications to the Bing Maps API.

· An important interaction for Decoded users included navigating through neighborhoods and locating pushpin-like objects. For displaying pushpin-like objects in StreetSide view, Vertigo extended the API to support this feature. We created a custom container for the page which appeared at a specific geo-coordinate: a street corner, the wall of a building, a swimming pool at a luxury hotel, etc.

· In order to create a custom container, Vertigo placed a UI element on top of Bing Maps in StreetSide view. By manipulating the size, scale and transforms of the custom Silverlight element, the game player would perceive it to be part of Bing Maps.

· Vertigo also wrote a helper that detected when the player attempted to move outside of the areas supported by StreetSide view. While explicit detection is not possible, the software detected when the visitor tried to move and the new geo-coordinate location was the same as the old location. In this case, we could inform the player through subtle UI interactions and smooth out a potentially difficult game play experience.

· Vertigo developed a tool which allowed the content administrator to enable or disable StreetSide view on a given page when StreetSide view was not available for the given geo-coordinate. When the game play for a given page was not supported in StreetSide view, the player would need to zoom down to a specific level, one or two positions from the maximum zoom level, in order to find the page in aerial view. Obviously, zooming all the way out to find the page would make the game play experience too easy.

· Vertigo’s interaction designer created custom controls which then bound to specific Map functions that allowed the user to pan and zoom.

Custom modifications allowed for more accurate neighborhood boundaries in a number of ways:

1) Vertigo paired the Decoded game site a separate administration website built with ASP.Net MVC. This administrative website managed the database that controlled the game. In order to define the neighborhood boundary which contained the book page, the administrator built a complex polygon by selecting points on the map. Some polygons included over 1000 geo-coordinates.

2) Vertigo used the Bing Maps API to convert each point into a latitude and longitude. Once the administrator selected three points, a polygon appeared on the map. Polygons were drawn on the Silverlight Bing Maps control with standard Bing Maps API calls using a white border for highlighting. The administrator could then alter the shape of the polygon by adding additional points. Once finished, the polygon geo-coordinates were stored in the database.

3) When the visitor navigated to a given page, the Silverlight application retrieved geo-coordinates for the neighborhood boundary and drew them on the Bing Maps control.

In order to draw the book page and have it appear to be part of the StreetSide map view, three values needed to be calculated: the x and y coordinates to position the element, and a scaling factor to make the element smaller when it was farther away.

The following calculations were used to derive these values:

Calculate Y Coordinate

UIElementDistance = DistanceInMeters(UIElementLocation, CurrentLocation)

altitudeDif = CurrentAltitude –  UIElementAltitude
pitchAngle = tan(CurrentPitch * π / 180)
distanceToHeightRatio = max(-1 ,  min(1, altitudeDif /  max(UIElementDistance, 1))) + pitchAngle
heightRange = MapHeight / 2

UIElementTop = (heightRange + (distanceToHeightRatio * heightRange)) 

Calculate X Coordinate

fieldOfVision = 90
currentHeading = CurrentHeading%360
headingToLocation = BearingInDegrees(UIElementLocation, CurrentLocation)
headingDifference = headingToLocation – currentHeading

IF headingDifference > 180 THEN headingDifference = headingDifference – 360
distanceToWidthRatio = headingDifference / (fieldOfVision / 2)
widthRange = MapWidth / 2

UIElementLeft = (widthRange + distanceToWidthRatio * widthRange) 

Calculate Object Scaling Factor

UIElementScaling = DistanceToMaximumPageBeaconSize / max(distanceToMaximumPageBeaconSize, currentBookLocationDistance)

In the above calculations, these values were produced by the map control.

CurrentLocation (a latitude/longitude pair)
CurrentAltitude (in meters)
CurrentHeading (in degrees) – this is what direction the user is facing
CurrentPitch (in degrees) – this is what angle the user is looking up or down.
MapHeight, MapWidth – the current dimensions of the map control (in pixels)

These values were retrieved from the database:

UIElementLocation
UIElementAltitude

We also customized Bing Maps to fit the unique look and feel of the campaign style guidelines. To create a de-saturated color effect we applied a pixel shader to MapMode objects. We also created custom navigation controls.

Most importantly, very little code was required for all of these modifications. Only about 25 lines of code were added to position the book page element, and another 50 lines of code supported functions that calculated distance and heading.

For more information on how you can start using the Bing Maps API in your mash-ups and applications, check out http://www.microsoft.com/maps/. Thanks to Vertigo for proving us with the code to include in this post.

Follow me @BingMaps ^BH.
Learn more on Facebook & Wikipedia

Brian Hendricks
Bing Maps Product Manager