none
How to zoom the map based on the polylines' length ?? RRS feed

  • Question

  • I want to zoom my map to maximum level possible, and just enough to ensure that all the line are visible. And also center the map accordingly.

    I tried using map.setBounds() , but this does not seem to work.I passed may array of LatLongs to get a LocationRect, and then setting this to map.. but it does not changes the zoom of the map.

    Can anyone tell me a solution for this ??

    Monday, July 2, 2012 9:31 AM

Answers

  • Hello,

    You can easily do that by using the right methods.
    See setView() of the Map class: http://msdn.microsoft.com/en-us/library/gg427609

    Here is a complete working example:

    <!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" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.js"></script>
    
          <script type="text/javascript">
    
             var map = null; 
             var pinInfobox = null;        
    
             function GetMap()
             {
                // Initialize the map
                map = new Microsoft.Maps.Map($("#myMap").get(0), {credentials:"Bing Maps Key"}); 
    
    			var locs = [];
    			locs.push(new Microsoft.Maps.Location(50, 3));
    			locs.push(new Microsoft.Maps.Location(52, 3.5));
    			locs.push(new Microsoft.Maps.Location(54, 8));
    			locs.push(new Microsoft.Maps.Location(50, 4));
    			
                var line = new Microsoft.Maps.Polyline(locs); 
                map.entities.push(line);
    
    			var viewRect = Microsoft.Maps.LocationRect.fromLocations(locs);			
    			map.setView({bounds: viewRect});
             }
    		
    	</script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="overflow: visible !important; position:relative; width:500px; height:500px;"></div>       
    </html>
    Hope this will help.

    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/

    Monday, July 2, 2012 1:10 PM
    Moderator

All replies

  • Hello,

    You can easily do that by using the right methods.
    See setView() of the Map class: http://msdn.microsoft.com/en-us/library/gg427609

    Here is a complete working example:

    <!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" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.js"></script>
    
          <script type="text/javascript">
    
             var map = null; 
             var pinInfobox = null;        
    
             function GetMap()
             {
                // Initialize the map
                map = new Microsoft.Maps.Map($("#myMap").get(0), {credentials:"Bing Maps Key"}); 
    
    			var locs = [];
    			locs.push(new Microsoft.Maps.Location(50, 3));
    			locs.push(new Microsoft.Maps.Location(52, 3.5));
    			locs.push(new Microsoft.Maps.Location(54, 8));
    			locs.push(new Microsoft.Maps.Location(50, 4));
    			
                var line = new Microsoft.Maps.Polyline(locs); 
                map.entities.push(line);
    
    			var viewRect = Microsoft.Maps.LocationRect.fromLocations(locs);			
    			map.setView({bounds: viewRect});
             }
    		
    	</script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="overflow: visible !important; position:relative; width:500px; height:500px;"></div>       
    </html>
    Hope this will help.

    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/

    Monday, July 2, 2012 1:10 PM
    Moderator
  • Sorry as "I tried using map.setBounds() " was a type. I had used exactly the same methods as you have mentioned here.  The only variation being that i am using bing maps with JSNI. But with the above given code also its not working.

    Here is my peice of code:

    This is my java method for setting the zoom:

    private int zoomMapWidget(MapWidget mapObj, final List<Double> latLong)
      {
        final LatLng[] originLtArr;
        // Get the lat& long points
        final LatLng originPoint1 = LatLng.newInstance(latLong.get(0), latLong.get(1));
        final LatLng originPoint2 = LatLng.newInstance(latLong.get(2), latLong.get(3));
        originLtArr = new LatLng[] { originPoint1, originPoint2 };
       
         if (dualDisplay)
        {
          mapObj.setSize(Constant.DUAL_MAP_WIDTH_PX, Constant.DUAL_MAP_MAX_HEIGHT_PX);
        } else
        {
          mapObj.setSize(Constant.DUAL_MAP_MAX_WIDTH_PX, Constant.DUAL_MAP_MAX_HEIGHT_PX);
        }
         mapObj.setZoomLevel(18);
    
        mapObj.setBounds(LatLng.toJsArray(originLtArr));
        int mapZoom = mapObj.getZoomLevel();
        // Set the calculated zoom
        if (mapZoom < 2)
        {
          mapZoom = 2;
        }
        //mapObj.setSize(Constant.DUAL_MAP_MAX_WIDTH_PERCENT, //Constant.DUAL_MAP_MAX_WIDTH_PERCENT);
        // mapObj.setCenter((LatLng) centerBounds.getCenter());
        System.out.println();
        // mapObj.addOverlay(Pushpin.newInstance((LatLng)
        // centerBounds.getCenter()));
        // mapObj.setZoomLevel(mapZoom);
        return mapZoom;
      }

    Here is a wrapper for the java script object:

    public class MapWidget extends Composite
    {
      private final SimplePanel mapConatiner = new SimplePanel();
      private BingMaps map;
      
    
      public MapWidget(String key)
      {
        initWidget(mapConatiner);
        mapConatiner.getElement().setAttribute("cursor", "default");
        map = (BingMaps) BingMaps.loadDefaultMap(mapConatiner.getElement(), key);
      }
      
      public MapWidget(MapOptions options)
      {
        initWidget(mapConatiner);
        mapConatiner.getElement().setAttribute("cursor", "default");
        map = (BingMaps) BingMaps.loadMap(mapConatiner.getElement(), options);
      }
    
      
      public void setZoomLevel(int value)
      {
        map.setZoom(value);
      }
      
      public void setCenter(LatLng value)
      {
        map.setCenter(value.getLatitude(), value.getLongitude());
      }
      public void setBounds(LatLngBounds value)
      {
        map.setBounds(value);
      }
      
      public void setBounds(JsArray<LatLng> points)
      {
        map.setBounds(points);
      }
      
      public int getZoomLevel()
      {
       return map.getZoom();
      }
      
      public void setOptions(MapOptions ops)
      {
        map.setOptions(ops);
      }
      
      public JavaScriptObject getEntityLayer()
      {
       return map.getEntityLayer();
      }
      public BingMaps getMap()
      {
        return map;
      }
    
    
      public void setMap(BingMaps map)
      {
        this.map = map;
      }
      
      public void clearOverlays()
      {
        map.clearOverlays();
      }
    
      public void addOverlay(Entity entity)
      {
        map.addOverlay(entity);
      }
      public MapOptions getOptions()
      {
        return map.getOptions();
      }
    
      public Entity getEntityById(int id)
      {
        return map.getEntity(0);
      }
    
      public int getTargetZoom()
      {
        return map.getTargetZoom();
      }
    
      public int getEntityId(Entity entity)
      {
        return map.getId(entity);
      }
      
      public Entity popOverlay()
      {
       return map.popOverlay();
      }
      
      public Entity removeAt(int id)
      {
        return map.remove(id);
      }
     
     
    }

    And here is the real javascript code:

    public class BingMaps extends JavaScriptObject
    {
      
      public final native int getId(Entity entity)/*-{
    		return this.entities.indexOf(entity);
      }-*/;
      protected BingMaps()
      {
      }
    
      /**
       * @param element
       * @return
       */
      public static native JavaScriptObject loadMap(Element element, MapOptions options)
      /*-{
    		var map = new $wnd.Microsoft.Maps.Map(element, options);
    		element.oncontextmenu = function() {
    			return false;
    		}
    		map.getRootElement().style.cursor = "crosshair";
    		$wnd.Microsoft.Maps.Events.addHandler(map, "mousemove", function(e) {
    			// get the HTML DOM Element that represents the Map
    				var mapElem = map.getRootElement();
    				if (!(e.targetType === "map")) {
    					// Mouse is over Map
    				mapElem.style.cursor = "pointer";
    			} else {
    				mapElem.style.cursor = "crosshair";
    			}
    		});
    		return map;
    
      }-*/;
      
      /**
       * @param element
       * @return
       */
      public static native JavaScriptObject loadDefaultMap(Element element, String key)
      /*-{
    		var map = new $wnd.Microsoft.Maps.Map(element, {
    			credentials : key
    		});
    		element.oncontextmenu = function() {
    			return false;
    		}
    
    		return map;
      }-*/;
    
      public final native void setBounds(LatLngBounds value)
      /*-{
    		this.setView( {
    			bounds : value
    		});
    
      }-*/;
      public final native void setBounds(JsArray<LatLng> points)
      /*-{
    		var rect = new $wnd.Microsoft.Maps.LocationRect.fromLocations(points);
    		this.setView( {
    			bounds : rect
    		});
    
      }-*/;
    
      public final native void setCenter(double lat, double lng)/*-{
    		this.setView( {
    			center : new $wnd.Microsoft.Maps.Location(lat, lng)
    		})
      }-*/;
      
       public final native void setZoom(int value)/*-{
    		this.setView( {
    			zoom : value
    		})
      }-*/;
       
       public final native int getZoom()/*-{
    		return this.getZoom()
      }-*/;
    	
       public final native void clearOverlays()/*-{
    		this.entities.clear()
      }-*/;
       
       public final native void addOverlay(JavaScriptObject entity)/*-{
    		this.entities.push(entity);
      }-*/;
      
      public final native MapOptions getOptions()
      /*-{
    		return this.getOptions();
      }-*/;
    
      public final native void setOptions(MapOptions ops)
      /*-{
    		this.setOptions(ops);
    
      }-*/;
      
      public final native Entity popOverlay()
      /*-{
    		return this.entities.pop();
      }-*/;
      public final native JavaScriptObject getEntityLayer()
      /*-{
    		return new $wnd.Microsoft.Maps.EntityCollection();
      }-*/;
      public final native Entity remove(int id)
      /*-{
    		return this.entities.removeAt(id);
      }-*/;
    
      

    Tuesday, July 3, 2012 5:04 AM
  • Hello,

    My code presented here works perfectly and is really simple.
    I think the problem is located in your JavaScript code generation, you should try to get a view on the true generated JavaScript in the end in your page to understand what is done since there are lots of things that seems to be not simple here.

    You should take a look at what is generated and what is used as parameters here:

      public final native void setBounds(JsArray<LatLng> points)
      /*-{
    		var rect = new $wnd.Microsoft.Maps.LocationRect.fromLocations(points);
    		this.setView( {
    			bounds : rect
    		});
    
      }-*/;
    

    First, you should really read the JavaScript you got in your output and see what line break your JS code in your browser.


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/

    Tuesday, July 3, 2012 8:19 AM
    Moderator