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:
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:
The complete source code can be downloaded here.![]()
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); |
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.
I took the opportunity to jslint the file, and correct a few minor bugs: http://bit.ly/Uu0iMM
One question: have you done much testing with this in mobile Safari?
Don’t use this code. A support control has been released by Microsoft and this workaround is no longer needed. Take a look at this documentation: http://msdn.microsoft.com/en-us/library/hh921952.aspx
Hi ! I was glad I have found this post until I understood not to use the code… ;-) I have looked at the Polygon documentation in AdvancedShapes but I didn’t see anything equivalent to
BMv7.AdvanceShapes.Circle(center, radiusInMeter, options)
I tried to create one circle by building an array of 360 locations but that didn’t work yet… I am sure it can be done but I didn’t found it yet… Could you please tell me if there is an API I missed or any plan for one to be released ?
Thanks a lot,
Claude
There is a circle module here: http://bingmapsv7modules.codeplex.com/
Pingback: Complex Polygons in Bing Maps | Maps Blog
hai anybody have the idea to save the bing map image generated from the ajax control
having polygon,circles etc
Yup. I actually have a code sample that does this by sending all the data on the map to the server and using System.Drawing to generate an image.