none
Trajectory between two places RRS feed

  • Question

  • I want to show  the trajectory between two places with bing map Api.
    Something like that:

    https://social.msdn.microsoft.com/Forums/getfile/1432209

    How could I do that ?

    Thanks.

    Thursday, April 25, 2019 6:16 PM

Answers

  • Firstly you have removed map.setView instead of only removing padding property from it (or as I said decreasing padding value). Read again what map.setView does, I shared link for article on it.

    var rect = Microsoft.Maps.LocationRect.fromLocations(coords);
    map.setView({ bounds: rect});

    Secondly have you read docs for getGeodesicPath?

    getGeodesicPath: Takes an array of Locations and fills in the space between them with accurately positioned coordinates to form an approximated Geodesic path (appears as a curved line on map).

    With your code coords array is now not only "start" and "end" locations but all points between those (so coords[1] is not "end" point but the next one to "start"), you can change  coords[1] to coords[coords.length - 1].

    This should get:


    Friday, April 26, 2019 9:35 PM
    Moderator

All replies

  • How to zoom the Polyline of that code on the two places And how to add pushpin at the two places ?

    Zoom with: 500px of width  and   180px of height

    Like that:

    https://social.msdn.microsoft.com/Forums/getfile/1432617

           
     function loadMapScenario() {
            var map = new Microsoft.Maps.Map('#myMap', {
                showDashboard: false,
                zoom: 4
            });
            Microsoft.Maps.loadModule("Microsoft.Maps.SpatialMath");
            var coords = [ new Microsoft.Maps.Location(6.1397, 1.2296), new Microsoft.Maps.Location(14.6693, -17.4366) ];
            line = new Microsoft.Maps.Polyline(coords,{
                      strokeColor: 'red',
                      strokeThickness: 2,
                      strokeDashArray: [4, 4]
                });
            map.entities.push(line);
    
        }

    thanks





    • Edited by kamkom96 Friday, April 26, 2019 1:13 PM
    Friday, April 26, 2019 11:17 AM
  • var pin1 = new Microsoft.Maps.Pushpin(coords[0]);
    map.entities.push(pin1);
    var pin2 = new Microsoft.Maps.Pushpin(coords[1]);
    map.entities.push(pin2);
    var rect = Microsoft.Maps.LocationRect.fromLocations(coords);
    map.setView({ bounds: rect, padding: 80 });


    As for the map width and height, you can change the size of Div element that contain the map: https://docs.microsoft.com/en-us/bingmaps/v8-web-control/creating-and-hosting-map-controls/creating-a-basic-map-control.
    Also your code loads the Spatial Math module altough you're not using it.


    Friday, April 26, 2019 2:14 PM
    Moderator
  • I tried that:

      function loadMapScenario() {
            var map = new Microsoft.Maps.Map('#myMap', {
                showDashboard: false 
            });
           Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
                var coords =  [ new Microsoft.Maps.Location(25.9765633214445, -80.2823088532391), new Microsoft.Maps.Location(6.1397, 1.2296) ];
                var line = new Microsoft.Maps.Polyline(coords,{
                          strokeColor: 'red',
                          strokeThickness: 2,
                          strokeDashArray: [4, 4]
                    });
                var pin1 = new Microsoft.Maps.Pushpin(coords[0]);
                map.entities.push(pin1);
                var pin2 = new Microsoft.Maps.Pushpin(coords[1]);
                map.entities.push(pin2);
                map.entities.push(line);
                var rect = Microsoft.Maps.LocationRect.fromLocations(coords);
                map.setView({ bounds: rect, padding: 80 });
           });
      }

    <div id='myMap' style='width: 500px; height: 180px;'></div>


     That code put pushpins very fine:

    https://social.msdn.microsoft.com/Forums/getfile/1432733

    But if give the class: Microsoft.Maps.SpatialMath.getGeodesicPath 

     function loadMapScenario() {
    
            var map = new Microsoft.Maps.Map('#myMap', {
                showDashboard: false 
            });
    
           Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
    
                var coords = Microsoft.Maps.SpatialMath.getGeodesicPath([ new Microsoft.Maps.Location(25.9765633214445, -80.2823088532391), new Microsoft.Maps.Location(6.1397, 1.2296) ]);
                var line = new Microsoft.Maps.Polyline(coords,{
                          strokeColor: 'red',
                          strokeThickness: 2,
                          strokeDashArray: [4, 4]
                    });
                var pin1 = new Microsoft.Maps.Pushpin(coords[0]);
                map.entities.push(pin1);
                var pin2 = new Microsoft.Maps.Pushpin(coords[1]);
                map.entities.push(pin2);
                map.entities.push(line);
                var rect = Microsoft.Maps.LocationRect.fromLocations(coords);
                map.setView({ bounds: rect, padding: 80 });
             
    
           });
    
      }

    Pusphin stop being at the two places , but they are nearby.

    Look:

    https://social.msdn.microsoft.com/Forums/getfile/1432734

    I want that the pushpins to be at the side of the line not nearby.

    How to solve that ?




    • Edited by kamkom96 Friday, April 26, 2019 7:17 PM
    Friday, April 26, 2019 2:40 PM
  • This is most likely caused by your div height size, either increase its size or remove/decrease padding property from map.setView.

     
    Friday, April 26, 2019 6:15 PM
    Moderator
  • I tried that:  

    function loadMapScenario() { var map = new Microsoft.Maps.Map('#myMap', { showDashboard: false }); Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () { var coords = Microsoft.Maps.SpatialMath.getGeodesicPath([ new Microsoft.Maps.Location(25.9765633214445, -80.2823088532391), new Microsoft.Maps.Location(6.1397, 1.2296) ]); var line = new Microsoft.Maps.Polyline(coords,{ strokeColor: 'red', strokeThickness: 2, strokeDashArray: [4, 4] }); var pin1 = new Microsoft.Maps.Pushpin(coords[0]); map.entities.push(pin1); var pin2 = new Microsoft.Maps.Pushpin(coords[1]); map.entities.push(pin2); map.entities.push(line); }); }

    <div id='myMap' ></div>


    But positions of the pushpins has not changed.

    Same problem.

    • Edited by kamkom96 Friday, April 26, 2019 8:07 PM
    Friday, April 26, 2019 8:04 PM
  • Firstly you have removed map.setView instead of only removing padding property from it (or as I said decreasing padding value). Read again what map.setView does, I shared link for article on it.

    var rect = Microsoft.Maps.LocationRect.fromLocations(coords);
    map.setView({ bounds: rect});

    Secondly have you read docs for getGeodesicPath?

    getGeodesicPath: Takes an array of Locations and fills in the space between them with accurately positioned coordinates to form an approximated Geodesic path (appears as a curved line on map).

    With your code coords array is now not only "start" and "end" locations but all points between those (so coords[1] is not "end" point but the next one to "start"), you can change  coords[1] to coords[coords.length - 1].

    This should get:


    Friday, April 26, 2019 9:35 PM
    Moderator
  • Thanks very very very very muchhhhhhhhh, it is working now.

    I started using bing map not long time.
    You save me of many days of search and work.


    I'm not good in english to thank you as I want.


    If you have some more free time:

    look a little here:
    https://social.msdn.microsoft.com/Forums/en-US/7591b12a-29f1-4b6d-bb7e-4d0ffb9ea953/customize-bing-map-autosuggest-popover?forum=bingmaps

    Maybe you have an idea to share ?

    Thanks too much.


    • Edited by kamkom96 Friday, April 26, 2019 10:41 PM
    Friday, April 26, 2019 10:33 PM
  • I see your other question is being addressed so to end this thread note that if you only need static map and can do without dashed line you can use REST Imagery: https://docs.microsoft.com/en-us/bingmaps/rest-services/imagery/get-a-static-map to get straight or curved line between two pushpins. You can customize line color & thickness and use one of the few pushpins available: https://docs.microsoft.com/en-us/bingmaps/rest-services/common-parameters-and-types/pushpin-syntax-and-icon-styles.

    See below example of the REST call:

    https://dev.virtualearth.net/REST/v1/Imagery/Map/Road?mapSize=500,180&pp=25.9765633214445,-80.2823088532391;84&pp=6.1397,1.2296;57&dc=cv,FFff3399,2&key={YourBingMapsKey}



    Saturday, April 27, 2019 2:42 PM
    Moderator
  • Hi again, I have edited my code, below is my full code:

     The function   load_map_travel_form_now_location_to_destination(); is called after a click event.

         function load_map_travel_form_now_location_to_destination(){
                      var mp = new Microsoft.Maps.Map('#post_wall_map_feeling_travel_and_location', {
                          showDashboard: false
                      });
                      Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
                         var map_1 =  $('#travel_input_true').val().replace("[MapLocation (", "").replace(")]", "");
                         var map_2 =  $('#post_wall_place_location_lat_long_true').val().replace("[MapLocation (", "").replace(")]", "");
                         var map_1_details = map_1.split(',');
                         var map_2_destails = map_2.split(',');
                         var k = $('#post_wall_feeling_activity_true').val();
                         $('#post_wall_feeling_activity_true').val(map_1+"-----"+k);
                         
                         if ($('#check_file_exist').val() == "") {
                            $('#dropzone_preview_area_wall_post').hide();
                            $('#post_wall_map_feeling_travel_and_location').show();
                         }
                          var coords = Microsoft.Maps.SpatialMath.getGeodesicPath([ new Microsoft.Maps.Location(map_1_details[0], map_1_details[1]), new Microsoft.Maps.Location(map_2_destails[0], map_2_destails[1]) ]);
                          var line = new Microsoft.Maps.Polyline(coords,{
                                    strokeColor: 'darkgreen',
                                    strokeThickness: 2,
                                    strokeDashArray: [4, 4]
                              });
                          var pin1 = new Microsoft.Maps.Pushpin(coords[0],{
                              icon: 'tools/img/bing_map_place_2.png'
                          });
                          mp.entities.push(pin1);
                          var pin2 = new Microsoft.Maps.Pushpin(coords[coords.length - 1],{
                              icon: 'tools/img/bing_map_place_1.png'
                          });
                          mp.entities.push(pin2);
                          mp.entities.push(line);
                          var rect = Microsoft.Maps.LocationRect.fromLocations(coords);
                          mp.setView({ bounds: rect, padding: 80});
                      });
                  }

    Html code:

    <div id="post_wall_map_feeling_travel_and_location" style=" width: 500px;   ; bottom: 65px; height: 180px; display: none;">
                          
                              </div>
    

    The map is not longer zoomed on the two locations. I have tried many modifications on these code but i can't arrive to zoom the map on these tow places.

    THese code give me that:

    https://social.msdn.microsoft.com/Forums/getfile/1433789

    I have to scrool on the map to see the Polyline:

    see:

    https://social.msdn.microsoft.com/Forums/getfile/1433792

    Which part of these codes should i change to zoom the map on the two places ?

    Thanks again.


     
    Tuesday, April 30, 2019 11:09 AM