Multiple Routes in Virtual Earth

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:

//create a common route object to store only the information we need
function Route() {
    this.polyline = null;
    this.icons = [];
    this.directions = "";
    this.routeTitle = "";
    this.routeColorHex = "";
    this.routeColorRGB = new VEColor(0,0,255,1);
}

Route.prototype.ShowRouteInfo = function() {
    //hide all pins on pin layer
    HideAllPins();

    //add directions to directions panel
    document.getElementById(‘directions’).innerHTML = this.directions;

    //show route icons
    for (var i = 0, j = this.icons.length; i < j; i++) {
        this.icons[i].Show();
    }

    //set the map view to show the route
    map.SetMapView(this.polyline.GetPoints());
}

 

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:

//copy a route pin so that we can delete the route from the map
function CopyRoutePin(shape) {
    var newShape = new VEShape(shape.GetType(), shape.GetPoints());
    newShape.Title = shape.GetTitle();
    newShape.Description = shape.GetDescription();

    //using the GetCustomIcon method on a route pin gets the standard red pin
    //The _customIcon property of the route icon is the url to the correct icon
    var customIcon = new VECustomIconSpecification();
    customIcon.TextContent = " ";
    customIcon.Image = shape._customIcon;
    newShape.SetCustomIcon(customIcon);

    return newShape;
}

 

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:

image

Advertisements

3 thoughts on “Multiple Routes in Virtual Earth

  1. Hi Rick,

    First of all, thank you so much for your wonderful post, I really appreciate it. I do have some questions though. Could you please let me know if there is any way to display multiple routes on one button click if I have all the routes information?

    Also, is it feasible to delete only one route? If yes, what would be the best approach?

    Please answer to my questions when you get chance as I need some guidance ASAP. Thanks a lot in advance.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s