Virtual Earth API: Simple VEShapeLayer Example

One of the powerful features of the Virtual Earth v5 API is the new VEShapeLayer.  The VEShapeLayer allows you to organize VEShapes into groups.  In the previous VEShape example, the VEShapes were added directly to the map.  When shapes are added directly to the map, those shapes are put in a default shape layer.  In this post, I’ll show you how to create some simple shape layers.

To add a VEShape to a specific VEShapeLayer, you just need to create a VEShapeLayer and some VEShapes, and then call AddShape on the layer.

The following code example shows you how to add a simple pushpin to a shape layer:

var shapeLayer1= new VEShapeLayer();
var shape1 = new VEShape(VEShapeType.Pushpin,new VELatLong(37.776, -122.426));

Once you have shape layer, you can add a shape layer to the VEMap using the AddShapeLayer method:


Each shape layer can hold multiple VEShapes, and they can be different types of VEShapes.  You can have pushpins, polylines, and polygons shapes all in the same shape layer.

The following code example, adds a pushpin, polyline, and polygon all to the same shape layer:

//Create the shape layer
var shapeLayer1= new VEShapeLayer();

//Add a pushpin
var shape1 = new VEShape(VEShapeType.Pushpin,new VELatLong(37.776, -122.426));
shape1.SetTitle(‘Shape 1 (pushpin)’);
shape1.SetDescription(‘in Layer 1’);

//Add a polyline
var shape2= new VEShape(VEShapeType.Polyline, [ new VELatLong(44.5, -122.5), new VELatLong(48.5, -112.3), new VELatLong(42.3, -114.7), new VELatLong(45.1, -100.4), new VELatLong(35.1, -104.2) ]);
shape2.SetTitle(‘Shape 2 (polyline)’);
shape2.SetDescription(‘in Layer 1’);
shape2.SetLineColor(new VEColor(0,0,255,0.3));

//Add a Polygon
var shape3= new VEShape(VEShapeType.Polygon, [ new VELatLong(44.5, -90.8), new VELatLong(48.5, -75.3), new VELatLong(35.5, -80.4), new VELatLong(30.5, -95.8)]);
shape3.SetTitle(‘Shape 3 (polygon)’);
shape3.SetDescription(‘in Layer 1’);
shape3.SetLineColor(new VEColor(0,0,255,0.3));
shape3.SetFillColor(new VEColor(0,0,255,0.3));

//Add the shape layer to the map

In the above code example, I used three additional optional methods on the VEShape objects.  SetCustomIcon allows you to specify a custom icon for the VEShape.  SetLineColor allows you to specify a VEColor of the lines in the shape.  SetFillColor allows you to specify a VEColor to fill in the shape.  The VEColor takes 3 arguments: a red, green, blue, and alpha transparency value.  In the above sample, I set the line color to blue and the transparency to 0.3.

Once you create shape layers on the map, you can then choose to show and hide individual shape layers with the Show and Hide methods on the VEShapeLayer. 

For example, the following code hides and then shows the shape layer:



The following link has a complete working example showing two shape layers — one using blue colors and one using green colors.  I created a simple checkbox control in the top right which can be used to hide/show the individual shape layers.

Simple VEShapeLayer Example

For more information on VEShapeLayers and the v5 Virtual Earth API, see the Virtual Earth Interactive SDK.

Comments (6)

  1. spirit_only says:

    If I want to only load the one VEShapeLayer and not reload the backgroud map, must I use AJAX?

    Can any other solution?

    Can you give me some examples?




  2. keithkin says:

    Currently the Virtual Earth API documented at is a JavaScript-based Ajax API. If you do not want to use Ajax, you can also consider using MapPoint Web Service ( The post at!2BBC66E99FDCDB98!8468.entry describes the different Microsoft options available for developers.

  3. Microsoft Research released a Tiled Vectors Demo which is available for download . The demo shows a way

  4. Microsoft Research released a Tiled Vectors Demo which is available for download . The demo shows a way

  5. One of the new features introduced in the Virtual Earth Map Control API is Pushpin Clustering. When there

  6. One of the new features introduced in the Virtual Earth Map Control API is Pushpin Clustering.