Advance Shapes in Bing Maps V7

Bing Maps has always supported basic polygons and polylines. Unfortunately we are always left to figure out how to add support for advance shapes such as polygons with holes, multipolygons, and multipolylines. In the past the following solutions have been created:

  • Advance Polygon Shapes for Virtual Earth (Bing Maps v6.3)
  • MultiShapes and Virtual Earth (Bing Maps v6.3)
  • MultiPolygon & MultiLineString Classes for Bing Maps Silverlight

    So why do we need support for these advance shapes? Many GIS tools are built to be OGC compliant. In order to be OGC compliant this tools support these advance shapes. A good example of this is spatial tools in SQL 2008.

    Advance Shapes Module

    To make Bing Maps more OGC compliant I have created a set of tools that can be used to support advance shapes as a modular plugin for version 7. This tool supports three new types of shapes:

  • Circle
  • Polygon
  • GeometryCollection

    The complete source code can be downloaded here.
    image

    Circles

    This class gives the user an easy way to create circle shapes. This class extends from the Microsoft.Maps.Polygon class.

    Constructor

    BMv7.AdvanceShapes.Circle(center, radius, options)
    • center – Microsoft.Maps.Location object that specifies the center of the circle.
    • radius – The radius of the circle in meters.
    • options – A set of polygon options. (optional)

    Methods
    In addition to the methods available in the Polygon class the following methods have been made available:

    Method Description
    getBounds Gets the bounding coordinates of the circle.
    getCenter Gets the center coordinate of the circle.
    getRadius Gets the radius of the circle in meters.
    setCenter Allows you to set the center coordinate of the circle.
    setRadius Allows you to set the radius of the circle in meters.

    Example Usage

    var circle = new BMv7.AdvanceShapes.Circle(new Microsoft.Maps.Location(45, -110), 30000, polygonOptions);
    map.entities.push(circle);

    Polygon

    This class supports polygons with holes. This class extends from the Microsoft.Maps.EntityCollection class and consists of a base polygon and multiple polylines that make up the stroke lines of the polygon.

    Constructor

    BMv7.AdvanceShapes.Polygon(rings, options)
    • rings – A 2d array of coordinate arrays which define the first exterior ring and all interior rings.
    • options – A set of polygon options. (optional)

    Methods

    In addition to the methods available in the EntityCollection class the following methods have been made available:

    Method Description
    getBaseEntity Gets the base polygon that is used to create this shape.
    getBounds Gets the bounding coordinates of the polygon.
    getOptions Gets the polygon options.
    getRings Gets the 2D array of coordinates used to define the rings of the complex polygon.
    setOptions Sets the polygon options.
    setRings Sets the 2D array of coordinates used to define the complex polygon.

    Example Usage

    var extRing = [new Microsoft.Maps.Location(40, -100), new Microsoft.Maps.Location(45, -100), new Microsoft.Maps.Location(45, -90), new Microsoft.Maps.Location(40, -90)];
    var innerRing1 = [new Microsoft.Maps.Location(41, -99), new Microsoft.Maps.Location(43, -97), new Microsoft.Maps.Location(41, -95)];
    var innerRing2 = [new Microsoft.Maps.Location(44, -91), new Microsoft.Maps.Location(43, -93), new Microsoft.Maps.Location(44, -95)];

    var polygon = new BMv7.AdvanceShapes.Polygon(rings, options);
    map.entities.push(polygon);

    GeometryCollection

    This class allows you to treat a collection of shapes as a single shape. This class extends from the Microsoft.Maps.EntityCollection class. This class can also be used to create Multipolygon and Multipolyline shapes.

    Constructor

    BMv7.AdvanceShapes.GeometryCollection()

    Methods

    In addition to the methods available in the EntityCollection class the following methods have been made available:

    Method Description
    addHandler Allows you to assign an event to the GeometryCollection. When called the event information passed will be added to all shapes in the collection. This method returns a handlerId which can be used to remove the event later.
    Example:
    var handlerId = myGeometryCollection.addHandler(‘eventName’, callbackFunction);
    removeHandler Removes an event from the GeometryCollection. This method takes in a handlerId that was returned from the addHandler method.
    Example: myGeometryCollection.removeHandler(‘eventName’);
    setOptions This method overwrites the setOptions method of the base EntityCollection class and sets the options of all shapes within the collection. All option properties for polygon, polyline, and pushpin classes can be passed in.
    Example: myGeometryCollection.setOptions({visible:false});

    Example Usage

    var gc = new BMv7.AdvanceShapes.GeometryCollection();
    gc.push(new BMv7.AdvanceShapes.Circle(new Microsoft.Maps.Location(40, -110), 50000, polygonOptions));
    gc.push(new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(35, -110)));
    map.entities.push(gc);

    Conclusion

    By using these new shapes you will be able to better support advance shapes that may come from OGC compliant systems such as SQL 2008. You can download the complete source code here.

    Known bug

    I started writing this modular plugin a few weeks ago but hesitated to push it out to the web as there is one bug I  haven’t been able to work around yet. The bug appears to be a limitation of the Bing Maps control. This issue is that when you have EntityCollections overlapping each other the top EntityCollection blocks mouse events from making it through to shapes below the collection. To reduce the significance of this issue I’ve set the z-index of the entity collections in this tool to –1. This partially corrects the issue but it is a bit buggy. If anyone figures out a solution for this, let me know.

    About these ads

    2 thoughts on “Advance Shapes in Bing Maps V7

    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