This topic has not yet been rated - Rate this topic

VEMap.ZoomOut Method

Bing Services

Decreases the map zoom level by 1.


VEMap.ZoomOut();

Remarks

Valid values range from 1 through 19. If you call the ZoomOut method when the current zoom level is already at the minimum, the zoom level does not change.

Example

JScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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="http://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>

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)