I have an app with Virtual Earth V6.3 control, using pure javascript to add polyline, like shown in the following sample code snippet embedded in a single HTML5 web page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>VE Map with Polyline</title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script type="text/javascript">
function MapLoad() {
// load map
var _map = new VEMap('Map');
_map.LoadMap();
// center point in NY City
var _center = new VELatLong(40.75, -73.99);
// zoom level
_map.SetCenterAndZoom(_center, 14);
// set Map style
_map.SetMapStyle(VEMapStyle.Shaded);
// polyline layer
var _layerPolyline = new VEShapeLayer();
// sample polyline array of coordinates
var _arrPoints = [];
_arrPoints.push(new VELatLong(40.78, -73.984));
_arrPoints.push(new VELatLong(40.76, -73.989));
_arrPoints.push(new VELatLong(40.75, -73.99));
_arrPoints.push(new VELatLong(40.74, -73.991));
_arrPoints.push(new VELatLong(40.73, -73.992));
_arrPoints.push(new VELatLong(40.72, -73.993));
_arrPoints.push(new VELatLong(40.72, -73.994));
_arrPoints.push(new VELatLong(40.73, -73.995));
_arrPoints.push(new VELatLong(40.73, -73.996));
_arrPoints.push(new VELatLong(40.74, -73.997));
// polyline object properties
var _polyLine= new VEShape(VEShapeType.Polyline, _arrPoints);
_polyLine.HideIcon();
_polyLine.SetLineColor(new VEColor(0, 0, 255, 1));
_polyLine.SetFillColor(new VEColor(0, 0, 255, 0));
_polyLine.SetLineWidth(4);
// add polyline to layer
_layerPolyline.AddShape(_polyLine);
// add layer to map
_map.AddShapeLayer(_layerPolyline);
}
</script>
</head>
<body onload="MapLoad();">
<div id="Map" style="position:absolute; height:98%; width:98%;"></div>
</body>
</html>
It works just fine at any zoom level. However, essentially the same code produces strange results in actual app while using ASP.NET 4.5 web forms, namely: polyline disappears at high zoom level (approx above 15).
Q: Any idea regarding the root cause of the problem and how to fix it? Thx.
UPDATE: Issue resolved by upgrading to Bing Maps AJAX Control, Version 7.0 (working: DEMO: bus route polyline is visible at any zoom level). Kudos to Ricky Brundritt (@rbrundritt).
The likely issue has to do with either the missing UTF-9 metatag or doctype. V6.3 is really old and requires the following metatag and doctype to be specified:
Another possible issue is that you have specified any credentials when loading the map. This is in violation of the term of use of Bing Maps.
You can find documentation on how to create a Bing Maps account and key here:
https://msdn.microsoft.com/en-us/library/gg650598.aspx
https://msdn.microsoft.com/en-us/library/ff428642.aspx
I recommend creating a "basic" key for "Public Websites". This will allow you 125,000 free transactions a year.
All that said, you shouldn't be using v6.3. It was replaced by V7 over 5 years ago and will be nearing end of life soon. The documentation for v6.3 was taken offline over a year ago as part of ending life for that version.