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

Question

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

score 1 · Accepted Answer · answered Apr 23 '15 at 21:24

1

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.

answered Apr 23 '15 at 21:24

rbrundritt

16,570
2
21
46

Many thanks for your answer (accepted) and rather insightful comments. It seems like VE 6.3 is not a good fit for any forward-looking app dev, but I am surprised that it requires key/credentials for web apps (prior versions, to the best of my knowledge, did not require that). I have a key for the Desktop Win app, which I use for my WPF dev, but not for the web apps. Even more confusing: if I put this key in my javascript in plain text (as per your example), then it will be visible for the entire world. Would you please comment on that issue? Thanks and regards, Alex Bell – Alexander Bell Apr 26 '15 at 16:25
1

Bing Maps introduced an authentication method back around version 5. This authentication method changed from a id/password method to a key method with the release of v6. The map control does work without authentication, but is against the terms of use. By not using a key their is a legal risk. Another risk is that since you are not authenticating the map the Bing Maps team is unaware that you are using v6.3, so you haven't been receiving any notifications about it's end of life. Anyone can create a key and it being visible in plain text is fine. Note, even in WPF it's easy to extract a key. – rbrundritt Apr 27 '15 at 16:09
Thanks @rbrundritt, I've got your point. Actually, I have all 3 keys for my Bing acct, including the one that you have mentioned, so I am gonna use it for my web app. Beyond that key/credentials issue, it seems like V6.3 is indeed old and kinda flawed technology, so I consider either upgrade to V7, or switching to Google Map. Anyway, thanks for your time and kind attention. My best, Alex B. – Alexander Bell Apr 27 '15 at 20:01

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

1 Answers1