I am creating a simple web application using Bing Maps. When I load the application in BlackBerry Z30, the route drawn between the start and end destination is getting distorted. Please find the attached screenshot. But this works perfectly fine on all Samsung devices. Is there any work around to make it work for BlackBerry ? Below is the sample code which I use to draw the line between start and 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 is the array of lat and longs. A sample screenshot:
Attached is the code in my index.html. This is my whole index.html of this sample app where you can easily reproduce the 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 is my whole index.html of this sample app where you can easily reproduce the issue in blackberry browser }
