MAP - addRoute() is drawing a wrong route

You must Login before you can answer or comment on any questions.

Hi folks!

I am developing a App the uses the Titanium.Map.View and I have been struggling to get it working properly but it seems impossible. Everything is OK, except for one thing, the route is located in the wrong place. I have read in a forum thatit is a problem with the way javascript deals with strings. I am not a expert in javascript but it seems strange.

Anyway, here goes my code:

//MapView-------------------------
var mapview = Titanium.Map.createView({
            mapType: Titanium.Map.STANDARD_TYPE,
            region: BH,
            animate:true,
            //regionFit:false,
            regionFit:true,
            userLocation:true,
            top:'0%',
            height:'80%',
            annotations:[anno1, anno2, anno3, anno4, anno5]
        });
 
//XHR--------------------------------
var url = 'https://maps.google.com/maps?saddr=Av.+Dom+Pedro+II&daddr=-19.9332,-43.93797+to:-19.93367,-43.92036+to:Av.+Bandeirantes&hl=en&ll=-19.940594,-43.933511&spn=0.02126,0.038409&sll=-19.940191,-43.926001&sspn=0.042521,0.076818&geocode=FbQs0P4dYEth_Q%3BFfDXz_4dTo9h_SkhUDcY3JmmADEg1I4yY_L5TQ%3BFRrWz_4dGNRh_SnHaOXDlZmmADHmRynXec3rJQ%3BFYSUz_4drMxh_Q&mra=dpe&mrsp=1&sz=14&via=1,2&t=m&z=15&output=json'
 
            xhr = Titanium.Network.createHTTPClient();
        xhr.open('GET', url);
        xhr.onload = function()
        {
            var obj = this.responseText.split(',polylines:')[1].split(',layers:')[0];
            if(obj.split('points:"'))
            {
                var temp = obj.split('points:"');
                for(var b = 1; b < temp.length; b++)
                {
                    var points = [];
                    var instring = temp[b].split('",levels:')[0];
                    instring = instring.replace(/\\\\/g, "\\");
                    var decodedPolyline = decodeLine(temp[b].split('",levels:')[0]);
 
                    for (var j=0; j<decodedPolyline.length; j++)
                    {
                        if(decodedPolyline[j] != null)
                        {
                            points.push({
                                latitude : decodedPolyline[j][0],
                                longitude : decodedPolyline[j][1]
                            });
                        }
                    }
                    // add a route
                    mapview.addRoute({
                        name: onibus,
                        points: points,
                        color: "blue",
                        width: 4
                    });
                }
            }            
        };  
        xhr.onerror = function(e){
            Ti.API.info(e);
        };
        xhr.send();
    window.add(mapview) ;
 
//-------------------------------------
//Decode Function
function decodeLine(encoded) 
{
    var len = encoded.length;
    var index = 0;
    var array = [];
    var lat = 0;
    var lng = 0;
 
    while (index < len) {
        var b;
        var shift = 0;
        var result = 0;
    do {
        b = encoded.charCodeAt(index++) - 63;
        result |= (b & 0x1f) << shift;
        shift += 5;
    } 
    while (b >= 0x20);
        var dlat = ((result & 1) ? ~(result >> 1) : (result >> 1));
        lat += dlat;
 
        shift = 0;
        result = 0;
    do {
        b = encoded.charCodeAt(index++) - 63;
        result |= (b & 0x1f) << shift;
        shift += 5;
    } while (b >= 0x20);
        var dlng = ((result & 1) ? ~(result >> 1) : (result >> 1));
        lng += dlng;
        array.push([lat * 1e-5, lng * 1e-5]);
    }
    return array;
};
I'd be very happy if anyone could help me! I really don't know what else to try! Thank you in advance!

— asked 8 months ago by Douglas Alves
2 Comments
  • probably the Google / Apple Maps changed, especially if you're testing on an iOS6... my best guess is to try in the var url to change the domain from 'google.com' to 'apple.com'

    — commented 8 months ago by Joseph Sacha

  • Joseph, I was trying it in iOS5.1 and it was drawing it wrong. Then I moved to the iOS6 and still got the same wrong routes, even after changing the url.

    — commented 8 months ago by Douglas Alves

1 Answer

Douglas, perhaps the problem is located at the reply you're getting back from the request:

var url = 'https://maps.google.com/maps?saddr=Av.+Dom+Pedro+II&daddr=-19.9332,-43.93797+to:-19.93367,-43.92036+to:Av.+Bandeirantes&hl=en&ll=-19.940594,-43.933511&spn=0.02126,0.038409&sll=-19.940191,-43.926001&sspn=0.042521,0.076818&geocode=FbQs0P4dYEth_Q%3BFfDXz_4dTo9h_SkhUDcY3JmmADEg1I4yY_L5TQ%3BFRrWz_4dGNRh_SnHaOXDlZmmADHmRynXec3rJQ%3BFYSUz_4drMxh_Q&mra=dpe&mrsp=1&sz=14&via=1,2&t=m&z=15&output=json'
The output is set to generate a JSON, but what comes back from this request isn't a valid JSON. Are you sure you're extracting all the coordinates from the reply ? If you just add a couple of coordinates, you won't see the whole route tracked, just some straight lines connecting each other, or even worst, the route not appearing on the right place. Isn't there another maps solution out there available? This one seems to be problematic.

Boa sorte!

— answered 8 months ago by Joseandro Luiz
answer permalink
1 Comment
  • Joseandro,

    I did notice that it isn't a valid Json, so I didn't use the JSON.parse(), but I treat it as normal string and search for the points inside the polylines{} using 'split'. It works! But it is drawing a diferent map from the original. I even checked point by point to see if it was getting the wrong points but they are ok, either. That's what's killing me. I have considered looking for other map alternatives but apparently there are none.

    this.responseText.split(',polylines:')[1].split(',layers:')[0];
    if(obj.split('points:"'))
    {
        var temp = obj.split('points:"');
        for(var b = 1; b < temp.length; b++)
        {
            var points = [];
            var instring = temp[b].split('",levels:')[0];
        }
            //....
    }
    Obrigado pela resposta! :)

    — commented 8 months ago by Douglas Alves

Your Answer

Think you can help? Login to answer this question!