javascript - Polyline issue at high zoom level in Virtual Earth V6.3 (Bing) map control -
i have app virtual earth v6.3 control, using pure javascript add polyline, shown in following sample code snippet embedded in single html5 web page:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ve map 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 layer _layerpolyline.addshape(_polyline); // add layer map _map.addshapelayer(_layerpolyline); } </script> </head> <body onload="mapload();"> <div id="map" style="position:absolute; height:98%; width:98%;"></div> </body> </html>
it works fine @ zoom level. however, same code produces strange results in actual app while using asp.net 4.5 web forms, namely: polyline disappears @ high zoom level (approx above 15).
q: idea regarding root cause of problem , how fix it? thx.
update: issue resolved upgrading bing maps ajax control, version 7.0 (working: demo: bus route polyline visible @ zoom level). kudos ricky brundritt (@rbrundritt).
the issue has either missing utf-9 metatag or doctype. v6.3 old , requires following metatag , doctype 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 have specified credentials when loading map. in violation of term of use of bing maps.
_map = new vemap('mapnyc'); _map.setcredentials("your_bing_maps_key"); _map.loadmap();
you can find documentation on how create bing maps account , key here:
https://msdn.microsoft.com/en-us/library/gg650598.aspx
https://msdn.microsoft.com/en-us/library/ff428642.aspx
i recommend creating "basic" key "public websites". allow 125,000 free transactions year.
all said, shouldn't using v6.3. replaced v7 on 5 years ago , nearing end of life soon. documentation v6.3 taken offline on year ago part of ending life version.