VEMap.SetZoomLevel 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 view of the map to the specified zoom level.

VEMap.SetZoomLevel(zoomLevel);

Parameters

Parameter Description

zoomLevel

The zoom level for the map. Valid values range from 1 through 19

Remarks

Higher zoom levels show more detail on the map, and you appear closer to the ground.

Some areas do not have high-resolution aerial photography and therefore may not support the highest zoom levels.

If you are setting both the center point and the zoom level, you should use the VEMap.SetCenterAndZoom Method, rather than calling the VEMap.SetCenter Method and the SetZoomLevel method separately.

Example

<!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 latLong = null;
         var zoomLevel = 3;
 
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();

            map.SetZoomLevel(zoomLevel);

            // zoom to cursor and center
            map.SetMouseWheelZoomToCenter(false);

            document.getElementById('txtZoom').value = zoomLevel;
            map.AttachEvent("onclick", GetLatLong);
            latLong = map.GetCenter();
            divInfo.innerHTML = latLong;
         }  
     
         function GetLatLong(e)
         {
            //Get the pixel coordinates from the click event, convert to LatLong value
            var x = e.mapX;
            var y = e.mapY;
            pixel = new VEPixel(x, y);
            latLong = map.PixelToLatLong(pixel);
            divInfo.innerHTML = latLong;
         }
     
         function SetCenterAndZoom()
         {   
            map.SetCenterAndZoom(latLong, zoomLevel);
         }
     
         function SetCenter()
         {
            map.SetCenter(latLong);
         }
     
         function SetZoom()
         {
            map.SetZoomLevel(zoomLevel);
         }
     
         function ZoomIn()
         {
            //Increase zoom level by a factor of 1
            map.ZoomIn();
            document.getElementById('txtZoom').value = map.GetZoomLevel();
         }
     
         function ZoomOut()
         {
            //Decrease zoom level by a factor of 1
            map.ZoomOut();
            document.getElementById('txtZoom').value = map.GetZoomLevel();
         }
     
         function ValidateEntry()
         {
           //Check to make sure zoom level is within range
           if (document.getElementById('txtZoom').value > 0 && document.getElementById('txtZoom').value <= 19)
           {
              zoomLevel = document.getElementById('txtZoom').value;
           }
           else
           {
              alert("Enter a value between 1 and 19.");
           }
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      Click the map to select a center point.<br />
      <div id="divInfo">&nbsp;<br /></div>
      Zoom Level: <input id="txtZoom" type="text" value="" onchange="ValidateEntry()"/><br />
      <input id="btnSetCZ" type="button" value="Set Center and Zoom" onclick="SetCenterAndZoom()"><br />
      <input id="btnSetCenter" type="button" value="Set Center" onclick="SetCenter()"><br />
      <input id="btnSetZoom" type="button" value="Set Zoom" onclick="SetZoom()"><br />
      <input id="btnZoomIn" type="button" value="Zoom in by 1" onclick="ZoomIn()">
      <input id="btnZoomOut" type="button" value="Zoom out by 1" onclick="ZoomOut()">
   </body>
</html>

See Also

Reference

VEMap.SetMouseWheelZoomToCenter Method