none
Bing Map Transit route - Not working walking walkingPolylineOptions at destination

    Question

  • I have tried to implemet walkingPolylineOptions for a transit route. It is correctly showing at starting point but not in destination.

    My code is below

                        

     //Load the directions module.
                Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
                    //Create an instance of the directions manager.
                    var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

                    // var directionsRenderOptions = new Microsoft.Maps.Directions.directionsRenderOptions(map);

                    //Calculate a date time that is 1 hour from now.
                    var departureTime = new Date();
                    departureTime.setMinutes(departureTime.getHours() + 1);

                    //Set Route Mode to transit.
                    directionsManager.setRequestOptions({
                        routeMode: Microsoft.Maps.Directions.RouteMode.transit,
                        time: departureTime,
                        timeType: Microsoft.Maps.Directions.TimeTypes.departure

                    });

                    //Add waypoints.
                    var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: '327 Ferry Rd, Waltham, Christchurch 8011, New Zealand' });
                    directionsManager.addWaypoint(waypoint1);

                    var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: '7 Snowdon Rd, Fendalton, Christchurch 8052, New Zealand' });
                    directionsManager.addWaypoint(waypoint2);

                    //Set the element in which the itinerary will be rendered.
                    directionsManager.setRenderOptions({
                        itineraryContainer: document.getElementById('directionsItinerary'),
                        walkingPolylineOptions: {
                            strokeColor: 'blue',
                            strokeThickness: 3, strokeDashArray: [1, 2],
                            visible: true
                        },
                        transitPolylineOptions: {
                            strokeColor: 'green', strokeThickness: 3,
                            visible: true
                        },
                        lastWaypointPushpinOptions: {
                            color: Microsoft.Maps.Color.fromHex('#000000')
                        }

                    });

                    directionsManager.calculateDirections();

    I would appreciate your reply.

    Thanks

    Wednesday, October 31, 2018 3:07 AM

All replies

  • Hi,

    Please take a look at http://bingmapsv8samples.azurewebsites.net/#Directions_InputPanel

    There is a GitHub link for you to download the sample code.

    Sincerely,

    IoTGirl

    Wednesday, October 31, 2018 7:37 PM
    Owner
  • Hi

    Thank you for your reply.

    How can I show the walking route as dotted line. I have used  this in 

    walkingPolylineOptions: {
                            strokeColor: 'blue',
                            strokeThickness: 3, strokeDashArray: [1, 2],
                            visible: true
                        },

    setRenderOptions. In this case walking route showing only in departure. Not showing the walking route in end of the transit route.

    I would appreciate your help please.

    Thanks

    Wednesday, October 31, 2018 9:26 PM
  • Try the following declaration style from https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Polylines/Polyline%20Basics.html

    function GetMap() {
            var map = new Microsoft.Maps.Map('#myMap', {}); 
            var center = map.getCenter();
    
            //Create array of locations
            var coords = [center, new Microsoft.Maps.Location(center.latitude + 1, center.longitude + 1)];
    
            //Create a polyline
            var line = new Microsoft.Maps.Polyline(coords, {
                strokeColor: 'red',
                strokeThickness: 3,
                strokeDashArray: [4, 4]
            });
    
            //Add the polyline to map
            map.entities.push(line);
        }


    • Edited by IoTGirlOwner Wednesday, October 31, 2018 10:02 PM
    Wednesday, October 31, 2018 10:01 PM
    Owner
  • Hi

    I just wondering Do I need to create polyline for each walking route in my route. I am trying to implement transit route on my web site. Transit route contain both transit and walking routes. I need to show walking routes as dotted line. and also each transit route as different color. Is there any way to do this?

    In normal bing map if I try transit route from

    327 Ferry Rd, Waltham, Christchurch 8011, New Zealand

    to

    7 Snowdon Rd, Fendalton, Christchurch 8052, New Zealand I have 2 walking route. In bing map walking routes are showing correctly. 

    When using my code below showing the first walking route as dotted line but not last one. 

     //Load the directions module.
                Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
                    //Create an instance of the directions manager.
                    var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

                    // var directionsRenderOptions = new Microsoft.Maps.Directions.directionsRenderOptions(map);

                    //Calculate a date time that is 1 hour from now.
                    var departureTime = new Date();
                    departureTime.setMinutes(departureTime.getHours() + 1);

                    //Set Route Mode to transit.
                    directionsManager.setRequestOptions({
                        routeMode: Microsoft.Maps.Directions.RouteMode.transit,
                        time: departureTime,
                        timeType: Microsoft.Maps.Directions.TimeTypes.departure

                    });

                    //Add waypoints.
                    var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: '327 Ferry Rd, Waltham, Christchurch 8011, New Zealand' });
                    directionsManager.addWaypoint(waypoint1);

                    var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: '7 Snowdon Rd, Fendalton, Christchurch 8052, New Zealand' });
                    directionsManager.addWaypoint(waypoint2);

                    //Set the element in which the itinerary will be rendered.
                    directionsManager.setRenderOptions({
                        itineraryContainer: document.getElementById('directionsItinerary'),
                        walkingPolylineOptions: {
                            strokeColor: 'blue',
                            strokeThickness: 3, strokeDashArray: [1, 2],
                            visible: true
                        },
                        transitPolylineOptions: {
                            strokeColor: 'green', strokeThickness: 3,
                            visible: true
                        },
                        lastWaypointPushpinOptions: {
                            color: Microsoft.Maps.Color.fromHex('#000000')
                        }

                    });

                    directionsManager.calculateDirections();

    Thanks



    Wednesday, October 31, 2018 10:21 PM
  • Hi

    Is there any way to find TravelMode  from RoutePath attribute ? I need to draw polyline for travel mode walking (dotted)and transit manually. I can draw polyline using RoutePath elements but cant distinguish whether this is walking or transit as it gives me locations only. Is there any way to find locations for each ItineraryItem?

    and also getCurrentRoute() method don't returns ItineraryGroups information in route leg. Please advise what are the available methods which I can try?

    I will appreciate your help


    Thursday, November 1, 2018 10:02 PM
  • Hi,

    I am escalating your question to the Map control team.  If you call the REST API, you should be able to get the following route data https://msdn.microsoft.com/en-us/library/mt270292.aspx.

    It looks like transit items, as they are scheduled, have a start and end time while walking or driving do not.

    Sincerely,

    IoTGirl

    Thursday, November 1, 2018 11:22 PM
    Owner
  • Hi Thanks for you reply

     I have implement this for my transit route with the help of he sample http://bingmapsv8samples.azurewebsites.net/#Directions_InputPanel. Are you able to tell me why  

    walkingPolylineOptions: {
                            strokeColor: 'blue',
                            strokeThickness: 3, strokeDashArray: [1, 2],
                            visible: true

    is working only for staring walk route in transit route not for arrival walking route. This is the problem I am facing now.

    Thanks


    Thursday, November 1, 2018 11:46 PM
  • Can I get an update on this sorry to disturb you. We are developing a website now

    Thanks

    Sunday, November 4, 2018 7:51 PM
  • Sorry, I have no update at this time.  The team works on an Agile Schedule so I have no insight as to when any issue will be addressed as they are done based on full team priority.
    Monday, November 5, 2018 7:09 PM
    Owner
  • Thank you.

    Do you have any sample code using the rest url directly Calculate a Route using  dev.virtualearth.net/REST/V1/Routes/Transit. I am not able to put the url here. Using$.getJSON(""). I am not getting enough information when I use directionsManager.getCurrentRoute(). I am missing "Detail" element for itenrnityitems

    Thanks


    Monday, November 5, 2018 8:42 PM
  • The below code is not working for me. Please share if you have any sample code.

                $.ajax({
                    url: 'https://dev.virtualearth.net/REST/v1/Routes/transit?key=[bing-map-key]&o=json&jsonp=Microsoft.Maps.NetworkCallbacks.f77131&c=en-NZ&fi=true&errorDetail=true&wp.0=2%20Burnside%20Cres%2C%20Christchurch%2C%20Canterbury%208053%2C%20New%20Zealand&wp.1=7%20Angela%20St%2C%20Christchurch%2C%20Canterbury%208041%2C%20New%20Zealand&ig=true&ra=routepath,transitStops&du=km&dt=11/1/2018%2012:57:00&tt=departure&maxSolns=3&rpo=Points',

                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                    },
                    error: function (xhr) {
                        console.log('Error in Operation');
                    }
                });  

    Thanks

    Monday, November 5, 2018 9:40 PM
  • Did you try the sample calls on the docs?

    https://msdn.microsoft.com/en-us/library/ff701717.aspx

    Tuesday, November 6, 2018 6:38 AM
    Owner
  • Yes tried. and able to retrieve all information. But not able to load the map.may be I am missing something. Couldn't find in msdn sample related to this call. your code sample is using API that is not returning enough information. Is there any sample to load Map using above api call?

    Thanks


    Tuesday, November 6, 2018 8:00 PM
  • How can I convert linecolor 16711680 to draw poline color. When I try to convert 16711680 to hexa decimal seems to showing different color. I got line color from Transit Line Fields.

    Thanks

    Wednesday, November 7, 2018 2:56 AM
  • Hi 

    How can I convert linecolor 16711680 to Maps stroke color. The transit line color is returning from you(eg: 16711680 ) and I am using below code to convert. But it returns wrong color or am I doing anything wrongly?

     strokeColor: Microsoft.Maps.Color.fromHex(transitLine.lineColor.toString(16))

    Thanks

    Wednesday, November 7, 2018 9:05 PM