Waypoint pushpins displaying behind EntityCollection pushpins (zIndex not honored) RRS feed

  • Question

  • Add 2 pushpins to the map and calculate the directions between them; once the route is calculated the waypoint pushpins are properly displayed on top of the original pushpins.

    Now, If you add the original pushpins to an EntityCollection instead of adding them directly to the map, the waypoint pushpins will be rendered behind the pushpins regardless of the zIndex assigned to the EntityCollectionOptions or the waypointPushpinOptions.

    Following is the code to recreate:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript" src=""></script>
      <script type="text/javascript">
        var map = null;
        var location1 = new Microsoft.Maps.Location(33.703492, -117.7768);
        var location2 = new Microsoft.Maps.Location(33.672926, -117.7985);
        function GetMap() {
          // Initialize the map
          map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "Bing Maps Key" });
          //create 2 new pushpins
          var pushpin1 = new Microsoft.Maps.Pushpin(location1);
          var pushpin2 = new Microsoft.Maps.Pushpin(location2);
          //Adding the pushpins to the map directly, produces the expected behavior
          //Adding the pushpins to a custom EntityCollection causes the ordering issue
          var layer = new Microsoft.Maps.EntityCollection({ zIndex: 100 });
          Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: directionsModuleLoaded });
        function directionsModuleLoaded() {
          // Initialize the DirectionsManager
          var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
          // Create start and end waypoints that overlap the pushpins
          var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ location: location1 });
          var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ location: location2 });
          // Set the id of the div to use to display the directions
            itineraryContainer: document.getElementById('itineraryDiv'),
            waypointPushpinOptions: { zIndex: 200 }
          // Specify a handler for when an error occurs
          Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', function () { alert(e.message); });
          // Calculate directions, which displays a route on the map
    <body onload="GetMap();">
      <div id='mapDiv' style="position: relative; width: 400px; height: 400px;">
      <div id='itineraryDiv' style="position: relative; width: 400px;">

    • Moved by Ricky_Brundritt Saturday, March 10, 2012 11:41 AM (From:Bing Maps: Map Control and Web services Development)
    Thursday, August 25, 2011 2:23 AM


All replies

  • Did you ever get an answer for this?  I am having a similar issue.
    Friday, October 14, 2011 7:38 PM
  • There was a bug in directions code due to which z-Index was not getting set in waypointPushpinOptions ("waypointPushpinOptions: { zIndex: 200 }"). This issue has been fixed in next update which is scheduled to be released in next few weeks.

    I will update this thread when it's released.

    Saturday, October 15, 2011 5:51 PM
  • @StevePSMap: never got any feedback on this until now.

    Thank you Pramil for letting us now that this will be fixed soon. BTW, it helps to mark your posts with a MS badge or annotation so we know you are the man to follow...

    Monday, October 17, 2011 10:30 PM
  • This issue is now resolved. Please try it out.



    (Dev, Bing Maps)

    Saturday, November 5, 2011 7:02 PM