none
how to detect zoom change

    Question

  • I'm trying to detect when zoom is changed in my map, I tried using these:

    Microsoft.Maps.Events.addHandler(map, "targetviewchanged", console.log('targetviewchanged'));
    Microsoft.Maps.Events.addHandler(map, "viewchangestart", console.log('viewchangestart'));

    but is triggered only once when the map changes

    How can I detect the zoom change only?

    Thank you in advance
    Thursday, February 13, 2014 1:08 PM

Answers

  • Try using the viewchangeend event. The event ha a property called linear. When this is true then the map was panned. If it is false then the map was zoomed. Here is a simple code sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>Event view change start</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('myMap'), {credentials: 'Your Bing Maps Key'});
    		
    		Microsoft.Maps.Events.addHandler(map, 'viewchangeend', viewChanged);
          }
          
          function viewChanged(e)
          {
    		 if(!e.linear){
    			alert('mapzoomed');
    		 }
          }
          </script>
       </head>
       <body onload="getMap();">
          <div id='myMap' style="; width:400px; height:400px;"></div>
       </body>
    </html>
    

    Thursday, February 13, 2014 2:52 PM
  • Ah, I see the issue. I originally was using the viewchange event and not the viewchangeend event. Another way to determine if the map was zoomed is to keep track of the last known zoom level. Here is a sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>Event view change start</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, lastZoomLevel = 0;
    	  
          function getMap()
          {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
    		
    		lastZoomLevel = map.getZoom();
    		Microsoft.Maps.Events.addHandler(map, 'viewchangeend', viewChanged);
          }
          
          function viewChanged(e)
          {
    		 if(lastZoomLevel != map.getZoom()){
    			lastZoomLevel = map.getZoom();
    			alert("Map Zoomed");
    		 }
          }
          </script>
       </head>
       <body onload="getMap();">
          <div id='myMap' style="; width:400px; height:400px;"></div>
       </body>
    </html>


    http://rbrundritt.wordpress.com

    Thursday, February 13, 2014 5:40 PM

All replies

  • Try using the viewchangeend event. The event ha a property called linear. When this is true then the map was panned. If it is false then the map was zoomed. Here is a simple code sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>Event view change start</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('myMap'), {credentials: 'Your Bing Maps Key'});
    		
    		Microsoft.Maps.Events.addHandler(map, 'viewchangeend', viewChanged);
          }
          
          function viewChanged(e)
          {
    		 if(!e.linear){
    			alert('mapzoomed');
    		 }
          }
          </script>
       </head>
       <body onload="getMap();">
          <div id='myMap' style="; width:400px; height:400px;"></div>
       </body>
    </html>
    

    Thursday, February 13, 2014 2:52 PM
  • Thank you for help me :)

    I was trying but the linear property returns false each time, (doesn't matter if is zoomed or panned), i think is not receiveing anything in e.linear.

    This is my current code:

    function startm2(){
    	var mapOptions = {
    		credentials: "asdf asdf",
    		enableClickableLogo: false,
    		enableSearchLogo: false,
    		mapTypeId: Microsoft.Maps.MapTypeId.aerial
    	}
    	radar = new Microsoft.Maps.Map(document.getElementById("map_canvas"),mapOptions);
    	
    	var viewRect = Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(maptop,maplft), new Microsoft.Maps.Location(mapbtn,maprgt));
    
    	radar.setView({bounds: viewRect});
    	
    	Microsoft.Maps.Events.addHandler(radar, 'viewchangeend', viewChanged);
    }
    function viewChanged(e){
    	if(e.linear)console.log('panned');
    	else console.log('zoomed');
    }

    The output is always "zoomed" :(

    Thursday, February 13, 2014 4:06 PM
  • Ah, I see the issue. I originally was using the viewchange event and not the viewchangeend event. Another way to determine if the map was zoomed is to keep track of the last known zoom level. Here is a sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>Event view change start</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, lastZoomLevel = 0;
    	  
          function getMap()
          {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
    		
    		lastZoomLevel = map.getZoom();
    		Microsoft.Maps.Events.addHandler(map, 'viewchangeend', viewChanged);
          }
          
          function viewChanged(e)
          {
    		 if(lastZoomLevel != map.getZoom()){
    			lastZoomLevel = map.getZoom();
    			alert("Map Zoomed");
    		 }
          }
          </script>
       </head>
       <body onload="getMap();">
          <div id='myMap' style="; width:400px; height:400px;"></div>
       </body>
    </html>


    http://rbrundritt.wordpress.com

    Thursday, February 13, 2014 5:40 PM
  • Thats a good idea!

    Its works, thank you so much

    Thursday, February 13, 2014 7:04 PM