none
Zoom function on bing map ajax V7 RRS feed

  • Question

  • Hi,

    I'm quite new to bing map api, and i've hidden the dashboard of bing map V7 and wants to create a customized one instead.  How can i get the zoom in/out function on my customized image button?

    • Moved by Ricky_Brundritt Friday, March 9, 2012 1:47 PM (From:Bing Maps: Map Control and Web services Development)
    Sunday, January 9, 2011 4:20 AM

Answers

  • Note that it's setView() - not SetView(). You can use the setView() method to change either (or both) of the map center and zoom level.

    Assuming that you want to zoom in whilst retaining the current centrepoint, you only need to pass the new zoom level, like this:

    <!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=7.0"></script>
      <script type="text/javascript">
      var map = null;
      function GetMap()
      { 
       map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
           {credentials: "Bing Key Here",
           center: new Microsoft.Maps.Location(54, -2),
           mapTypeId: Microsoft.Maps.MapTypeId.road,
           zoom: 7,
           showDashboard: false
           });
      }
    
     function ZoomIn()
     {
      var zoomLevel = map.getZoom() + 1;
      map.setView({ zoom: zoomLevel });
     }
    
     function ZoomOut()
     {
      var zoomLevel = map.getZoom() - 1;
      map.setView({ zoom: zoomLevel });
     }
      </script>
     </head>
     <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:400px; height:300px;"></div>
      <button style="border: 0; background: transparent" onclick="ZoomOut();">
       <img src="http://icons.iconarchive.com/icons/visualpharm/must-have/48/Zoom-Out-icon.png" alt="zoom out" />
      </button>
      <button style="border: 0; background: transparent" onclick="ZoomIn();">
       <img src="http://icons.iconarchive.com/icons/visualpharm/must-have/48/Zoom-In-icon.png" alt="zoom in" />
      </button>
     </body>
    </html>
    


    Beginning Spatial with SQL Server http://www.apress.com/book/view/1430218290
    Sunday, January 9, 2011 5:30 PM
    Moderator

All replies

  • Use Map.SetView(ViewOptions) function where you can control the map pan,zoom when user clicks on your customized dashboard using the below properties of ViewOptions

     

     

    • Bearing (to use with pan) -  heading
    • How far to pan - centerOffset
    • Zoom level - zoom ( current zoom + 1 every time user click zoom in button, currentzoom-1 when user clicks on zoomout)

     


    Aditya Tadakaluru MCPD, MCITP, MCTS(Bing Maps)
    Sunday, January 9, 2011 6:55 AM
  • Note that it's setView() - not SetView(). You can use the setView() method to change either (or both) of the map center and zoom level.

    Assuming that you want to zoom in whilst retaining the current centrepoint, you only need to pass the new zoom level, like this:

    <!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=7.0"></script>
      <script type="text/javascript">
      var map = null;
      function GetMap()
      { 
       map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
           {credentials: "Bing Key Here",
           center: new Microsoft.Maps.Location(54, -2),
           mapTypeId: Microsoft.Maps.MapTypeId.road,
           zoom: 7,
           showDashboard: false
           });
      }
    
     function ZoomIn()
     {
      var zoomLevel = map.getZoom() + 1;
      map.setView({ zoom: zoomLevel });
     }
    
     function ZoomOut()
     {
      var zoomLevel = map.getZoom() - 1;
      map.setView({ zoom: zoomLevel });
     }
      </script>
     </head>
     <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:400px; height:300px;"></div>
      <button style="border: 0; background: transparent" onclick="ZoomOut();">
       <img src="http://icons.iconarchive.com/icons/visualpharm/must-have/48/Zoom-Out-icon.png" alt="zoom out" />
      </button>
      <button style="border: 0; background: transparent" onclick="ZoomIn();">
       <img src="http://icons.iconarchive.com/icons/visualpharm/must-have/48/Zoom-In-icon.png" alt="zoom in" />
      </button>
     </body>
    </html>
    


    Beginning Spatial with SQL Server http://www.apress.com/book/view/1430218290
    Sunday, January 9, 2011 5:30 PM
    Moderator