locked
Route Zoom issue in chome RRS feed

  • Question

  • Hi,

    We have facing some issue when we tried to set zoom level of plotted route. The route is plotted correctly but the zoom level is not set correctly.

    Here is some more info. We have select the address and click on Get Route button then it will open the new child window(jquery window) and plot the route but it did not set the zoom level correctly but when we came back to main page and again click on get route then it set zoom level correctly. It worked some times but not all times .It happed only in chome/firefox but it works in internet explorer.   

    Here some code we are using.

    //create map object    
            var myMap = new Microsoft.Maps.Map(mapId[0],
                         {
                             credentials: cred,
                             mapTypeId: Microsoft.Maps.MapTypeId.road
                         });

    var routeReq = "http://dev.virtualearth.net/REST/v1/Routes?"; 

    //add selected address into waypoints
            for (add = 0; add < _routeAdd.length; add++) {

                waypoints += "&wp." + add + "=" + _routeAdd[add].Location.latitude + "," + _routeAdd[add].Location.longitude;
            }

            routeReq += waypoints + "&routePathOutput=Points&output=json&jsonp=routeCallback&distanceUnit=" + distanceUnit + "&key=" + cred;

            //call this function is used to 
            Route(routeReq );

     //to set zoom level we are using following code 

       bbox = result.resourceSets[0].resources[0].bbox;
                viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
                myMap.setView({ bounds: viewBoundaries });

     

     

     

     


           

     

     

     

     

     

    Wednesday, January 29, 2014 4:42 AM

Answers

  • I'm guessing the route is completely in view but your pushpins are being hidden due to the view being bounded to the coordinates (this does not take into consideration the pixel size of the pushpins). In the setView method add a padding property like this:

    myMap.setView({ bounds: viewBoundaries, padding: 100 });

    To make things easier don't use the REST services to do your routing. Use the built in directions module that is in the map control. http://msdn.microsoft.com/en-us/library/hh312802.aspx


    http://rbrundritt.wordpress.com

    Wednesday, January 29, 2014 1:05 PM
  • Ok, if it always working in internet explorer than this leads me to believe the issue is in HTML and not JavaScript. Make sure you have specified a position, width and height value on the div for your map. For example:

    <div id='myMap' style=";width:600px;height:400px;"></div>  

    Also ensure that you have the proper doctype and meta tag specified in the header of your page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    These tend to be the number one cause of issues that appear in different browsers.

     

    http://rbrundritt.wordpress.com

    Thursday, January 30, 2014 12:50 PM

All replies

  • I'm guessing the route is completely in view but your pushpins are being hidden due to the view being bounded to the coordinates (this does not take into consideration the pixel size of the pushpins). In the setView method add a padding property like this:

    myMap.setView({ bounds: viewBoundaries, padding: 100 });

    To make things easier don't use the REST services to do your routing. Use the built in directions module that is in the map control. http://msdn.microsoft.com/en-us/library/hh312802.aspx


    http://rbrundritt.wordpress.com

    Wednesday, January 29, 2014 1:05 PM
  • Hi,

    We tried this "myMap.setView({ bounds: viewBoundaries, padding: 100 });" but no luck we still have same issue.

    Here is screenshot we are getting but some it will zoom to proper level and it always work in internet explorer.

    Can you give some hint so I try to resolve this issue.

    Thursday, January 30, 2014 12:03 PM
  • Ok, if it always working in internet explorer than this leads me to believe the issue is in HTML and not JavaScript. Make sure you have specified a position, width and height value on the div for your map. For example:

    <div id='myMap' style=";width:600px;height:400px;"></div>  

    Also ensure that you have the proper doctype and meta tag specified in the header of your page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    These tend to be the number one cause of issues that appear in different browsers.

     

    http://rbrundritt.wordpress.com

    Thursday, January 30, 2014 12:50 PM