Bing Map V8: zIndex of polygon and pushpin (put polygon on top of pushpin) RRS feed

  • Question

  • Hi

    As a result of this thread: I put a pushpin (not clickable) on the map, and draws a polygon on top of it, which is clickable. What happens is if i point at the pushpin, the polygon is no longer in focus. The pushpin is set to have a lower zIndex, and should therefore not be focusable.

    I have tried the following:

    • I've read two old posts ( & where a guy and Ricky Brunditt suggests to create EntityCollections and define zIndexes there, and that's what I've been trying to do in the example below, since I can't define zIndex on the polygon itself.
    • Add two pushpins, give them two different texts and zIndexes. The zIndex doesn't seem to have any effect, as the same pushpin always appears on top of the other.
    • Tried to use the ".map.getMode().setOptions({ drawShapesInSingleLayer:true })" but it says that the function getMode() doesn't exist. I guess it has been removed in Bing Maps V8?

    Do you guys have any suggestions? Please check this sample, which displays a polygon on top of a pushpin.

    And use the following typescript code:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { 
        credentials: 'Your Bing Maps Key'
    		//Draw the polygon
    		var R = 6371;
      		var radius = 5;      //radius of the circle
            var latitude = map.getCenter().latitude;    //latitude of the circle center
            var longitude = map.getCenter().longitude;	//longitude of the circle center
            var backgroundColor = new Microsoft.Maps.Color(50, 200, 0, 0);
            var borderColor = new Microsoft.Maps.Color(150, 200, 0, 0);
            var lat = (latitude * Math.PI) / 180;
            var lon = (longitude * Math.PI) / 180;
            var d = parseFloat(radius.toString()) / this.R;
            var circlePoints = new Array();
            for (var x = 0; x <= 360; x += 5) {
                var p2 = new Microsoft.Maps.Location(0, 0);
                var brng = x * Math.PI / 180;
                p2.latitude = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(brng));
                p2.longitude = ((lon + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat),
                    Math.cos(d) - Math.sin(lat) * Math.sin(p2.latitude))) * 180) / Math.PI;
                p2.latitude = (p2.latitude * 180) / Math.PI;
    		var pinsEntity = new Microsoft.Maps.EntityCollection({ zIndex: -1 });
        	var polygonEntity = new Microsoft.Maps.EntityCollection({ zIndex: 1 });
    		//Add the polygon
    		var polygon = new Microsoft.Maps.Polygon(circlePoints, { fillColor: backgroundColor, strokeColor: borderColor, strokeThickness: 1 });
    		//Add the pushpin		
    		var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
    		Microsoft.Maps.Events.addHandler(polygon, 'click', function () {

    Thank you in advance,


    • Edited by DV911 Thursday, June 9, 2016 1:04 PM spelling.
    Thursday, June 9, 2016 1:02 PM


  • It's not possible to do what you are trying to do. Pushpins are always rendered above polygons/polylines. This is because 99% of the time when they are not its an undesired experience. Additionally, the EntityCollection class is deprecated in V8. V8 is aware of it, but simply flattens it and renders the data. This is documented here:

    Also, if you use polygons you will have to recalculate it on every zoom level as polygons scale based on the zoom level which pushpin icons are fixed pixel sizes.

    [Blog] [twitter] [LinkedIn]

    Thursday, June 9, 2016 3:09 PM