Ricky's profileRicky's Bing Maps BlogBlogSkyDrive Tools Help

Blog


    2/22/2009

    Drawing Routes with the VE Web Service

    The Virtual Earth web services are fairly new and as such it does not currently have all the capabilities of it's JavaScript counter part. One key functionality that is not currently available is the ability to draw routes on a map image. This can be done by extending the methods described in the article "VE Imagery Service Polygons and Polylines" found here: http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!497.entry 

    In order to display a route on a map image the following steps will have to be taken:

    1) Geocode the start and end points of the route using the Geocoding service.

    2) Calculate a Route and have the route geometry returned using the Routing Service.

    3) Calculate the best map view for the route path.

    4) Request map image from the imagery service that matches the best map view calculated in step 3.

    5) Draw the route line on the map image using .NET drawing tools.

    6) Draw the route turn points on the map image using .NET drawing tools.

    Below is an example of a route that was created using the above method. Complete sample code can be found here:

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

    image

    2/17/2009

    Advance Polygon shapes in Virtual Earth

    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. 

    function CreateAdvancePolygon(polyPoints)
    {
        if(polyPoints.length > 0)
        {
            var anchor = polyPoints[0][0];
            var points = polyPoints[0].concat(anchor);
            var lines = new Array();
            var line = new VEShape(VEShapeType.Polyline,points);
            line.HideIcon();
            lines.push(line);
            for(var i=1;i<polyPoints.length;i++)
            {
                points = points.concat(polyPoints[i],polyPoints[i][0],anchor);
                var line = new VEShape(VEShapeType.Polyline,polyPoints[i].concat(polyPoints[i][0]));
                line.HideIcon();
                lines.push(line);
            }
            var polygon = new VEShape(VEShapeType.Polygon, points);
            polygon.SetLineColor(new VEColor(0,0,0,0));
            polygon.HideIcon();
            return lines.concat(polygon);
        }
        return null;
    }

     

    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

    image

    2/14/2009

    VEImagery Service Pixel to LatLong calculations

     

    The VEImagery service gives us the ability to render static versions of Virtual Earth Maps. As handy as this is it would also be handy to be able to georeference the image that is returned. The article found here:

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

    explains how to convert from LatLong to Pixel so that custom icons could be added to the map, however the conversion from Pixel to LatLong was not needed at that time. Building on top of the code that was provided in that article the following method can be used to calculate a LatLong value based on the pixel coordinate of a static image. The following formula can be used to perform this calculation.

            /// <summary>
            /// Convert Pixel coordinates to LatLong coordinates
            /// Based on code found here: http://msdn.microsoft.com/en-us/library/cc161076.aspx
            /// </summary>
            /// <param name="offset"></param>
            /// <returns></returns>
            public LatLong PixelToLatLong(Point offset)
            {
                int x = TopLeftCorner.X + offset.X;
                int y = TopLeftCorner.Y + offset.Y;

                double Longitude = (((double)x * 360) / (256 * Math.Pow(2, view.zoom))) - 180;

                double efactor = Math.Exp((0.5 - (double)y / 256 / Math.Pow(2, view.zoom)) * 4 * Math.PI);

                double Latitude = Math.Asin((efactor - 1) / (efactor + 1)) * 180 / Math.PI;

                LatLong latlong = new LatLong();
                latlong.Latitude = Latitude;
                latlong.Longitude = Longitude;

                return latlong;
            }

     

    The complete source code can be downloaded here:

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

    Here is a screen shot of this application in action.

    image

    2/5/2009

    MultiShapes and Virtual Earth

     

    Current Virtual Earth supports pushpins, polylines, and polygons. Another commonly used shape type that is used in other mapping applications is MultiShape or MultiGeometry. Not having this in Virtual Earth has been an issue for some users. I have put together a javascript file that can be loaded after the Virtual Earth map control that creates a MultiShape class that can be used with Virtual Earth. This new shape object takes in an array of VEShape objects and has methods to add and remove shapes from the object. Many of the functionalities that exist in the VEShape class exist in the MultiShape class. The VEMap and VEShapelayer classes have been extended in order to support this adding and removing of the MultiShape objects from the map using the existing methods in Virtual Earth. This javascript file and a simple sample html file can be downloaded here:

    http://cid-e7dba9a4bfd458c5.skydrive.live.com/self.aspx/VE%20Tools/MultiShape.zip

    Note: Since this extends the VEMap and VEShapeLayer classes by accessing undocumented methods in the map control it is possible that those methods may change without notice. This may result in unexpected errors occurring in the future.

    Browsers tested: IE7, FF2

    Virtual Earth versions tested: 5, 6, 6.1, 6.2

    MultiShape Constructor

    var x = new MultiShape(shapes);

    Parameter Descrption
    shapes An array of VEShape objects to be added. Optional.

     

    Public Methods

    These methods can be used in the same way as the equivalent methods in the VEShape object.

    Method Description
    SetDescription Sets the description of the MultiShape object.
    GetDescription Gets the description of the MultiShape object.
    SetTitle Sets the title of the MultiShape object.
    GetTitle Gets the title of the MultiShape object.
    GetAltitudeMode Gets the mode in which the shape's altitude is represented.
    SetAltitudeMode Specifies the mode in which a shape's altitude is represented.
    GetAltitude Returns the altitude for the shape.
    SetAltitude Specifies the altitude for the shape.
    GetCustomIcon Gets the MultiShape object's custom icon.
    SetCustomIcon Sets the MultiShape object's custom icon.
    GetFillColor Gets the fill color and transparency used for all polygons. The default is null, unless a fill color is set for the MultiShape object.
    SetFillColor Sets the fill color and transparency for all polygons in the MultiShape object.
    GetIconAnchor Gets a VELatLong Class object representing the MultiShape's custom icon anchor point.
    SetIconAnchor Sets the info box anchor of the MultiShape object.
    GetLineColor Gets the line color or transparency for all polylines or polygons. The default is null, unless a line color is set for the MultiShape object.
    SetLineColor Sets the line color or transparency for all polylines or polygons in the MultiShape object.
    GetLineWidth Gets the line width of all polylines or polygons. The default is null, unless a line width is set for the MultiShape object.
    SetLineWidth Sets the line width for all polylines or polygons in the MultiShape object.
    Hide Hides the specified MultiShape object from view
    Show Makes the specified MultiShape object visible.
    HideIcon Hides the icon associated with the MultiShape object.
    ShowIcon Shows the icon associated with the MultiShape object.
    SetMinZoomLevel Sets the minimum zoom level at which the shape is visible
    GetMinZoomLevel Gets the minimum zoom level at which the shape is visible
    SetMaxZoomLevel Sets the maximum zoom level at which the shape is visible
    GetMaxZoomLevel Gets the maximum zoom level at which the shape is visible.
    SetPhotoURL Sets the shape's "photo" URL.
    GetPhotoURL Gets the shape's "photo" URL.
    GetMoreInfoURL Gets the shape's "more info" URL.
    SetMoreInfoURL Sets the shape's "more info" URL.
    SetZIndex Sets the z-index value for all shapes in the MultiShape object.
    GetZIndex Gets the z-index of a pushpin shape or pushpin attached to a polyline or polygon. The default is null, unless a z-index is set for the MultiShape object.
    GetID Gets the internal identifier of the MultiShape object.
    GetShapeLayer Gets the reference to the layer containing the specified MultiShape object.
    GetShapeByIndex Retrieves a reference to a VEShape object contained in this MultiShape object based on the specified index.

     

    These methods can be used in the same way as the equivalent methods in the VEShapeLayer class.

    Method Description
    AddShape Add's a VEShape object to the MultiShape object.
    DeleteShape Remove's a VEShape object to the MultiShape object.
    GetShapeByID Retrieves a VEShape object from a MultiShape object by it's id.
    GetBoundingRectangle Retrieves a VELatLongRectangle which encloses all VEShapes that are in the MultiShape object
    GetShapeCount Returns the number of shapes are in the MultiShape object.

     

    These are new methods which can be used with a MultiShape object.

    Method Description
    GetIconLocation Gets a VELatLong Class object of the pushpin associated with the MultiShape object.
    SetIconlocation Sets the location of the pushpin associated with the MultiShape object.
    IndexOfShape Retrieves the index of a VEShape that is in a MultiShape object.

     

    Constructors

    var x = MultShape.GetIconLocation();

    var x = MultShape.SetIconlocation(latlong); where latlong is a VELatLong object.

    var x = MultShape.IndexOfShape(shape); where shape is a VEShape object.

    MultiShape properties

    Property Description
    id The id used to identify the MultiShape object.
    shapes The array of VEShape objects which are contained in the MultiShape object.
    pin The pushpin used associated with the MultiShape object.

     

    Extended VEMap and VEShapeLayer method's

    The following methods have been extended to work when used with MultiShape objects.

    Method Description
    AddShape Adds a MultiShape object to the map/shape layer. All VEShapes in the MultiShape object will have a parentId parameter which is the id of the MultiShape object.
    DeleteShape Deletes a MultiShape object from any layer, including the base map layer.
    DeleteAllShapes Deletes all shapes.
    GetShapeByID Retrieves a reference to a MultiShape object contained in this layer based on the specified ID.
    ShowInfoBox Shows an information box for the shape.