VEShape.SetZIndex Method

  • Article

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>&nbsp;</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>

See Also

Reference

VEShape.GetZIndex Method
VEShape.GetZIndexPolyShape Method