javascript - Bing Maps not working properly on BlackBerry -
i creating simple web application using bing maps. when load application in blackberry z30, route drawn between start , end destination getting distorted. please find attached screenshot. works fine on samsung devices. there work around make work blackberry ? below sample code use draw line between start , end destinations.
function drawrouteshape(points, color){ var cfg = { strokecolor: new microsoft.maps.color(255,100,0,100), strokethickness: 5 }; this.map.entities.push(new microsoft.maps.polyline(points, cfg)); }; points array of lat , longs. sample screenshot:
attached code in index.html. whole index.html of sample app can reproduce issue in blackberry browser.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> <script type="text/javascript"> function getmap() { map = new microsoft.maps.map(document.getelementbyid("mapdiv"), {credentials: "ai2jw9btqaiwrgyifdh", center: new microsoft.maps.location(48.76767, 9.171919), maptypeid: microsoft.maps.maptypeid.road, mapviewrestriction:microsoft.maps.map.oneworldonly, zoom: 7}); console.log("microsoft.maps.map.oneworldonly = " + microsoft.maps.map.oneworldonly); var start = { latitude: 49.201809, longitude: 9.50106 }; var start2 = { latitude: 49.202451999999994,longitude:9.501092 }; var start3 = { latitude: 49.20245799999999,longitude:9.50128 }; var start4 = { latitude: 49.20238799999999,longitude:9.504112 }; var start5 = { latitude: 49.20225899999999,longitude:9.504631999999999 }; var start6 = { latitude: 49.20170099999999,longitude:9.506010999999999 }; var start7 = { latitude: 49.201620999999996,longitude:9.505941 }; var start8 = { latitude: 49.200258,longitude:9.505641 }; var start9 = { latitude: 49.199191,longitude:9.505217 }; var start10 = { latitude: 49.198831,longitude:9.505271 }; var start11 = { latitude: 49.198240999999996,longitude:9.505732 }; var start12 = { latitude: 49.197967999999996,longitude:9.505791 }; var start13 = { latitude: 49.197641,longitude:9.505700000000001 }; var start14 = { latitude: 49.197029,longitude:9.505367000000001 }; var start15 = { latitude: 49.196938,longitude:9.505121 }; var start16 = { latitude: 49.197142,longitude:9.50364 }; var start17 = { latitude: 49.197351,longitude:9.502712 }; var start18 = { latitude: 49.197818,longitude:9.501328 }; var start19 = { latitude: 49.197871,longitude:9.500411000000001 }; var start20 = { latitude: 49.197378,longitude:9.500378000000001 }; var start21 = { latitude:49.196192,longitude:9.500389000000002 }; var start22 = { latitude: 49.195768,longitude:9.500309000000001 }; var start23 = { latitude: 49.1927,longitude:9.499011000000001 }; var start24 = { latitude: 49.192711,longitude:9.498941000000002 }; var start25 = { latitude: 49.192609000000004,longitude:9.498742000000002 }; var start26 = { latitude: 49.192491000000004,longitude:9.498780000000002 }; var start27 = { latitude: 49.19244200000001,longitude:9.498919000000003 }; var start28 = { latitude:49.19211000000001,longitude:9.498817000000003 }; var start29 = { latitude:49.19115000000001,longitude:9.498699000000002 }; var start30 = { latitude: 49.19030200000001,longitude:9.498828000000001 }; var start31 = { latitude: 49.18958900000001,longitude:9.499091000000002 }; var start32 = { latitude:49.18869800000001,longitude:9.499660000000002 }; var start33 = { latitude: 49.18818800000001,longitude:9.500142000000002 }; var start34 = { latitude: 49.18751800000001,longitude:9.500969000000001 }; var start35 = { latitude: 49.185699000000014,longitude:9.504010000000001 }; var start36 = { latitude: 49.185158000000015,longitude:9.504761 }; var start37 = { latitude: 49.184272000000014,longitude:9.505668 }; var start38 = { latitude: 49.18345200000002,longitude:9.50622 }; var start39 = { latitude: 49.183591000000014,longitude:9.506767 }; var start40 = { latitude: 49.18374100000001,longitude:9.508189 }; var start41 = { latitude: 49.183650000000014,longitude:9.508731 }; var start42 = { latitude: 49.183371000000015,longitude:9.509127999999999 }; var start43 = { latitude: 49.180748000000015,longitude:9.509738999999998 }; var start44 = { latitude: 49.18036200000002,longitude:9.509706999999999 }; var start45 = { latitude: 49.18036200000002,longitude:9.510297 }; var start46 = { latitude: 49.180458000000016,longitude:9.511858 }; updatestartpin(start); updatedestpin(start46); var points= [start,start2,start3,start4,start5,start6,start7,start8,start9,start10,start11,start12,start13,start14,start15,start16,start17,start18,start19,start20,start21,start22,start23,start24,start25,start26,start27,start28,start29,start30,start31,start32,start33,start34,start35,start36,start37,start38,start39,start40,start41,start42,start43,start44,start45,start46]; var color = {blue: 6, green: 232, red: 187}; drawrouteshape(points, color); }; function updatestartpin(point) { var startpinoptions = { icon:this.starticonimg, width:this.starticonwidth, height:this.starticonheight, zindex: 50 }; this.startpin = new microsoft.maps.pushpin(point, startpinoptions); console.log("set start pin"); this.map.entities.push(this.startpin); }; function updatedestpin(point) { console.log("pointdest = " + point); var destpinoptions = { icon:this.desticonimg, width:this.desticonwidth, height:this.desticonheight, zindex: 50 }; }; function drawrouteshape(points, color){ var cfg = { //strokecolor: new microsoft.maps.color(255, color.red, color.green, color.blue), strokecolor: new microsoft.maps.color(255,100,0,100), strokethickness: 5 }; this.map.entities.push(new microsoft.maps.polyline(points, cfg)); }; </script> </head> <body onload="getmap();"> <div id='mapdiv' style="position:relative; width:1920px; height:1080px;"></div> </body> </html> this whole index.html of sample app can reproduce issue in blackberry browser }
after lot of test (12 different browsers) i've found renders on every single browser tested correctly. don't have access blackberry z30, since browsers tested worked (old , new) logical reason issue rendering issue in browser in blackberry z30. polyline in bing maps nothing more svg image. time looks similar showed when zoomed out lot , thickness of polyline made looked filled polygon, zoom in corrected. test try running html in browser. generated svg image in bing maps of line.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path style="pointer-events: visiblepainted;" fill="none" fill-opacity="1" fill-rule="evenodd" stroke="#640064" stroke-dasharray="none" stroke-linecap="butt" stroke-opacity="1" stroke-width="5" d="m 573 99 l 573 88 l 575 88 l 608 89 l 614 91 l 630 101 l 630 103 l 626 127 l 621 146 l 622 153 l 627 163 l 628 168 l 627 174 l 623 185 l 620 186 l 603 183 l 592 179 l 576 171 l 565 170 l 565 178 l 565 200 l 564 207 l 549 262 l 548 262 l 546 264 l 546 266 l 548 266 l 547 272 l 545 290 l 547 305 l 550 317 l 556 333 l 562 342 l 572 354 l 607 387 l 616 396 l 626 412 l 633 427 l 639 424 l 656 422 l 662 423 l 667 428 l 674 475 l 674 482 l 680 482 l 699 480" /></svg> </body> </html>
Comments
Post a Comment