Currently Firefox 3.5 is not supported by Bing Maps although there are only minor issues. One issue is that if your page is scrollable and you use the mouse wheel to zoom in or out of the map the page will also scroll. This is not very good for the user experience. After some investigation I have put together the following workaround to correct this issue:

fRecently I was asked how to determine if a specific area on the map has Birdseye imagery. There are several ways to do this using the AJAX control or the Web Service of Bing Maps. However, one of the clients requirements was to be able to determine this before loading a map and without having to create a web service. With this requirement it is not possible to use the built in imagery metadata functionality of the map. There is not supported method to determine if a location has Birdseye imagery without loading a map and without using the Bing Maps Web Services, however it can be done. In the series of blog posts I made called “Birdseye Imagery Extraction via the Virtual Earth Web Services” I described a method to retrieve Birdseye scene information from a background service that is used by the AJAX control. By extending some of the undocumented functionalities of the we can access this backend service through the AJAX control without loading a map. This backend service takes in an array of VEParameter objects. These parameters mush include the latitude, longitude, zoom level, spin direction, and orientation of a Birdseye request. By hard coding the zoom level to 19, the spin direction to “No Spin” and the orientation to “North” we have the highest chance of getting an accurate response as this is the most common Birdseye imagery setting. Once we have created this array we can pass it along with the URL of the backend service, and a callback function into a method called JSONRequestInvoke. In that callback the response contains a property called Scene. If this property is null then Birdseye imagery is not available for the specified location otherwise it does. Below is a basic HTML page that shows how to do this.

Currently the default behavior of the VEMap.Find function is to center the map over the matching location that is the most popular. This is great most of the time but sometimes it would be nice to be able to search for a location that is closest to where the map currently is. By default the top 10 most popular locations (VEPlace objects) are returned in the find callback. By modifying the properties in the find call up to 20 locations can be return. By setting another property you can prevent the Find method from centering over the most popular match automatically. By calculating the distance from the center of the map to each returned location in the Find callback we can determine the closest (distance) location that matches the users search. The distance from the center of the map to each point can be calculated using the haversine formula: http://rbrundritt.spaces.live.com/default.aspx?_c01_BlogPart=blogentry&_c=BlogPart&handle=cns!E7DBA9A4BFD458C5!317

The following code is an example of how to go about doing this.

Sometimes adding an arrow head to polyline is desired. There are a couple of ways to do this. One way is to use arrow head images as icons and rotate to point in the desired direction. A second method is to extend the polyline and draw the arrow point. The flowing code shows you how to implement the second method.

Virtual Earth has a lot of options for for working with shapes, unfortunately there are so many additional options that are not document (thus unsupported) that are available. However, just because it's not documented doesn't mean it can't be used, it just means that it may break at any time and if it does then it's no ones fault but your own. Now that the fair warning is out of the way here is how to draw dashed polylines.

Before adding a polyline to the map set the VEShapeStyle.prototype.stroke_dashstyle  property to one of the following:

• Solid
• DashDot
• ShortDash
• ShortDot
• ShortDashDot
• ShortDashDotDot
• Dot
• Dash
• LongDash
• LongDashDot
• LongDashDotDot

For an added effect, resize the width of the polyline based on the zoom level.

I've put together a nice little sample of how to do this which can be downloaded here:

http://cid-e7dba9a4bfd458c5.skydrive.live.com/self.aspx/VE%20Sample%20code/dashedLines.zip

Here is a screen shot of what the sample program looks like:

Out of the box Virtual Earth has the ability to draw multipoint routes however it does not have the ability to display more than one route object at a time. Questions on how to do this have been appearing on the Virtual Earth forums for a while now. The general method to do this is to use client tokens with your map so that you can retrieve the route geometry from the Virtual Earth. Once you have the route geometry you can then use polylines to draw any number of routes on your map with out the previous map disappearing.

To make things easy I create my own Route object. This object has a polyline which is used to draw the route path, an array of icons to mark the turn by turn points, a directions property which contains HTML that displays the turn by turn directions, a route title which is used to label the route in a list next to the map so that we can display the route markers and directions for a different route, a route color in both Hex and RGB format. RGB format is needed for VE, and hex format is needed for HTML. This object has a prototype called ShowRouteInfo, which hides all pushpins on the map, displays the directions for the route, shows the pushpins icons for the route, and sets the best map view for the route. This object looks like s:

One catch with the routing information that is returned by VE is that if you try and get the custom icon for a leg of the route using the GetcustomIcon method on the VERouteLeg.Shape property you will end up with the default red icon. We can however access the url to the correct icon by referencing the _customIcon property of the VERouteLeg.Shape object. We will also want to create a new pushpin object otherwise our pushpin will not exist after we delete the default route. A simple function to create the correct route icon looks like this:

The rest of the work done in the code base for this is pretty straight forward. The complete source code can be downloaded here:

http://cid-e7dba9a4bfd458c5.skydrive.live.com/self.aspx/VE%20Sample%20code/MultipleVERoutes.zip

Here is a screen shot of this code in action:

Virtual Earth is a great tool for viewing geo-spatial information on a map. It offers great user experience by being able to pan and zoom the map. Sometimes you may wish you could do this with a static image of your own. In Silverlight you can use DeepZoom to do this but doing this in a regular HTML web page requires a lot of custom JavaScript. So why not use Virtual Earth to do this for you? There are a couple of ways to do this. One is to us MapCruncher and generate a bunch of tile images and then add them to the map as a tile layer. This often results in a large number of tiles. This will work in both 2D and 3D modes which is great if your viewing geo-spatial imagery but if you only need 2D tools there are other options.

Another option is to add the image to the map like a pushpin and to resize it depending on the zoom level. Recently Chris Pendleton blogged about an interesting way to add pushpins to the map by creating image tags and adding them to a div and then adding the div to the map as a shape layer. You can view the post here: http://blogs.msdn.com/virtualearth/archive/2009/04/09/virtual-earth-api-release-information-april-2009.aspx

By expanding upon the methods described in this post we can view an image the same way we view a Virtual Earth map. Here is some sample code that demonstrates how to do this:

It was recently brought to my attention that routes are not supported in the Bird's eye map view. Some how this slipped by me as I swear I've seen it working before. After some thought I suspect that this has to do with possible accuracy issues. A few releases ago a new map method was introduced called VEMap.SetShapeAccuracy (http://msdn.microsoft.com/en-us/library/bb877873.aspx). This method only increases the accuracy of pushpin's. Currently if you draw a route and try an view it in the bird's eye map view you will find that there is no route line drawn only segment markers. One way to correct this issue is to retrieve the route geometry (requires a client token) and draw a polyline in place of the route line. Using this method will not increase the accuracy but will allow you to see a route line. In my tests I haven't noticed any real accuracy issues using this method. Complete source code that demonstrates this method can be found here: http://cid-e7dba9a4bfd458c5.skydrive.live.com/self.aspx/VE%20Sample%20code/BirdseyeRouting.zip

Here is a screen shot of a bird's map with a route drawn on it using this method:

When using the AJAX version of the Virtual Earth control people have had issues making multiple find calls, one after the other. The resulting information does not always return in the order expected. The way around this issue is to use recursion. This will essentially make one call at a time and wait for one find call to finish before making another. The following code demonstrates how to do this:

Virtual Earth currently supports polygons that consist of a single array of points. Many geospatial systems have complex polygons which may consist of several arrays of points which are a combination of outer and inner arrays of points. These are often referred to as Multipolygons. Multipolygons are often used to represent complex boundary areas such as "donut" shaped polygons. By properly concatenating inner and outer polygon array segments in the proper order a single array can be created to represent a complex polygon. An array of polylines can then be created to represent the edges of the polygon. The following method takes in an array of inner and outer polygon array segments and returns and an array of shapes. This array consists of a polygon and and several polylines. This array of shapes can then be added to the map either by looping through each shape and adding it to the map, or by passing the array through the MultiShape class described here:

http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!605.entry

The MultiShape class will give you greater control of the complex polygon. 

Below is an example of a complex polygon that was created using the above method. Complete sample code for this polygon can be found here: http://cid-e7dba9a4bfd458c5.skydrive.live.com/self.aspx/VE%20Sample%20code/AdvancePolygon.zip

In the latest release of Virtual Earth, version 6.2, client side clustering was included as a built in function for shape layers. You can assign a client side clustering algorithm to a shape layer so that it will automatically cluster the shapes when the map is zoomed. This is done by using the VEShapeLayer.SetClusteringConfiguration method. This method can take in two parameters. A clustering type and a VEClusteringOptions object. Currently there is only one built in clustering algorithm type available, grid clustering. Unfortunately there is limited flexibility in this algorithm in that the grid size can not be modified. This can be resolved by making a custom clustering algorithms. This post will show how to create a custom clustering algorithm that can be used with the VEShapeLayer.SetClusteringConfiguration method.

According to the documentation (http://msdn.microsoft.com/en-us/library/cc966716.aspx) a custom clustering algorithm must take in a VEShapeLayer and return an array of VEClusterSpecification objects.

A VEClusterSpecification objects has two properties. A Shapes property and a LatLong property. The Shapes object consists of an array shapes that are being clustered. The LatLong property is the coordinate used to place the clustered pushpin. (http://msdn.microsoft.com/en-us/library/cc966730.aspx)

The custom clustering algorithm that will be created in this blog post will implement a grid clustering algorithm and place the clustered pushpins in the mean average coordinate of the clustered pins. This algorithm is an improvement upon the clustering algorithm described here: http://msdn.microsoft.com/en-us/library/cc161072.aspx

Here is the custom clustering algorithm which grid clusters and places the clusters in the mean average coordinate of the clustered pins. You can modify the size of the grid used in the algorithm by changing the value of the gridSize variable.

The following code can be used to implement this customer clustering algorithm.

Virtual Earth gives us the ability to get turn by turn directions which is great. However the directions may take longer to read through when you need to know which way to turn at the last minute. One way to aid this is to bold the key words in the directions so that they stand out. The following code is an simple example of how to display the plain text, un-bolded directions.

function OnGotRoute( route )
{
   var legs = route.RouteLegs;
   var leg = null;
   var directions = "";
   
   for (var i=0; i < legs.length; i++)
   {
      leg = legs[i];
      legItinerary = leg.Itinerary;
      
      for ( var j=0; j< legItinerary.Items.length; j++ )
      {
         item = legItinerary.Items[j];
         directions += item.Text+"<br/>";
      }
   }
   
   document.getElementById("directions").innerHTML = directions;
}

We can determine which words to bold by using regular expressions. Searching and bolding every keyword would require a list of all the possible key words which would result in a really long regular expression. However, there are a limited number of words that are commonly used by Virtual Earth in the directions which we don't want to bold. Knowing this we can bold the key words by bolding the complete directions instruction and un-bolding all the common words. The following code example is a modified version of the previous code that bolds the complete direction instruction and un-bolds all common words, thus bolding all keywords.

function OnGotRoute( route )
{
   var legs = route.RouteLegs;
   var leg = null;
   var directions = "";
   
   for (var i=0; i < legs.length; i++)
   {
      leg = legs[i];
      legItinerary = leg.Itinerary;
      
      for ( var j=0; j< legItinerary.Items.length; j++ )
      {
         item = legItinerary.Items[j];
         directions += "<b>"+item.Text.replace(/\b(Take| Turn|^Turn|Bear|Depart|onto|for|and|the|then|Keep
|follow|signs|toward|At|exit|ramp|stay|on|to|Make a|Road name changes|Arrive)\b/gi,"</b>$1<b>")+"</b><br/>";
      }
   }
   
   document.getElementById("directions").innerHTML = directions; 
}

The following is an example of set of bolded directions from zip code 12345 to zip code 04556:

Depart River Rd
Turn left onto Edison Ave
Turn right onto SR-5 / State St
Turn right onto Broadway
Take ramp left and follow signs for I-890 / Schenectady County Memorial Veteran Hwy East
Take ramp for I-90 East / Gov Thomas E Dewey Thruway East / New York State Thruway East toward Albany
Keep right onto I-87 South / Gov Thomas E Dewey Thruway South / New York State Thruway South
At exit 21A, take ramp right for Gov Thomas E Dewey Thruway East / New York State Thruway East toward Mass Tpke / Boston
Keep straight onto I-90 East / Gov Thomas E Dewey Thruway East / New York State Thruway East
At exit 11A, take ramp right for I-495 North toward Marlborough / N.H.-Maine
Keep straight onto I-95 North
At exit 44, take ramp right for I-295 North toward South Portland / Downtown Portland
At exit 28, take ramp right toward Coastal Route / Brunswick / Bath
Keep straight onto US-1 North / Blue Star Memorial Hwy
Keep left to stay on US-1 / Blue Star Memorial Hwy / Mill St
Keep left to stay on US-1
Make a U-turn at Cochran Rd
Turn left onto SR-27
Turn left onto Old County Rd
Road name changes to E Old County Rd
Turn left onto road
Arrive on the left