none
How to change pushpin zIndex in bing map v8? RRS feed

  • Question

  • Hi all:

        In bing map v7, I will increase pushpin zIndex when mouseover and decrease it when mouseout.

        But in bing map v8, pushpin don't have the property.

        so how to fix it?

    Monday, March 20, 2017 7:07 AM

Answers

  • Currently individual shapes do not support zIndexing. The reason for this is due to the shapes being rendered on an HTML canvas which doesn't support zIndexing. Working around this would be slow.

    It may be possible to have two layers in your map. One for your main pushpin layer, and the other to for the pushpin you want to show above all others. Then move the pushpin between the layers. This sample my be useful: http://bingmapsv8samples.azurewebsites.net/#Pushpin_HoverStyle


    [Blog] [twitter] [LinkedIn]


    Monday, March 20, 2017 4:39 PM
  • Currently individual shapes do not support zIndexing. The reason for this is due to the shapes being rendered on an HTML canvas which doesn't support zIndexing. Working around this would be slow.

    It may be possible to have two layers in your map. One for your main pushpin layer, and the other to for the pushpin you want to show above all others. Then move the pushpin between the layers. This sample my be useful: http://bingmapsv8samples.azurewebsites.net/#Pushpin_HoverStyle


    [Blog] [twitter] [LinkedIn]


    Thank you for your reply.
    Now I have change the sort of pushpin array add to layer when mouseover or mouseout,  it seems works well.

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<meta charset="utf-8" />
    	<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    	<script type='text/javascript'>
        var map;
        var pins = [];
        var layer;
        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {
            	credentials: '',
    			zoom:11
            });
    
            //Generate 2 random locations within the current map view.
            var center = map.getCenter();
    
            //Create a blue circle that has a 25 pixel radius as a pushpin and add to map.
            var pin1 = createCirclePushpin(center, 25, 'rgba(0, 0, 255, 1');
    		//add custome prop
            pin1.zIndex = 1;
    
        	//Create a white circle that has a 35 pixel radius and a black outline as a pushpin and add to map.
            var loc2 = new Microsoft.Maps.Location(center.latitude + 0.015, center.longitude);
            var pin2 = createCirclePushpin(loc2, 35, 'rgba(255, 255, 255, 1)', 'black', 1);
        	//add custome prop
            pin2.zIndex = 1;
    
            layer = new Microsoft.Maps.Layer('point');
            map.layers.insert(layer);
           
            pins.push(pin1);
            pins.push(pin2);
    
            layer.add(pins);
    
            for (var i = 0; i < pins.length; i++)
            {
            	Microsoft.Maps.Events.addHandler(pins[i], 'mouseover', pushpinmouseover);
            	Microsoft.Maps.Events.addHandler(pins[i], 'mouseout', pushpinout);
            }
            
    
         
        }
    
        function pushpinmouseover(e)
        {
        	var pin = e.target;
        	pin.zIndex = 2;
    
        	var arrSortPins = [];
        	arrSortPins.push(pin);
        	for (var i = 0; i < pins.length; i++)
        	{
        		if (pins[i].zIndex == 2)
        		{
        			continue;
        		}
        		arrSortPins.push(pins[i]);
        	}
        	layer.clear();
        	layer.add(arrSortPins);
        }
    
        function pushpinout(e)
        {
        	for (var i = 0; i < pins.length; i++)
        	{
        		pins[i].zIndex = 1;
        	}
        	layer.clear();
        	layer.add(pins);
        }
    
        function createCirclePushpin(location, radius, fillColor, strokeColor, strokeWidth) {
            strokeWidth = strokeWidth || 0;
    
            //Create an SVG string of a circle with the specified radius and color.
            var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2),
                '" height="', (radius * 2), '"><circle cx="', radius, '" cy="', radius, '" r="',
                (radius - strokeWidth), '" stroke="', strokeColor, '" stroke-width="', strokeWidth, '" fill="', fillColor, '"/></svg>'];
    
            //Create a pushpin from the SVG and anchor it to the center of the circle.
            return new Microsoft.Maps.Pushpin(location, {
            	icon: svg.join(''),
    			draggable:false
            });
        }
    	</script>
    </head>
    <body>
    	<div id="myMap" style=";width:600px;height:400px;"></div>
    </body>
    </html>

    • Edited by s000rd Wednesday, March 22, 2017 8:15 AM
    • Proposed as answer by Ricky_Brundritt Thursday, March 23, 2017 1:48 AM
    • Marked as answer by Ricky_Brundritt Thursday, March 23, 2017 1:48 AM
    Wednesday, March 22, 2017 7:19 AM

All replies

  • Currently individual shapes do not support zIndexing. The reason for this is due to the shapes being rendered on an HTML canvas which doesn't support zIndexing. Working around this would be slow.

    It may be possible to have two layers in your map. One for your main pushpin layer, and the other to for the pushpin you want to show above all others. Then move the pushpin between the layers. This sample my be useful: http://bingmapsv8samples.azurewebsites.net/#Pushpin_HoverStyle


    [Blog] [twitter] [LinkedIn]


    Monday, March 20, 2017 4:39 PM
  • Currently individual shapes do not support zIndexing. The reason for this is due to the shapes being rendered on an HTML canvas which doesn't support zIndexing. Working around this would be slow.

    It may be possible to have two layers in your map. One for your main pushpin layer, and the other to for the pushpin you want to show above all others. Then move the pushpin between the layers. This sample my be useful: http://bingmapsv8samples.azurewebsites.net/#Pushpin_HoverStyle


    [Blog] [twitter] [LinkedIn]


    Thank you for your reply.
    Now I have change the sort of pushpin array add to layer when mouseover or mouseout,  it seems works well.

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<meta charset="utf-8" />
    	<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    	<script type='text/javascript'>
        var map;
        var pins = [];
        var layer;
        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {
            	credentials: '',
    			zoom:11
            });
    
            //Generate 2 random locations within the current map view.
            var center = map.getCenter();
    
            //Create a blue circle that has a 25 pixel radius as a pushpin and add to map.
            var pin1 = createCirclePushpin(center, 25, 'rgba(0, 0, 255, 1');
    		//add custome prop
            pin1.zIndex = 1;
    
        	//Create a white circle that has a 35 pixel radius and a black outline as a pushpin and add to map.
            var loc2 = new Microsoft.Maps.Location(center.latitude + 0.015, center.longitude);
            var pin2 = createCirclePushpin(loc2, 35, 'rgba(255, 255, 255, 1)', 'black', 1);
        	//add custome prop
            pin2.zIndex = 1;
    
            layer = new Microsoft.Maps.Layer('point');
            map.layers.insert(layer);
           
            pins.push(pin1);
            pins.push(pin2);
    
            layer.add(pins);
    
            for (var i = 0; i < pins.length; i++)
            {
            	Microsoft.Maps.Events.addHandler(pins[i], 'mouseover', pushpinmouseover);
            	Microsoft.Maps.Events.addHandler(pins[i], 'mouseout', pushpinout);
            }
            
    
         
        }
    
        function pushpinmouseover(e)
        {
        	var pin = e.target;
        	pin.zIndex = 2;
    
        	var arrSortPins = [];
        	arrSortPins.push(pin);
        	for (var i = 0; i < pins.length; i++)
        	{
        		if (pins[i].zIndex == 2)
        		{
        			continue;
        		}
        		arrSortPins.push(pins[i]);
        	}
        	layer.clear();
        	layer.add(arrSortPins);
        }
    
        function pushpinout(e)
        {
        	for (var i = 0; i < pins.length; i++)
        	{
        		pins[i].zIndex = 1;
        	}
        	layer.clear();
        	layer.add(pins);
        }
    
        function createCirclePushpin(location, radius, fillColor, strokeColor, strokeWidth) {
            strokeWidth = strokeWidth || 0;
    
            //Create an SVG string of a circle with the specified radius and color.
            var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2),
                '" height="', (radius * 2), '"><circle cx="', radius, '" cy="', radius, '" r="',
                (radius - strokeWidth), '" stroke="', strokeColor, '" stroke-width="', strokeWidth, '" fill="', fillColor, '"/></svg>'];
    
            //Create a pushpin from the SVG and anchor it to the center of the circle.
            return new Microsoft.Maps.Pushpin(location, {
            	icon: svg.join(''),
    			draggable:false
            });
        }
    	</script>
    </head>
    <body>
    	<div id="myMap" style=";width:600px;height:400px;"></div>
    </body>
    </html>

    • Edited by s000rd Wednesday, March 22, 2017 8:15 AM
    • Proposed as answer by Ricky_Brundritt Thursday, March 23, 2017 1:48 AM
    • Marked as answer by Ricky_Brundritt Thursday, March 23, 2017 1:48 AM
    Wednesday, March 22, 2017 7:19 AM