Search code examples
javascriptasp.netbing-mapspolylinevirtual-earth

Polyline issue at high zoom level in Virtual Earth V6.3 (Bing) map control

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).

Solution

  • 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:

    <!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"/>

    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. 

    _map = new VEMap('MapNYC');
_map.SetCredentials("YOUR_BING_MAPS_KEY");
_map.LoadMap();

    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.