Hello Andrew,

Let me know if you need further assistance with the igMap or if you have any questions or concerns regarding Graham's sample.

Best Regards,

Maya Kirova

Developer Support Engineer

Here's an example of how you can use polyline series to show a route obtained from the bing maps api. Polyline series just expects and array of arrays of points on each item, bound to by the shapeMemberPath.
The reason why it expects and array of arrays of points is so that you can associate multiple shapes with the same "item" in the data source.

<script id="tooltipTemplate" type="text/x-jquery-tmpl">
        <table id="tooltip">
            <tr>
                <td>
                    <div style="background-color: white;>
                        <span id="tooltipValue" style="font-family: Arial; font-size: 11px">${item.text}</span>
                    </div>
                </td>
            </tr>
        </table>
    </script>
    <script>
        $(function () {
            $("#tooltipTemplate").template("tooltipTemplate");

            var bingKey = "get your own";

            $("#map").igMap({
                width: "700px",
                height: "500px",
                overviewPlusDetailPaneVisibility: "visible",
                horizontalZoomable: true,
                verticalZoomable: true,
                windowResponse: "immediate"
            });

            var color = "red";

            var addPolylineSeries = function (data) {
                $("#map").igMap("option", "series", [{
                    name: "series1",
                    remove: true
                }]);

                $("#map").igMap("option", "series", [{
                    name: "series2",
                    remove: true
                }]);


                $("#map").igMap("option", "series", [{
                    name: "series1",
                    type: "geographicPolyline",
                    dataSource: data,
                    shapeMemberPath: "points",
                    shapeStyle: {
                        stroke: color,
                        strokeThickness: 2.0
                    }
                }]);
            }

            var addSymbolSeries = function (data) {


                $("#map").igMap("option", "series", [{
                    name: "series2",
                    type: "geographicSymbol",
                    dataSource: data,
                    latitudeMemberPath: "y",
                    longitudeMemberPath: "x",
                    markerType: "circle",
                    showTooltip: true,
                    tooltipTemplate: "tooltipTemplate"
                }]);
            }

            $("#getDirections").click(function () {
                var from = escape($("#fromPlace").val());
                var to = escape($("#toPlace").val());

                var url = "http://dev.virtualearth.net/REST/v1/Routes?wp.0=" + from + "&wp.1=" + to + "&routePathOutput=Points&output=json&key=" + bingKey;
                $.ajax({
                    url: url,
                    dataType: "jsonp",
                    jsonp: "jsonp",
                    success: function (result) {
                        if (result &&
                           result.resourceSets &&
                           result.resourceSets.length > 0 &&
                           result.resourceSets[0].resources &&
                           result.resourceSets[0].resources.length > 0) {

                            var route = result.resourceSets[0].resources[0].routePath.line;
                            var points = [];
                            for (var i = 0; i < route.coordinates.length; i++) {
                                points[i] = { y: route.coordinates[i][0], x: route.coordinates[i][1] };
                            }

                            var ret = [{ points: [points]}];

                            addPolylineSeries(ret);

                            var itinerary = result.resourceSets[0].resources[0].routeLegs[0];

                            var items = [];
                            for (var i = 0; i < itinerary.itineraryItems.length; i++) {
                                items[i] = {
                                    y: itinerary.itineraryItems[i].maneuverPoint.coordinates[0],
                                    x: itinerary.itineraryItems[i].maneuverPoint.coordinates[1],
                                    text: itinerary.itineraryItems[i].instruction.text
                                };
                            }

                            addSymbolSeries(items);

                            var bbox = result.resourceSets[0].resources[0].bbox;
                            var rect = {
                                left: bbox[1],
                                top: bbox[0],
                                width: bbox[3] - bbox[1],
                                height: bbox[2] - bbox[0]
                            };

                            var zoom = $("#map").igMap("getZoomFromGeographic", rect);
                            $("#map").igMap("option", "windowRect", zoom);
                        }
                    }
                });
            });
        });
    </script>
    <style>
        .test
        {
            border-color: Red;
            border-width: 1px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    Geographic map demo&lt/h1>
            </div>
            <div class="clear">
            </div>
        </div>
        <div class="main">
            <div>
                <div id="map">
                </div>
            </div>
            <input type="text" id="fromPlace" value="Cranbury, NJ"/>
            <input type="text" id="toPlace" value="New York, NY"/>
            <input type="button" id="getDirections" value="Get Directions" />
        </div>
</body>
</html>

Hope this helps!
-Graham