Answered by:
Route Zoom issue in chome

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
- Proposed as answer by Ricky_Brundritt Wednesday, January 29, 2014 1:05 PM
- Marked as answer by Ricky_Brundritt Thursday, February 20, 2014 3:28 PM
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
- Marked as answer by Ricky_Brundritt Thursday, February 20, 2014 3:28 PM
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
- Proposed as answer by Ricky_Brundritt Wednesday, January 29, 2014 1:05 PM
- Marked as answer by Ricky_Brundritt Thursday, February 20, 2014 3:28 PM
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
- Marked as answer by Ricky_Brundritt Thursday, February 20, 2014 3:28 PM
Thursday, January 30, 2014 12:50 PM