VEShape.SetZIndex Method
You are not viewing the latest version of the AJAX control. Bing Maps AJAX V7 is the recommended JavaScript control for Bing Maps. If you need this documentation, it is available in as a CHM or PDF download.
Sets the z-index value for a shape.
VEShape.SetZIndex(icon, polyshape);
Parameters
Parameter | Description |
---|---|
icon |
Optional. An integer specifying the z-index for the shape's icon (or for the pushpin if the shape is a pushpin). If this value is null or undefined the z-index is not changed. |
polyshape |
Optional. An integer specifying the z-index for the shape. This parameter is ignored if the shape is a pushpin. If this value is null or undefined the z-index is not changed. |
Remarks
Although both parameters are optional, at least one parameter must be supplied.
Z-indices define the order in which items are drawn. Shapes with higher z-indices are drawn on top of shapes with lower z-indices.
All shapes have the same default z-index. 1000 for icon and 50 for polyshape. The following table lists the z-indices for most objects.
Object | Z-Index |
---|---|
Shape Icon |
1000 |
Route Icon |
998 |
ERO ERO Progress Bar |
500 |
Disambiguation Box Message box |
201 |
Find control |
199 |
Dashboard Minimap |
100 |
Route line |
60 |
Shape Polyshape |
50 |
Copyright Scalebar |
31 or 30 |
Logo |
30 |
Traffic tiles |
2 |
Custom tiles Map Road/Aerial/Hybrid tiles |
1 |
VE Container |
0 |
Examples
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script type="text/javascript">
var map = null;
var zLevel;
var minZoom = 3;
var maxZoom = 6;
var kindaRed = new VEColor(255, 0, 0, 0.7);
var kindaGreen = new VEColor(0, 255, 0, 0.7);
var kindaBlue = new VEColor(0, 0, 255, 0.7);
var shape1 = null;
var shape2 = null;
var shape3 = null;
var topLeftS1 = new VELatLong(45.33, -111.27);
var topRightS1 = new VELatLong(45.33, -96.86);
var botRightS1 = new VELatLong(37.30, -96.86);
var botLeftS1 = new VELatLong(37.30, -111.27);
var topLeftS2 = new VELatLong(41.24, -109.51);
var topRightS2 = new VELatLong(41.24, -94.39);
var botRightS2 = new VELatLong(33.50, -94.39);
var botLeftS2 = new VELatLong(33.50, -109.51);
var topLeftS3 = new VELatLong(49.32, -104.32);
var topRightS3 = new VELatLong(49.32, -89.47);
var botRightS3 = new VELatLong(36.88, -89.47);
var botLeftS3 = new VELatLong(36.88, -104.32);
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
shape1 = new VEShape(VEShapeType.Polygon, new Array(topLeftS1, topRightS1, botRightS1, botLeftS1));
shape1.HideIcon();
shape1.SetFillColor(kindaRed);
zLevel = shape1.GetMinZoomLevel();
if(zLevel == null || zLevel < minZoom)
{
shape1.SetMinZoomLevel(minZoom);
}
zLevel = shape1.GetMaxZoomLevel();
if(zLevel == null || zLevel > maxZoom)
{
shape1.SetMaxZoomLevel(maxZoom);
}
shape2 = new VEShape(VEShapeType.Polygon, new Array(topLeftS2, topRightS2, botRightS2, botLeftS2));
shape2.HideIcon();
shape2.SetFillColor(kindaGreen);
zLevel = shape2.GetMinZoomLevel();
if(zLevel == null || zLevel < minZoom)
{
shape2.SetMinZoomLevel(minZoom);
}
zLevel = shape2.GetMaxZoomLevel();
if(zLevel == null || zLevel > maxZoom)
{
shape2.SetMaxZoomLevel(maxZoom);
}
shape3 = new VEShape(VEShapeType.Polygon, new Array(topLeftS3, topRightS3, botRightS3, botLeftS3));
shape3.HideIcon();
shape3.SetFillColor(kindaBlue);
zLevel = shape3.GetMinZoomLevel();
if(zLevel == null || zLevel < minZoom)
{
shape3.SetMinZoomLevel(minZoom);
}
zLevel = shape3.GetMaxZoomLevel();
if(zLevel == null || zLevel > maxZoom)
{
shape3.SetMaxZoomLevel(maxZoom);
}
map.AddShape(shape1);
map.AddShape(shape2);
map.AddShape(shape3);
}
function MoveShape(s)
{
// Get current highest zindex
var zindex = shape1.GetZIndexPolyShape();
var tz;
tz = shape2.GetZIndexPolyShape();
if(tz > zindex)
{
zindex = tz;
}
tz = shape3.GetZIndexPolyShape();
if(tz > zindex)
{
zindex = tz;
}
// Increment new high zindex
zindex++;
if(s == "1")
{
shape1.SetZIndex(null, zindex);
}
if(s == "2")
{
shape2.SetZIndex(null, zindex);
}
if(s == "3")
{
shape3.SetZIndex(null, zindex);
}
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:600px; height:400px;"></div>
<p> </p>
<input id="btnMvS1" type="button" value="Move Red Shape to front" name="moves1" onclick="MoveShape('1');">
<br/>
<input id="btnMvS2" type="button" value="Move Green Shape to front" name="moves2" onclick="MoveShape('2');">
<br/>
<input id="btnMvS3" type="button" value="Move Blue Shape to front" name="moves3" onclick="MoveShape('3');">
</body>
</html>