Parsing the response while using mh5

[vramkumar]

Hi,

What would be the best way of parsing a response for a routing request, in order to show the direction steps of the route.
I have a difficulty in parsing a route request for "Public Transport" mode between "Deira, Doubai" and "Karama, Doubai".
I am unable to parse the response and display the direction steps. However if the mode is "Car/Drive" it works fine.

I have seen this working fine on m.maps.nokia.com, but i am unable to parse while using the mh5 api.

best regards
ram

[ZieL]

Hi vramkumar,

I'm not sure why you're not able to parse the response. The only problem here is the different schema of responses for drive and pt directions. But they both are in json format and have "shape" property which you can use to draw the route on the map and "maneuvers" property containing information of every single direction step.

Could you describe your problem more precisely?

Br,
Leo

[vramkumar]

Hi,

Thanks for your response.

The request url is http://m.maps.nokia.com/releases/1.7...34&jsonp=MH5_8

and the response received is

MH5_8({"response":{"route":{"shape":[{"color":"rgba(102,102,102,0.75)","shape":[25.2870649,55.3198278,25.2869117,55.3195846,25.2850664,55.3170848,25.2846801,55.3165162,25.2841008,55.316956,25.2838647,55.3169346,25.2834678,55.3162479,25.2819657,55.3136623,25.2804744,55.3110123,25.2802598,55.3106582,25.2801418,55.3103685,25.2801847,55.3102291,25.2801955,55.3100789,25.280174,55.3099394,25.2800453,55.3097785,25.2798092,55.3097248,25.2796376,55.3095746,25.2795088,55.3094029,25.278672,55.3079116,25.278039,55.3067851,25.2778351,55.3068709,25.2769232,55.3052509,25.2767622,55.3049397,25.2766871,55.3048432,25.2754533,55.3024828,25.275346,55.3023219,25.2751529,55.3019893,25.2750778,55.3019142,25.2748954,55.3017104,25.2749169,55.3016031,25.2748847,55.3014851,25.2747023,55.3010452,25.2745092,55.3006482,25.2742839,55.3002942,25.2738655,55.2997577,25.2733505,55.2992749,25.2732325,55.2991247,25.2731252,55.2990282,25.272975,55.298835,25.2727175,55.298599,25.2725458,55.2987385,25.2724171,55.298835,25.2723205,55.2986419,25.272176,55.2984201,25.272181,55.2984166,25.272181,55.2984166]},{"color":"rgba(255,255,255,0.75)","shape":[25.272181,55.2984166,25.2622676,55.3076971,25.266248,55.308212,25.2504551,55.3328776,25.2522898,55.3024507,25.2522898,55.3024507]},{"color":"rgba(102,102,102,0.75)","shape":[25.2522898,55.3024507,25.2522908,55.302448,25.2516996,55.3020965,25.2516031,55.3022146,25.2514958,55.3021502,25.251174,55.3021717,25.2510345,55.3021717,25.2508628,55.3020644,25.2504551,55.302912,25.250262,55.3033519,25.2498758,55.3041029,25.2498007,55.3040493,25.2494144,55.3038347,25.2492321,55.3037274,25.2490819,55.3042102,25.2485669,55.3040493,25.2481055,55.3039098,25.2478266,55.3038239,25.24773,55.3042102,25.2476871,55.3044028,25.247686,55.3044]},{"color":"rgba(51,51,51,0.75)","shape":[25.247686,55.3044,25.247686,55.3044]}],"summary":{"baseTime":6188,"numChanges":0,"error":0,"bbox":[{"latitude":25.2870649,"longitude":55.2984166},{"latitude":25.247686,"longitude":55.3328776}],"uncertainty":"930"},"maneuvers":[{"action":0,"position":{"latitude":25.287066,"longitude":55.319828},"duration":2960,"stops":0,"color":"#666666","depTime":"2012-10-31T20:17:34"},{"name":"\u0633\u0648\u0642 \u0627\u0644\u0630\u0647\u0628","action":1,"position":{"latitude":25.27218,"longitude":55.298416},"duration":2395,"line":"\u0627\u0644\u0631\u062d\u0644\u0629 \u0627\u0644\u062d\u0645\u0631\u0627\u0621","direction":"\u062d\u062f\u064a\u0642\u0629 \u0627\u0644\u062e\u0648\u0631","stops":4,"color":"#FFFFFF","depTime":"2012-10-31T21:06:54"},{"name":"\u0628\u0631\u062c\u0645\u0627\u0646","action":0,"position":{"latitude":25.25229,"longitude":55.302452},"duration":833,"direction":"\u062d\u062f\u064a\u0642\u0629 \u0627\u0644\u062e\u0648\u0631","stops":0,"color":"#666666","depTime":"2012-10-31T21:46:49"},{"action":2,"position":{"latitude":25.247686,"longitude":55.3044},"duration":0,"stops":0,"color":"#333333"}]}}});

The direction text values seem to be encoded, whats the way of accessing the instruction and icon for the instructions for this request..

Best Regards
Ram

[ZieL]

Hi Ram,

the instructions are in arabic and seem to be just utf8 encoded in your post. That's how the same request ( manuevers part of it) looks like if I click on your request link in my Chrome (hopefully now you can see directions in arabic):

maneuvers: [
{
action: 0,
position: {
latitude: 25.287066,
longitude: 55.319828
},
duration: 2960,
stops: 0,
color: "#666666",
depTime: "2012-10-31T20:17:34"
},
{
name: "سوق الذهب",
action: 1,
position: {
latitude: 25.27218,
longitude: 55.298416
},
duration: 2395,
line: "الرحلة الحمراء",
direction: "حديقة الخور",
stops: 4,
color: "#FFFFFF",
depTime: "2012-10-31T21:06:54"
},
{
name: "برجمان",
action: 0,
position: {
latitude: 25.25229,
longitude: 55.302452
},
duration: 833,
direction: "حديقة الخور",
stops: 0,
color: "#666666",
depTime: "2012-10-31T21:46:49"
},
{
action: 2,
position: {
latitude: 25.247686,
longitude: 55.3044
},
duration: 0,
stops: 0,
color: "#333333"
}
]

I'll get back later today to you to answer your question about the right icon for the instuctions.

Leo

[pachocki]

Hi,

regarding the maneuvers' list and icons, the easiest way to get them is to use predefined list item - RouteListItem. The simplest way to add routing to your app is to use the route component, please check the example below:

myApp.ManeuversPage = new nokia.mh5.Class(nokia.mh5.ui.Page, function(parent) {
    return {
        children: ["maneuvers", "route"],
        maneuvers: {
            control: nokia.mh5.ui.List,
            itemClass: nokia.mh5.components.RouteListItem
        },
        route: {
            control: nokia.mh5.components.Route,
            listeners: {
                success: function (e) {
                    this.parent.maneuvers.items = e.data.maneuvers;
                },
                error: function (e) {
                    console.error(e.data.message);
                }
             }
        }
    };
});

This example will create two text inputs (from and to) and a list. After searching for starting point and destination, it will display the maneuvers in the list. However, if you don't want to use routing component with default look and feel, you can do it via headless mode. In this case, you need to create your own UI and pass the parameters to route adapter, please check the second example for more details:

myApp.ManeuversPage = new nokia.mh5.Class(nokia.mh5.ui.Page, function(parent) {
    return {
        children: ["maneuvers", "button"],
        maneuvers: {
            control: nokia.mh5.ui.List,
            itemClass: nokia.mh5.components.RouteListItem
        },
        button: {
            control: nokia.mh5.ui.Button,
            onClick: function () {
                var from = {
                        latitude: 52,
                        longitude: 13
                    },
                    to = {
                        latitude: 51,
                        longitude: 12
                    },
                    parameters = {
                        appId: "myAppId",
                        appCode: "myAppCode",
                        mode: "drive"
                    };

                nokia.mh5.adapters.Route.fetch([from, to], parameters, function (result) {
                    // success
                    this.parent.maneuvers.items = result.maneuvers;
                }.bind(this), function (message) {
                    // error
                    console.error(message);
                });
            }
    };
});

The above code creates two UI components: a list and a button, and after clicking the button it makes a routing request showing the maneuvers in the list.

Hope that helps,
Mat